Stil seçiciler için JQuery eklentisi. IkSelect, seçimleri şekillendirmek için mükemmel bir eklentidir. Güzel seçim

Yaklaşık bir yıl önce, stil seçimleri için jQuery eklentilerinin ayrıntılı bir incelemesini zaten yapmıştım. Sonuç hayal kırıklığıydı, her birinin kendine göre eksiklikleri vardı ve istediğimi bulamadım. Yorumlarda pek çok geliştirici yanıt verdi, ancak hepimiz mükemmel bir eklenti olmadığı ve bunlardan herhangi birinin bir dosyayla çok fazla çalışma gerektirdiği konusunda hemfikirdik.

Son zamanlarda Selectik, Habré'de ortaya çıktı; oldukça iyi bir eklenti, ancak dezavantajları da var. GitHub'a bakılırsa, üzerinde çalışmalar halen devam ediyor, ancak şu ana kadar pek kullanışlı değil ve ana sorunları hala mevcut.

Geçenlerde bir yabancı bana yazdı ve ideale olabildiğince yakın yazmaya çalıştığı ikSelect eklentisini test etmemi istedi. Eklentiyi o kadar beğendim ki, kapsamlı testlerden ve hata düzeltmelerinden sonra, onun hakkında bir inceleme yazmaya ve bu konuya bir son vermeye ve ayrıca akıllı bir geliştiricinin merkeze girmesine yardımcı olmaya karar verdim.

Özetle: standart bir seçimin yapabileceği hemen hemen her şeyi yapabilir, mükemmel bir şekilde tasarlanmış ve farklı tarayıcılarda seçimlerin uygulanmasının özelliklerine uyum sağlarken. Eklenti, yerel Mac OS X seçicinin görünümünü tamamen kopyalar, ancak css aracılığıyla herhangi bir sorun olmadan stillendirilebilir.

Kapatıldığında böyle görünüyor:

Açık olarak şöyle:

Neden diğerlerinden daha iyi? Cilt: 11KB

Avantajları:

• mobil tarayıcılar dahil tüm tarayıcılarda (IE6+, FF, Opera, Chrome, Safari) çalışır
• genişliği otomatik olarak ayarlar
• her zaman sayfanın görünür kısmına (“akıllı konumlandırma” denir) hem yatay hem de dikey olarak açılır
• açılır listenin maksimum yüksekliğini ayarlamanıza olanak tanır
• seçenekleri gruplandırmanıza olanak tanır (optgroup)
• tamamen klavyeden kontrol edilir (geçişlere Tab, PgUp, PgDown, Home, End ile yanıt verilmesi dahil)
• ilk harflere göre bir seçim vardır (yalnızca bir değil, aynı zamanda sonraki harfler de)
• fare tekerleği ile kaydırmayı destekler
• satır içi (satır içi blok) eklendi
• büyük listelerle harika çalışıyor (1000'den fazla öğe)
• javascript devre dışı bırakıldığında standart seçimden ayrılır
• harika bir API'ye sahip

Kusurlar:

• aynı anda birden fazla öğenin seçilmesine izin vermez (çoklu seçim)
• açılır listenin kaydırma çubuğunu biçimlendirmez (çünkü hızı çok fazla etkiler)
• bira için koşmaz

Mobil Tarayıcılar Eklenti, alanın kendisini şekillendirir ancak tıklandığında yerel tarayıcı davranışını başlatır. iOS (Safari) ve Android (2.3 yerel, Firefox) üzerinde test edilmiştir:

Opera mini'de, bir listeyi açarken sayfanın yeniden yüklenmesini önlemek için standart seçiciler kalır. Opera mobile'da masaüstü sürümüyle aynı şekilde çalışır.

CSS dosyasını başlık bölümüne ekleyin:

.. ..

Farklı bir tema kullanmak istiyorsanız CSS dosyasını proje klasörünüze kopyalamayı unutmayın.

Seçime stil uygulama

EasyDropDown.js'yi kullanırken işaretlemeniz net ve sezgisel kalır. Sadece normal bir seçim öğesi eklemeniz gerekir. Ayrıca bu öğeyi devre dışı bırakabilir, bir etiket atayabilir ve varsayılan olarak seçilmesi gereken bir öğe belirleyebilirsiniz.

Bir öğeye stil vermek için açılır sınıfı ona atamanız yeterlidir. İşte bir örnek:

Ayar Seçenek 1 Seçenek 2 Seçenek 3 Seçenek 4 Seçenek 5

Hepsi bu, başka hiçbir şeye ihtiyacınız yok. Artık SELECT öğeniz daha güzel olacak.

Başlangıçta bir öğe seçmeniz gerekiyorsa seçilen özelliği kullanın. Bu durumda etiket kullanılmasını önermiyoruz çünkü Ekran biraz bozuk olabilir.

... Seçenek 2 ...

Ayrıca devre dışı bırakılmış özelliğini ekleyerek bir öğeyi devre dışı bırakabilirsiniz:

...

Bir tema seçme

EasyDropDown.js eklentisi 2 stil temasıyla birlikte gelir: Metro ve Flat. Bunları bağlamak için HTML5 data-attribute özelliğini kullanın.

Farklı bir tema uygulamak için SELECT öğesinin içine data-settings="("wrapperClass":"theme-name")" yazın. theme-name parametresi şu değerleri alabilir: metro veya düz. Örnekler:

...

Dikkat! Artık eklentinin bir parçası olması nedeniyle eklentinin daha fazla geliştirilmesi ve desteklenmesi durduruldu.

Web geliştirmedeki en tatsız (ve hatta berbat diyebilirim) şeylerden biri, html formlarının düzenidir. Ne yazık ki, tarayıcı ve işletim sisteminden bağımsız olarak form öğelerini görüntülemek için tek bir standart yoktur; tıpkı bu öğelerden bazılarını basamaklı stil sayfaları kullanarak özelleştirmenin bir yolu olmadığı gibi.

Aşağıdaki HTML form öğelerinin stili tam olarak düzenlenemez:

• açılır liste ;
• onay kutusu;
• anahtar .
• Dosya göndermek için alan.

Yazının başlığından da anlaşılacağı üzere burada sadece seçimlerden bahsedeceğiz.

Açılır listeleri şekillendirmek için jQuery eklentileri biçiminde birçok hazır çözüm vardır. Ancak ben (şu ya da bu nedenle eklentilerin hiçbiri bana uygun olmadığından) kendi tekerleğimi yeniden icat etmeye karar verdim ve bu makalede paylaştığım kendi eklentimi yazdım.

Bu eklentinin tüm olası seçim kullanım durumları için uygun olmadığını hemen belirtmek isterim (dezavantajları okuyun).

Eklentinin gösterimi

Eklentimi kullanarak seçici stilinin bir örneğini görebilirsiniz. Görselleri kullanmadan tasarladım.

Avantajları

• JavaScript devre dışı bırakıldığında standart seçiciler görüntülenir.
• Komut dosyasının boyutu küçüktür, yaklaşık 4 kilobayttır.
• IE6+ ve tüm modern masaüstü tarayıcılarda çalışır.
• Satır içi olarak görüntülenir.
• CSS kullanarak kolayca stillendirilir.
• Açılır liste için maksimum yüksekliği ayarlamanıza olanak tanır (CSS özelliği maksimum yükseklik).
• Belirtilmediği takdirde genişliği otomatik olarak ayarlar.
• Fare tekerleği kaydırmasını destekler.
• “Akıllı konumlandırmaya” sahiptir, yani. liste açılırken sayfanın görünen kısmının dışına çıkmıyor.
• Sekme tuşuna basarak "yakalayabilir" ve klavyedeki oklarla geçiş yapabilir.
• "Devre dışı" özelliğini destekler.
• Ayrıca dinamik olarak eklenen/değiştirilen seçimlerle de çalışır.

Kusurlar

• Çoklu özniteliği desteklemez, yani. birden fazla öğenin seçilmesine izin vermez (çoklu seçim).
• Liste öğelerinin (etiket) gruplandırılmasını desteklemez.
• Liste fareye tıklanarak açıldığında klavyedeki ok tuşlarıyla geçiş yapılması desteklenmez.

İndirmek

Eklenti kullanılamıyor çünkü artık konuyla alakası yok.

jQuery eklentisi “SelectBox Styler”

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

Güncellemeler 22.09.2012 Komut dosyası bir eklentiye dönüştürüldü (küçültülmüş bir sürüm dahil) ve ayrıca seçimleri dinamik olarak eklemek/değiştirmek için destek eklendi. 10/07/2012 Etiketin değişiklik yöntemini kullanırken komut dosyasının davranışı düzeltildi. Eklentiyi bağlama

Sitede henüz jQuery etkin değilse etiketin önüne aşağıdaki satırı ekleyin:

JQuery'den hemen sonra dosyayı komut dosyasına ekleyin:

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

Bu kodu yukarıdaki dosyalardan sonra etiketin önüne yerleştirin.

Seçimleri dinamik olarak değiştirirken yenileme tetikleyicisini etkinleştirmeniz gerekir, örneğin:

(function($) ( $(function() ( $("düğme").click(function() ( $("select").find("seçenek:nth-child(5)").attr("seçildi) ", true); $("select").trigger("yenile"); )) )) ))(jQuery)

Eklenti çalıştırıldıktan sonra HTML kodu

Yapısı şuna benzer:

-- Seçme --

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

-- Seç -- Öğe 1 Öğe 2 Öğe 3

Seçiciye stil vermek için kullanılan CSS sınıfları

Seçicilere CSS kullanarak stil vermek için aşağıdaki sınıfları kullanın:

.seçim kutusu	tüm seçim için ana kapsayıcı
.selectbox .select	daraltılmış durumda seç
.selectbox.odaklı .select	Sekme tuşuna basıldığında seçime odaklan
.selectbox .select .text	"Sürgülü kapı" tekniğini kullanarak arka plan resmi eklenmesi durumunda daraltılmış seçim için iç içe geçmiş etiket
.selectbox .tetikleyici	daraltılmış seçimin sağ tarafı (koşullu anahtar)
.selectbox .trigger .arrow	radyo düğmesi alt etiketi (ok)
.selectbox .dropdown	açılır liste sarmalayıcısı
.selectbox .dropdown ul	açılır liste
.selectbox li	öğeyi seç (seçenek)
.selectbox li.selected	seçilen öğeyi seç
.selectbox li.devre dışı	devre dışı (seçime uygun değil) öğeyi seç

Çözüm

Böyle bir senaryo oluşturmak oldukça zahmetli bir iştir çünkü birçok farklı noktayı dikkate almanız gerekir. Gerçekten ciddi bir hatanın ortaya çıkmayacağını umuyorum. Ama eğer bir şey olursa lütfen yorumlarda bana bildirin.

CSS3'ün gelişiyle sitedeki herhangi bir öğe için güzel bir stil yaratmak mümkün hale geldi. Çünkü CSS3, bir web sitesi tasarımı geliştirme sürecini hızlandıran çok çeşitli yetenekler sağlar. Bugün CSS'de select öğesinin stilini belirleyeceğiz. Bilmeyenler için bu öğe sitedeki açılır listeden sorumludur. Birçok kişi standart görünümü kullanır, ancak bunu sitenizin tasarımına uyacak şekilde değiştirebilirsiniz.

Listenin nasıl göründüğünü kendi gözlerinizle görmekten daha iyi bir şey olamaz:

İndirmek

Bu Select'in CSS'deki görünümü şöyle:

Bu konuyla ilgili benzer makaleler:

Şimdi bu açılır listeyi veya basitçe Seç'i kullanarak kurulum sürecini adım adım anlatacağım.

1 adım. Gerekli dosyaları bağlarız

Basit. Arşivi oradan kaynaklarla birlikte indirdikten sonra 2 dosyaya ihtiyacımız olacak (listenin ilk seçeneğini bağlıyorsanız style.css ve select.js veya ikinci seçeneği bağlıyorsanız select_demo2.js). Bu iki dosyayı etiketler arasına bağlarız:

1 2

Adım 2. Select öğesinin HTML yapısı

Yapıda süper karmaşık hiçbir şey yok (ve neden olması gerekiyor, sadece HTML :)). Öğelerini içeren bir Seç açılır menüsünü içeren basit bir form:

1 2 3 4 5 6 7 8 9 10 11 12

Birleşik Krallık ülkeleri: Lütfen bir ülke seçin: İngiltere Kuzey İrlanda İskoçya Galler

Aşama 3. Select CSS için stiller ekleme

Birçoğu yok. Listenin ilk seçeneği için stilleri aşağıda veriyorum. Görsellere giden yollara dikkatinizi çekmek isterim. Bunlardan yalnızca iki tanesi var: Birincisi listeyi açmak, ikincisi ise kapatmak içindir. Sırasıyla "yukarı" ve "aşağı" iki oka benziyorlar. Makalenin başında bulunan kaynaklardan indirilebilirler:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

.dropcontainer ( konum: göreceli; yazı tipi boyutu: 16 piksel; renk: #777;) .trigger ( renk: #777; dolgu: 10 piksel; yazı tipi boyutu: 16 piksel; genişlik: %50; arka plan: #fff url () 98 % merkez tekrarlama yok; ekran: blok; kenarlık: 1 piksel katı #ccc; -webkit-kutu-boyutlandırma: kenarlık kutusu; geçiş: tümü 0,5 saniyelik kolaylık; tüm 0,5 saniyelik hareket hızı; geçiş: tüm 0,5 saniyelik hareket hızı) .trigger: vurgulu ( renk: #777; arka plan: #f5f5f5 url (../images/select-arrow-open.png ) %98 merkez tekrarlama yok ; ). activetrigger ( color : #777 ; padding : 10px ; yazı tipi boyutu : 16px ; genişlik : %50 ; arka plan : #f5f5f5 url () %98 merkez tekrarsız ; ekran : blok ; kenarlık : 1px katı #ccc ; -webkit- kutu boyutlandırma : border-box; ) .activetrigger :hover ( arka plan : #f5f5f5 url (../images/select-arrow-close.png ) %98 merkez tekrarsız;

Demo örneğinde stiller css klasöründe bulunmaktadır. Bu nedenle, yolu içerisinde görsellerin bulunduğu bir klasörün yolunu ayarladığımızda, önce bir seviye yukarı çıkmak için ".." (iki nokta) yazıyoruz. Daha sonra görseller klasörüne gidin.

Şimdi listenin ikinci versiyonu için (sabit yüksekliğe sahip) stilleri tamamen kopyalamak yerine bir özelliği değiştirip sabit bir liste elde etmek için neler yapılabileceğini söylemek istiyorum.

Son açılan görünür özelliği değiştirmeniz gerekir:

1 2 3

.dropdownvisible ( yükseklik : otomatik ; )

1 2 3 4

.dropdownvisible ( yükseklik: 200 piksel; taşma-y: kaydırma;)

Ve eğer komut dosyalarını değiştirmeyi unutmazsanız (neyi neye değiştireceğinize bakın), aşağıdakileri alacaksınız:

Bu Select CSS (açılır liste) hangi tarayıcılarda düzgün çalışıyor?

• ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
• ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
• ✓ Opera 12.14, Opera 12.15, Opera 12.16
• ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
• ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
• ✓ Apple iOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
• ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Derse ek - yaratıcı vurgulu efekti + VİDEO

Derse ek olarak, sitede alışılmadık başka bir etkinin nasıl yapılacağını size anlatmak istiyorum: vurgulu efekti. Bu kısa videoyu izleyin ve kendiniz görün.

Çözüm

Sitenin bir diğer öğesi - Select, CSS ve Javascript kullanılarak tasarımınıza uyacak şekilde değiştirilebilir. Kurulum sürecinde karmaşık bir şey yok, bu yüzden başarılı olacaksınız. Ayrıca makaleye ek olarak yaratıcı bir yöntem ve kurulum videosu alacaksınız.

Sayfa düzeniyle ciddi olarak ilgilenen herkes, CSS'deki stil seçimi seçeneklerinin son derece sınırlı olduğunu bilir. Ancak çoğu zaman standart seçim tasarıma hiç uymaz, bu nedenle seçimi JavaScript kullanarak şekillendirmeniz gerekir. Aslında bu yazımızda JavaScript kullanarak kendi seçimimizi oluşturacağız.

Tüm bunları yapmanıza olanak tanıyan jQuery eklentileri de dahil olmak üzere pek çok hazır eklenti var. Ancak süper karmaşık bir şeye ihtiyacınız yoksa, saf JavaScript kullanarak her şeyi sıfırdan kendiniz yapmak daha kolaydır.

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

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

Öğe 1

Öğe 2

Öğe 3

Gördüğünüz gibi burada select etiketi yok. Artık özel seçimimizi CSS kullanarak istediğimiz şekilde şekillendirebiliriz:

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çin p.aktif (
arka plan rengi: #ee0;
}

Elbette burada istediğinizi yapabilirsiniz. Ve son olarak, görünümü seçme işlevine dönüştürmemiz, yani birkaç öğeden yalnızca birini seçip vurgulamamız ve ardından bunu formla birlikte göndermemiz gerekiyor. Bunu yapmak için JavaScript kullanacağız:

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ı al
for (var i = 0; i< nodes.length; i++) {
/* Konu dışı metin ve giriş öğelerini filtreleyin */
if (düğümler[i] HTMLParagraphElement örneği) (
/* Seçili öğeye active ekleyerek bu sınıfı diğerlerinden silerek */
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ı seçilen değere ayarlayın
}

Select işlevini uygulamanın anahtarı, select değerimizdeki değeri saklayan gizli alandır. Bu da form gönderildiğinde gönderilecek değerdir.

Bu, JavaScript'te kesinlikle herhangi bir seçme stilini yapmanın basit bir yoludur. JQuery kullanırsanız kod daha da basit olacaktır.

Elbette standart seçimin daha fazla işlevselliği vardır. Örneğin, tab öğesine yanıt verir ve öğeler arasında gezinmek için klavyedeki ok tuşlarını da kullanabilirsiniz. Ancak gerekirse tüm bunları JavaScript'te de uygulayabilirsiniz.

Ve son tavsiye. Kod noscript etiketini kullanıyordu ve bu bir tesadüf değildi. Herkeste JavaScript etkin olmadığından ve formun bu tür kullanıcılar için çalışabilmesi için en azından standart bir select görüntülemeniz gerekir. Ve JavaScript'i etkinleştiren herkes güzel seçimimizi görecektir.