- Anasayfa
- Hakkımızda
- Ürünler
- İletişim
yukarıda sıradan bir listeleme yaptık, ama ben bunun yanına numaralandırma yaparak kullanıcı yazarak değilde kullanıcı aktif olarak direkt mouse ile üstünde taşıma yaparak sıralamasını istiyorum.
jQuery UI saolsun bize bu nimetlerden yararlanmamız için yeterli bilmemiz gereken tek fonksiyon .sortable()
ben size bugun sortable fonksiyonu nasıl kullanılır bundan bahsedicem bir sonraki yazımızda ise standart bir menü sıralama uygulaması yaparız.
jQuery UI ve diğer jQuery dosyalarımızı sayfamıza ekledikten sonra bir liste oluşturalım.
<ul id="liste"> <li>Anasayfa</li> <li>Hakkımızda</li> <li>İletişim</li> <li>Ivır Zıvır</li> </ul>
<div id="sonuc"></div>
Şimdi bunun üstünde sıralamada değişiklik yapmak artık çok kolay hemen gösterelim.
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#liste").sortable();
});
Artık etiketlerin üstünde mouse ile surukle bırak yaparak değişiklik yapabilirsiniz.
Bu kadar kolay mıydı ? evet bu kadar kolay ama herşey bununla bitmiyor
- Menuler sıralanırken.. (activate)
- Menuler sıralanırken yerlerının değişmesi (change)
- Menüler Sıralandıktan sonra (beforeStop)
- Sürüklenme yerleri (Sağa sola - yukarı aşağı) (axis)
- Taşınabilecekleri belirleme (disabled)
- Farklı nesneler arasında taşıma yapma (connectWith)
- Cursor: taşırken mouse'nin aldığı görünüm (cursor)
- Delay: gecikme süresi (delay)
- Seçilen nesne altında istenilen nesneyi sürükleme (items)
- revert: geri dönüş (revert)
gibi özelliklerimiz var bunlar en çok kullanılan özellikler yanlarına uygulamada kullanacağımız isimlerini yazdık.
Hemen kullanına geçersek sırasıyla
activate
$(document).ready(function(e) {
$("#liste").sortable({
activate: function(){
$("#sonuc").text("Değiştirmek İçin Sürükleyin");
}
});
});
change
$(document).ready(function(e) {
$("#liste").sortable({
change:function(){
$("#sonuc").text("Nesneler Yer Değişti");
}
});
});
Buda fonksiyon halinde çalışır değişme olduğunda kodlar içine yazılır.
beforeStop
Bu ise herşey tamamlandıktan sonra yapılacak işlemleri belirtir fonksiyon belirterek çalışır
$(document).ready(function(e) {
$("#liste").sortable({
beforeStop :function(){
$("#sonuc").text("Nesneler Yer Değiştirmesi Tamamlandı");
}
});
});
Şeklinde basit bir kullanımı vardır.axis
Basit ama bazen sıkıntı yaratan konulardan birisi nesnelerin sürüklenme yönleridir, axis sayesinde nesnelerin x ve y şeklinde yer belirterek hangi yöne gideceğini belirtiriz.
$(document).ready(function(e) {
$("#liste").sortable({
axis:"y"
});
});
Şeklinde basit bir kullanımı vardır.Not: x sağa ve sola, y ise yukarı aşağı gitmesini sağlar
disabled
Bazen o anki işleme göre nesnelerin taşınmaması lazımdır bunun sayesinde çözüyoruz.
$(document).ready(function(e) {
$("#liste").sortable({
disabled:true
});
});
Kullanımı bu şekildedir.connectWith
Geldik şimdi ince bir yere bu özellik bazı yerlerde hayat kurtarır en çok kullanılan özellikler arasındadır.
Peki nedir bu ? bu 2 yada daha fazla sıralama arasında nesne alışverişini sağlar yani ben #liste'den aldığım nesneyi #menu icerisine bırakabilirim.
Kullanımına gelicek olursak
$(document).ready(function(e) {
$("#liste").sortable({
connectWith:"#liste2"
});
$("#liste2").sortable({
connectWith:"#liste"
});
});
Şeklinde kullanılır. Burda #liste'ye dedikki #liste2'den gelen nesneleri kabul et, aynı şekil #liste2'ye dedik.
cursor
Bu özellik ise taşınırken mouse'nin alacağı görünümdür(pointer,move vs.)
$(document).ready(function(e) {
$("#liste").sortable({
cursor:"move"
});
});
Şeklinde kullanılır.
delay
Sık sık kullanılmasada bazen etkili olabiliyor. Bu ise nesnenin ne kadar zaman sonra sürüklenmeye başlayacağını söyler
$(document).ready(function(e) {
$("#liste").sortable({
delay:1000
});
});
mesela yukarıda nesnenin 1 saniye sonra hareket etmesini söyledik.
items
Bu özellik sayesinde hangi nesnenin taşınabileceğini belirtebiliyoruz.
$(document).ready(function(e) {
$("#liste").sortable({
items:"li"
});
});
Yukarıda sadece li etiketlerini taşıyabileceğini belirttik.
revert
Ve son olarak revert. Nesnenin geri dönüş yapıp yapmayacağını belirtir
$(document).ready(function(e) {
$("#liste").sortable({
revert:true
});
});
Şeklinde kullanılır.
Yukarıda anlattıklarımın tümünü aşağıdan result tıklayarak önizleme yapabilirsiniz.
