Bu plugin jQueryui kitaplığında, kullanım alanı geniş olan checkbox ve radyo butonlarını ihtiyacınıza göre değişik şekillerde karşılayan hoş tasarımlı butonlar yapmanızı sağlar..

Bir tanecik blogumun plugin kategorisinde gölgelenmeye layık gördüğüm için, sizinle paylaşmak istedim..Ekran görüntüsü şöyle;

Web sitenizin; dilediğiniz bölgesinde kullanabileceğiniz,  hatta birazcık PHP bilginiz var ise wordpress blogunuzda bile kullanabilirsiniz..Resimde gördüğünüzle kalmayan, kişiselleştirilebilir bir yapıya sahip.. Şimdi nasıl kullanacağınız anlatacağım, çünkü yapımcı sadece demo sayfa javascript dosyasını paylaşmış, herhangi bir kaynak koddan bahsetmiyor..

Diğer Scriptleri;
jquery.bind-Script
ui.checkBox-Script
jquery.usermode-Script (optional)

Şimdi birazcık konuya açıklık getirelim.. Aslında demo sayfada yazılanlardan anladıklarımı paylaşacağım, yoksa plugini ne kullandım ne de indirdim..

İlk olarak plugini kullanabilmek için yukarıda verdiğim javascript dosyalarını indirmeniz ve aşağıda belirteceğim şekilde html sayfanızın içerisine bildirimeniz gerekmektedir;

<script src=”js-lib/ui.core.js” type=”text/javascript”></script>

<!– optional for High Contrast Mode Support –>
<script src=”js/jquery.usermode.js” type=”text/javascript”></script>

<script src=”js/jquery.bind.js” type=”text/javascript”></script>
<script src=”js/ui.checkbox.js” type=”text/javascript”></script>

Yukarıda, javascript dosyalarını belirttik, fakat jquery.usermode.js dosyasını belirtmek zorunda değilsiniz, bu isteğe bağlıymış..

Daha sonra ise head etiketi bitmeden önce şöyle bir kaç script kodunun ne işe yaradığını gösterelim.

$('#check-all').click(function(){
 $('#example input[type=checkbox]').checkBox('changeCheckStatus', true);
 return false;
 });
 $('#uncheck-all').click(function(){
 $('#example input[type=checkbox]').checkBox('changeCheckStatus', false);
 return false;
 });
 $('#check-2').click(function(){
 $('#example input[type=radio]:eq(1)').checkBox('changeCheckStatus', true);
 return false;
 });
 $('#native').click(function(){
 //native methods
 $('#example input[type=radio]:eq(0)').attr({checked: true, disabled: true})
 //reflect the current state
 .checkBox('reflectUI');
 return false;
 });
 });

Bu kod ile default bölgesinde bulunan ve demoda en üst satırda gördüğünüz butonları ayarlayabilirsiniz.

yukarıda ki kodda ise,; check-all olarak adlandırılan butona tıklanıldığı zaman bütün kutuların yukarıda belirttiğimiz jquery metodu ile seçili kalmasını,

uncheck-all butonuna tıklanıldığı zaman da bu eylemin tersine dönüşmesi sağlanır.

Bu iki olay üst tarafta checkboxlar için alt tarafta ise radyo butonları için ayrı ayrı yazılmış kodlardan oluşuyor.

Ayrıca demoda gördüğünüz, Check Second Butonu ile de javascript ile  hangi kutuyu seçmek isterseniz, video derslerimizde gösterdiğimiz gibi ikinci elemana bir metod atanır ve butona tıklanıldığı vakit ikinci buton seçili olur. Aslında çokta büyütülecek bir plugin olmasada fena görünmüyor..

Bol Güneşli günler dilerim..