İnteraktif Tasarım

DropKick Kullanarak Stil Seçme

Web sayfalarını şekillendirme söz konusu olduğunda, hiçbir şey formlar kadar zor değildir. Ve şekillendirme formları söz konusu olduğunda - neredeyse - hiçbir şey CSS ile, ancak sadece CSS ile ne kadar kazanabileceğimiz konusunda büyük sınırlamalar vardır. Çoğunlukla, tek geçerli seçenek JavaScript ile şekillendirme ve ilerlemeci bir geliştirme biçimi olarak, utanmak zorunda olduğumuz bir şey değil.

Bu makalede kullanacağız DropKick açılır açılır. Hangi dropkick dönüşür

Yapmamız gereken ilk şey bir

DropKick çağırıyor

Bir kez kurduk CSS ile şekillendireceğimizden emin olabileceğimiz bir şeye dönüşüyoruz. Ayrıca, değerlerimiz yeni HTML5 veri özniteliklerine eklenmiştir (veri-dk-dropdown-değeri ile birlikte).

Şimdi, açılır penceremizi CSS ile şekillendirebilir veya isterseniz DropKick'in temalarını kullanabiliriz; Yazım sırasında mevcut üç tema var, varsayılan, koyu parlak ve açık parıltılı. Ancak çoğu insan projelerinin ihtiyaçlarına uygun kendi stillerini kullanmak isteyecektir.

DropKick'i genişletme

DropKick'i genişletmek basit bir işlemdir. Örneğin, açılır listeden bir değişiklik yapıldığında tespit etmek istediğimizde, değişiklik etkinliği işleyicisini şu şekilde ekleyebiliriz: 

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

Son düşünceler

Eminim jQuery kullanmadan seçkin bir menüyü biçimlendirmenin binlerce yolu vardır, ancak sadece CSS kullananlar tarayıcının varsayılanlarına karşı bir kayıp savaşıyla savaşıyor. Bu eklentinin sadeliği ve sunduğu muazzam esneklik ve DropKick anlamına gelen ilerici geliştirme yaklaşımı mükemmel bir çözümdür.

DropKick'i bir projede kullandınız mı? Tercih ettiğiniz bir stil yönteminiz var mı