Bootswitch, Yeni jQuery Eklentim!

jQuery konusunda ve birşeyleri geliştirme konusunda paslanmadığımı kendime göstermeyi başardığım bir eklenti ile karşınızdayım. Bu seferki WordPress altyapısına ait bir eklenti değil. Tamamiyle jQuery ve Bootstrap üzerine kurguladığım bir eklenti. Aslında Auto Attachments eklentisi için yazılmış ufak bir javascriptti ama biraz araştırma yapınca internetteki çoğu kişinin böyle bir eklenti aradığını farkettim.

Eklenti ne işe yarıyor?

Eklenti basit anlamda bootstrap buton gruplarını daha kullanılabilir bir hale sokuyor. Ben Auto Attachments ile uğraşırken başımdaki en büyük bela seçili butonları göstermek ve onlardaki değerleri almaktı. Seçim kutusu kullanmak istemediğimden ya checkbox (seçenek kutusu) yada radio (radyo) butonları kullanmak zorunda kalıyordum. Buton gruplarını yaparken bu bazen kodların karışmasına sebep oluyordu. Bootswitch ile bu işi kökten ve javascrip kulanarak halledebiliyorum.

Bootswitch sayfaya eklediğiniz tüm buton gruplarını bir seferde tarıyor ve gizlenmiş olan değer inputu (girdi alanı) üzerindeki değerle karşılaştırarak butonları aktif ediyor ve eğer butonlara basılırsa o değeri input alanına işliyor. Basit bir biçimde internette bulabileceğiniz iPhone stili on/off butonlarının işlevini gerçekleştiriyor.

Nasıl Kullanılır?

Bu eklentiyi kullanmak için jQuery, Bootstrap ve eklentinin kendisi yeterli. Aşağıda vereceğim demo sayfasını oluştururken kullandıklarım gibi.

Önce jQuery ve Bootstrap ekleyelim.

Şimdi ise eklentimizin dosyasını ekleyelim.

Buton gruplarımızı oluşturalım.

Son olarak da jQuery DOM alanına gerekli kodu ekleyelim.

Eğer bir yerde yanlış yapmadıysak sistemimiz demodaki gibi çalışmış olacaktır.

Ayrıca eklentiyi tamamiyle özelleştirebilme lüksüne sahipsiniz.

Eklenti Opsiyonları

Aşağıdaki eklenti opsiyonlarını önce size tanıtalım. Yanlarına açıklamalarını ekledim.

Bu opsiyonları eklentimiz ile birleştirelim.

Ta da!! İstediğiniz gibi kullanabileceğiniz güzel bir eklentiye sahipsiniz. Eklentiye ulaşmak, demoyu görmek, üzerinde geliştirme yapmak ve indirmek için aşağıdaki linkleri kullanabilirsiniz.
Github Üzerinde Görüntüle Github Üzerindeki Tanıtım Sayfası (DEMO)
Selametle