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.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Şimdi ise eklentimizin dosyasını ekleyelim.
<script src="yoursitepath/bootswitch.min.js"></script>
Buton gruplarımızı oluşturalım.
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-info yes" data-toggle="button">Yes</button>
<button type="button" class="btn btn-info no" data-toggle="button">No</button>
</div>
<input type="hidden" id="showm" class="form-control" /> Son olarak da jQuery DOM alanına gerekli kodu ekleyelim.
<script>
jQuery(document).ready(function($) {
$('.btn-group').bootswitch();
});
</script> 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.
{
object: this, //buton grubunun class değeri. değiştirmeyin
positive: '.yes', //pozitif değerin buton class veya idsi
negative: '.no', //negatif değerin buton class veya idsi
posval: 'yes', //pozitif buton değeri (sayı yada harf olabilir)
negval: 'no', //negatif buton değeri (sayı yada harf olabilir)
input: '#showm' //hedef input idsi (gizli değer girdi alanı)
} Bu opsiyonları eklentimiz ile birleştirelim.
<script>
jQuery(document).ready(function($) {
$('.btn-group').bootswitch({
positive: '.yes',
negative: '.no',
posval: 'yes',
negval: 'no',
input: '#showm'
});
});
</script> 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