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.

Jquery ile draggable ve droppable nesneler yaratmayı anlattıktan sonra şimdi de yeniden boyutlandırılabilen nesneler oluşturmayı anlatacağım.

Yeniden boyutlandırmayı textarea tagından bilirsiniz. Kendisi doğal olarak boyutu ayarlanabilen bir elementtir. Fakat jquery ile dilediğiniz tüm elementleri yeniden boyutlandırılabilir nesneler haline getirebilirsiniz. Yazının başlangıcı için örnek olması açısından buradaki örneğe bakabilirsiniz.

Resizable nesneler oluşturmak için gerekli kütüphaneleri sayfamıza ekleyelim.