WordPress bir içerik yönetim sistemidir. Dolayısıyla tema odaklı çalışır, aynı telefonunuzun temasını değiştirir gibi wordpress sitenizin de temasını değiştirebilirsiniz. Bunu bir ön bilgi olarak yazdıktan sonra asıl meseleye gelebiliriz.

Ben bir wordpress geliştiricisiyim. WordPress için temalar üretmekteyim. Bu dökümanı oluşturmamın sebebi de, daha sonradan bakmak üzere kendime yazılı bir kaynak oluşturmak ve unuttuğum zaman açıp hemen hatırlayabilmektir.

Kendime kaynak oluştururken, başkalarına yararlı olma düşüncesi ise çok daha güzel olacaktır diye, bu yazı dizisini başkasına anlatıyor gibi yazacağım.

Jquery dili ile bir HTML nesnesinin sınıfı üzerinde değişiklik yapabilirsiniz.

Bir nesnenin sınıfını değiştirmek için addClass, removeClass, toggleClass ve switchClass fonksiyonları kullanılır. Bunlardan Jquery ve Niteleyiciler (Attributes) adlı yazımda bahsetmiştim, bu yazımda ise bu fonksiyonları animasyon şeklinde kullanmaya çalışacağız.

Jquery UI Efekt kütüphanesi ile birlikte sınıf ekleme çıkarma fonksiyonlarını daha efektiv bir şekilde kullanabilirsiniz. Bunun için öncelikle gerekli kütüphaneleri sayfanıza eklemelisiniz.

<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>

Jquery ve Efekt Fonksiyonları adlı yazımda animate fonksiyonundan bahsetmiştim.

Animate fonksiyonu css özelliklerini kullanarak yeni efektler yaratabilmeniz için oluşturulmuş bir fonksiyondur. Fonksiyonun kullanımını anlatırken, kullanılan css özelliklerinin sayısal değerler olması gerektiğini de söylemiştim.

Jquery UI efekt kütüphanesi ile birlikte sayısal css özelliklerine ek olarak belli başlı css özellikleri de animate fonksiyonu için kullanılabilir hale getirilmiştir. Bu özellikleri aşağıdaki gibi listeleyebiliriz ;

Merhaba, bu yazımda jquery ile sortable nesne grupları oluşturmayı anlatmaya çalışacağım.

Dikkat ettiyseniz nesne grupları diyorum. Yani birden fazla, aynı cinsten nesneyi kendi aralarında sıralamaya çalışacağız. Daha anlaşılır olması açısından buradaki örneğe bakınız. Örnekte <li> etiketleri birbirleri arasında yer değiştirebiliyor. Sürüklenebilir olması açısıyla draggable nesnelere de benzemiyor değiller.

Ne yapmaya çalıştığımızı anlattıktan sonra işin detayına girelim, öncelikle gerekli kütüphaneleri sayfamıza entegre etmemiz gerekiyor.