Stil seçimi için WordPress eklentisi. Stil seçiciler için JQuery eklentisi. Bir seçim tasarlamak için kullanılabilecek CSS sınıfları

Yapı standart olacak

Böylece seçim, boyut özelliğini 1 değerleriyle kullanarak birinci satırı görüntüler.

Seçtiklerimiz için stil oluşturma

Ottrimomo

Fil Su Aygırı Zürafa

Uygulamada, gücün tüm tarayıcılarda aynı şekilde çalışması için, satıcı önekleriyle birlikte birkaç satır ccs güç görünümü yazdık. Güç hakkında aşağıyı okuyun.

Katlanabilirliğin tamamı, standart okun yerine arka planın uygulandığı dikdörtgen okla değiştirilmesinden kaynaklanıyordu. Bu şekilde bir resim ekleyebilirsiniz. Ek arka plan boyutu kutusunun boyutunu da ayarlamak gerekir

css3 güç görünümü tasarımımızı uygulamaya yardımcı oldu

Bu güç, bir öğenin görünümünü şu şekilde değiştirmenize olanak tanır: düğme, onay kutusu, radyo, alan, simge ve çok daha fazlası. Bölümümüzde bir unsuru haykırdık, vikoristuyuchi none ve ek arka plan için bir resim ekledik

Seçim seçeneğine stil vermek için JavaScript'e ihtiyacınız var

JavaScript kodunun önünde jQuery bağlantıları var

Günümüzde tasarımcılar giderek daha fazla HTML 2.0 tarzında küçük HTML formları çizmeye başladılar, bu eğilim bir takım değişikliklere neden oluyor ve daha da önemlisi, güzel veri giriş alanları ve yuvarlatılmış kenarlara ve gölgelere sahip alanların seçilmesidir. Sadece memnun edebilirsiniz, hatta her şey harika ve CSS3 zaten birçok yönden galip geliyor ve formlara, alanlara ve seçicilere harika bir görünüm vermenize olanak tanıyor. Yazık, her şeyi bu kadar pembe yapmayın.

Tüm modern tarayıcıların HTML5 ve CSS3'ü desteklemesine rağmen, herkes bunları kullanmıyor ve istatistiklere göre, tüm İnternet kullanıcılarının yarısı daha önce olduğu gibi eski sürüm tarayıcıları kullanıyor ve çoğu tam sürümün keyfini çıkarmıyor dünya veya CSS3 kullanın. Bu nedenle, görünen listenin (Seç) şekillendirilmesi genellikle eski yöntemle, jQuery (js) ve PNG veya GIF görüntüleri kullanılarak yapılır. Sizlere bu yöntemlerden birinden bahsetmek istiyorum.


Aşağıda RuNet sitelerinde aniden bulduğum bir script var, ne yazık ki yazarının adresini veya adını hatırlayamadım. Sadece sana büyük saygı duyuyorum.

Kodun gözden geçirilmesi JS

"Selectu" stilini oluşturmak için komut dosyasına tıklayın.

Kodun gözden geçirilmesi JS

Stilize edilecek HTML kodu "select"

Kodun gözden geçirilmesi HTML'

Stil seçime kadar stosovano olacak

Kodun gözden geçirilmesi CSS

Arka plan resmini değiştirerek seçimi istediğiniz gibi şekillendirebilir ve bu örneği çoğu tarayıcıda (en eskileri gibi) kullanabilirsiniz.

Büyük web sitelerinde form nesnelerinin stilizasyonuna ilişkin benzer bir prensibi sıklıkla kullanırım ve bunun tersi de geçerlidir; bundan yeni bir fikir yaratabiliriz, böylece çoğu web yöneticisi, kültürü tanıtmak adına bu kadar basit olmayan çözümleri durgunlaştırma konusunda isteksizdir. eski tarayıcılarla.

İyi günler habra kullanıcıları ve sadece okuyun. Porivnyano yakın zamanda stillerin select etiketine nasıl ayarlanacağını sordu. Hepimiz formun stilizasyonunun sitenin tasarımına uygun olmasını isteriz, ancak şu ana kadar her şey saf CSS ile tanımlanamıyor. Bu makalede CSS ve bir JavaScript dil kütüphanesi olan jQuery kullanarak kendi seçim listenizi yazmanın basit bir örneğine bakacağız. Özellikle yeni başlayanların bu materyalden faydalanacağını düşünüyorum. Elbette yerel JS'de yazmak daha iyi olurdu, ancak herkes daha fazla kod satırı olacağını biliyor ve bunun daha akıllı olması pek mümkün değil.

Dürüst olmak gerekirse benzer bir çözüm bulmaya çalıştım ancak select etiketi için etkili div sarmalayıcılardan başka bir şey bilmiyordum. Ve basit ve gerekli bir şey yazmanın kötü olacağını düşündüm. İşte bu kadar!

Üç dosya hamuru kalıplamamızla aynı kaderi paylaşıyor:

• seçim kutusu.html
• seçim kutusu.css
• selectbox.js

seçim kutusu.html

Ay

• Siçen
• Lutius
• Berezen
• Kviten
• Traven
• Çerven
• Lipen
• Yılan
• Veresen
• Zhovten
• Yaprak dökümü
• göğüs

seçim kutusu.css

div#selectBox ( genişlik: 250 piksel; konum: göreceli; yükseklik: 50 piksel; kenarlık yarıçapı: 3 piksel; kenarlık: düz 1 piksel açık gri; arka plan rengi: #fff; renk: #333; imleç: işaretçi; taşma: gizli; geçiş: .3s; ) div#selectBox p.valueTag ( dolgu: 15 piksel; imleç: işaretçi; geçiş: .2s; yükseklik: 40 piksel; ) div#selectBox > img.arrow ( konum: mutlak; sağ: 0; genişlik: 50 piksel; dolgu : 15px; ) /* Safari, Chrome ve Opera kullanıcıları için bir hoş geldin bonusu - stilize edilmiş bir kaydırma çubuğu. */ ::-webkit-scrollbar ( arka plan: şeffaf; genişlik: 0,5em; konum: mutlak; ) ::-webkit-scrollbar-track ( arka plan: şeffaf; konum: mutlak; z-index: -2; ) :: -webkit-scrollbar-thumb ( border-radius: 100px; arka plan: #888; ) ul#selectMenuBox ( arka plan: #fff; geçiş: .3s; genişlik: %100; yükseklik: 200px; overflow-y: otomatik; taşma- x: gizli !önemli; konum: mutlak; kenar boşluğu üst: 00 piksel; ekran: blok; ) ul#selectMenuBox > li ( ekran: blok; li.option ( renk: gri; dolgu: 10 piksel; ) ul#selectMenuBox > li. seçenek: üzerine gelin ( renk: #333; arka plan: #e1e1e1; geçiş: 0,2s; )

Ve şimdi zevk için! Eklentinin çıktı koduna bir göz atalım seçim kutusu() jQuery için selectbox.js dosyası:

selectbox.js

(function($) ( $.fn.selectbox = function() ( // cob parametreleri // div'in standart yüksekliğini ayarlayın "a.var selectDefaultHeight = $("#selectBox").height(); // döndür div"e var rotaryDefault = "rotate(0deg)"; // butona bastıktan sonra özel bir fonksiyon kullanılır, bu // div"a'mızın çıkış yüksekliğini hesaplar. // ile hizalamak kolaydır giriş parametreleri (komut dosyasında belirtilenler) $("#selectBox > p.valueTag").click(function() ( // height() yöntemini kullanarak bir nesnenin yüksekliğini hesaplamak var currentHeight = $("# selectBox").height(); // verilen kafa yüksekliğinden kaçmayı/kaçmamayı kontrol etmek, // bundan sonra ne yapılacağını anlamak için if (currentHeight< 100 || currentHeight == selectDefaultHeight) { // если высота блока не менялась и равна высоте, заданной по умолчанию, // тогда мы открываем список и выбираем нужный элемент. $("#selectBox").height("250px"); // «точка остановки анимации» // здесь стилизуем нашу стрелку и делаем анимацию средствами CSS3 $("img.arrow").css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } // иначе если список развернут (высота больше или равна 250 пикселям), // то при нажатии на абзац с классом valueTag, сворачиваем наш список и // и присваиваем блоку первоначальную высоту + поворот стрелки в начальное положение if (currentHeight >= 250) ( $("#selectBox").height(selectDefaultHeight); $("img.arrow").css((transform: rotaryDefault)); ) )); // gerekli öğeyi seçtiğinizde listenin kendisi bu şekilde yanar // ve paragrafın metnini listedeki öğenin metniyle değiştirir $("li.option").click(function() ( $( "#selectBox").height(selectDefaultHeight); $ ("img.arrow").css((transform: rotaryDefault)); $("p.valueTag").text($(this).text()); )); ); )) (jQuery);

$("seçici").selectbox();
İlk olarak, belge nesnesinin hazır() yönteminde çağrıyı etkinleştirin, böylece eklenti belge tamamen yüklendikten sonra yüklenir. Bu jQuery eklentisinin ne olduğunu öğrenebilirsiniz.

Sayfa düzeniyle ciddi olarak ilgilenen herkes, CSS'de stil seçme olanaklarının büyük ölçüde arttığını bilir. Standart bir seçim çoğu zaman tasarıma uymasa da, seçme stiliyle JavaScript aracılığıyla çalışmanız gerekir. Aslında bu makale, JavaScript kullanarak kendi seçiminizi oluşturmanıza olanak tanır.

JQuery de dahil olmak üzere her şeyi yapmanıza olanak tanıyan pek çok hazır eklenti var. Karmaşık bir yapıya ihtiyacınız yoksa saf JavaScript kullanarak her şeyi sıfırdan oluşturmak daha kolaydır.

Öncelikle yeni seçimimizin HTML yapısını oluşturalım:

Öğe 1
Öğe 2
Öğe 3

Öğe 1

Öğe 2

Öğe 3

Bildiğiniz gibi burada neredeyse hiç select etiketi yok. Artık seçimimize ek CSS ile kolayca stil verebiliriz:

Seçme (
arka plan rengi: #0ee;
kenarlık yarıçapı: 10px;
dolgu: 10px 0;
genişlik: 200 piksel;
}
.p'yi seç(
imleç: işaretçi;
kenar boşluğu: 0;
dolgu: 5 piksel 20 piksel;
}
.seç p.aktif (
arka plan rengi: #ee0;
}

Delicesine, dilediğiniz her şeyi kazanabilirsiniz. Ve, select işlevinin görünümünü değiştirmeniz gerektiğine karar verirsiniz, böylece çıkartmalardan birden az öğeyi seçip vurgulayabilir ve aynı zamanda formu yönetebilirsiniz. Kimler için JavaScript'i hızlandırıyoruz:

Fonksiyon seçimi(öğe) (
var değer = element.getAttribute("veri-değeri"); // Seçilen elemanın değerini oku
var düğümler = element.parentNode.childNodes; // Diğer tüm elemanları kaldır
for (var i = 0; i< nodes.length; i++) {
/* Üçüncü taraf öğeler filtrelenmiş metin ve giriştir */
if (düğümler[i] HTMLParagraphElement örneği) (
/* Seçilen öğeye active ekleniyor, bu sınıf diğerlerinden siliniyor */
if (value == düğümler[i].getAttribute("veri-değeri")) düğümler[i].className = "aktif";
else düğümleri[i].sınıfAdı = "";
}
}
document.getElementById("my_select").value = değer; // Gizli alanın değerini ayarlıyoruz
}

Seçim işlevinin uygulanmasındaki kilit nokta, seçimimizin değerinin kaydedildiği gizli alandır. Formu gönderirken aynı bilgiler gönderilecektir.

Bu kadar basit bir şekilde eksen, seçilen JavaScript'in stilizasyonu olsun, kesinlikle çekingendir. JQuery kullanırsanız kod daha da basit olacaktır.

Delicesine, standart seçimin daha fazla işlevselliği var. Örneğin, sekmeye yanıt verir, böylece klavyedeki ok tuşlarını kullanarak da öğeler arasında hareket edebilirsiniz. Ancak tüm bunlar gerekirse JavaScript'te de uygulanabilir.

İlk öneri. Kodun noscript etiketi var ve net değil. Herkeste JavaScript etkin değildir ve formun bu tür kullanıcılar için çalışabilmesi için standart bir seçim girmeniz gerekir. Ve JavaScript'i etkinleştiren herkes lütfen seçim aracımızı kullanın.

Saygı! Şimdi kısmen olanla bağlantılı olarak eklentinin daha da geliştirilmesi ve desteklenmesi.

Web geliştirmede en kabul edilemez (ve açgözlü demek istiyorum) konuşmalardan biri HTML formları kümesidir. Ne yazık ki, tarayıcıdan veya işletim sisteminden bağımsız olarak form öğelerini görüntülemek için tek tip bir standart ve ayrıca bu öğelerden, vikoryst ve basamaklı stil sayfalarından eylemleri yeterince tasarlama yeteneği yoktur.

Aşağıdaki HTML form öğeleri daha fazla stilize edilemez:

• açılacak şeylerin listesi;
• sancak;
• Peremikach.
• Dosyayı yüklemek için alan.

Yazının başlığından da anlaşılacağı üzere seçicilik konusunda söylenecek daha çok şey var.

Açılan stil listeleri için jQuery eklentileri şeklinde birçok hazır çözüm var. Ancak ben (bunları ve diğer nedenleri dikkate almadan, eklentilerden gelenler aracılığıyla) çarkımın çıkış yolunu seçtim ve bu yazıda paylaştığım bir güç eklentisi yazdım.

Bu eklentinin olası tüm seçim durgunluğu durumları için uygun olmadığını belirtmek isterim (birkaçını okuyun).

Ek bir eklenti kullanarak seçici stilinin örneğini görebilirsiniz. Bu tasarımı tasvir etmek için vikoristan kullanmadan oluşturdum.

• JavaScript etkinleştirildiğinde standart seçiciler görünür.
• Komut dosyasının boyutu küçüktür, yaklaşık 4 kilobayttır.
• IE6+ ve mevcut tüm masaüstü tarayıcılarda çalışır.
• Dahili olarak tanıtılacak.
• CSS aracılığıyla kolayca özelleştirilebilir.
• Listenin maksimum yüksekliğini ayarlamanıza olanak tanır (CSS gücü maksimum yüksekliği).
• Belirtilmediği takdirde genişliği otomatik olarak ayarlar.
• Fare tekerleğinin kaydırılmasını destekler.
• Yani “makul bir konumlandırmaya” sahip olabilir. Listeyi açtığınızda sayfanın görünen kısmının dışına çıkmayın.
• Sekme tuşunun baskısını "yakalayabilir" ve klavyedeki okları hareket ettirebilirsiniz.
• "Devre dışı" özelliğini destekler.
• Dinamik olarak eklenen/değiştirilen seçicilerle çalışır.

• O halde çoklu özniteliği desteklemiyor. birden fazla öğenin seçilmesine izin vermez (çoklu seçim).
• Liste öğelerinin (etiket) gruplandırılmasını desteklemez.
• Fare tıklamalarının listesi açıksa klavyedeki okları hareket ettirmeniz önerilmez.

Eklenti kullanılamıyor çünkü VIN güncel değil.

Sürüm: 1.0.1 | Zavantajen: 11103 | Boyut: 7 KB | Son güncelleme: 10/07/2012

Eğer jQuery henüz sitede etkinleştirilmemişse, etiketten önce bir satır ekleyin:

JQuery'den hemen sonra dosyayı komut dosyasına bağlayın:

(işlev($) ( $(işlev() ( $("select").selectbox(); )) ))(jQuery)

Bu kod belirtilen dosyalardan sonra etiketin önüne yerleştirilmelidir.

Seçicileri dinamik olarak değiştirirken yenileme tetikleyicisini başlatmak gerekir, örneğin:

(işlev($) ( $(işlev() ( $("düğme").click(işlev() ( $("seç").find("seçenek:n'inci-çocuk(5))).attr("seçildi) ", true); $("select").trigger("yenile"); )) )) ))(jQuery)

Yapısı şuna benzer:

-- Seçme --

• -- Seçme --
• Paragraf 1
• 2. nokta
• 3. nokta

Ek CSS'ye yönelik seçicilik oluşturmak için aşağıdaki sınıfları kullanın:

Bir çok farklı şeyle uğraşmak zorunda kalırken böyle bir scriptin oluşturulması sizi meşgul etmeye yetiyor. Artık ciddi bir hata olmayacağından eminim. Merhaba, yorumlarda bana bildirin.