jQuery sortable kullanımı

Kısa bir aradan sonra yazılarıma devam ediyorum geçen gün bir projede lazım oldu kullanıcı oluşturduğu menülerin sırasını kendisi belirlemek istedi php ile standart menuler listelettirilir yan tarafına hangi sırada olacaksa sıra numarası yazılır veritabanına kaydedilir ve listelettirilirken ona göre listelenir.

• 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");
  }
 });
});

fonksiyon halinde çalışır fonksiyon içine gerekli kodlar yazılır.

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.

jQuery ile eklenti yazma

Merhaba arkadaşlar uzun süreden beri kafama takılıyordu bazen sıkıntıda çıkarıyordu yazdığım javascript yada jQuery kodlarını eklenti haline getirmeyi planlıyordum yazdığım kodu kullanmak sıkıntı çıkarıyordu bende oturdum karar verdim hepsini eklenti haline getiricem dedim bunu yaparkende blog'da jQuery ile nasıl eklenti yazılır diye kısa bir özet geçeyim dedim.

Öncelikle yazdığımız yada önce yazılan eklentiler bizi kat kat hızlandırır ilk başta hemen tüm ihtimalleri düşünmek yazmak sıkıcı yada zor gelebilir ama 1 kere yaptıktan sonra gerisi kolay.

Öncelikle eklenti adımızı belirleyelim mesela degistir adında bir eklenti yapalım ve kullanıcı istediği nesneye ister renk ister genişliğini değiştirebilsin.

Hemen başlıyoruz.

$.fn.degistir = function(){

 return $(this).each(function(index, element) {

       //Eklenti ile ilgili kodlar burada yazılır

    });

}

Bu yazdığımız kalıp sabittir $.fn.degistir kırmızı ile yazan 'degistir' kısmı eklentimizin adıdır.
Mesela bir div olsun ve div seçildiğinde rengini değiştirelim.

<div id="kare"></div>

Ardından bu divde fonksiyonumuzu çalıştıralım.

$.fn.degistir = function(settings){
     
var varsayilan = {
     gorev : "renk",
     renk : "#000",
     genislik : "100px",
     zaman : 1000
 }
 
$.extend(varsayilan,settings);
 
return $(this).each(function(index, element) {
if(varsayilan.gorev == "renk") //Eger gorev renk ıse css ıle renk degıstır
{
     $(this).hide().css("background-color",varsayilan.renk).fadeIn();
}
    else //Degılse genıslık degıstır dıyoruz
{
    $(this).animate({"width":varsayilan.genislik},varsayilan.zaman);
}
});
}

$("#kare").degistir();

Şimdi div'imize eklentimizi uyguladık ama eklediğimiz 2 3 satır kod ne işe yarıcak ?
onlar bazı parametreleri kullanıcılardan almamızı sağlar mesela rengi, genişliği yada animasyonun yapılacagı sureyı ayarlamayı kullanıcıya bıraktık kullanıcı ellemez ise varsayılan deger olarak bizim yazdıgımız devreye giricek.

Not: Kod kısmında koyu renkte yazılan yerler birbirleriyle bağlantılıdır.

Fonksiyonumuzdan parametre yollamak için ise

$("#kare").degistir({gorev:"renk",renk:"#CCC"});

Şeklinde kullanabiliriz.
Demo Halini görmek için tıklayın.

jQuery animation kullanımı

Geçen yazıda jQuery ile .css() nasıl kullanılır, ne işe yarar, nerelerde kullanılır gibi yerlere değinmiştik birde örnek olarak div'imizin genişliğini ve rengini değiştirmiştik ama gel gelelim bana tabiri caizse çok odunumsu geldi bastığımız an pat diye rengi değişiyor, büyüyor yada küçülüyor.

Bunlara daha estetik bir görüntü sağlamak için, animasyonla büyüyüp küçülmesi yada renginin değişmesi için .animation() fonksiyonu kullanılır.

Hemen geçen seferki örnek üstünden devam edelim herhangi birşey değiştirmeyelim.

Html kodlarımız:

<a href="#" id="tik">Tıkla</a>

<div id="kare"></div>

jQuery kodlarımız.

<script>

    $(document).ready(function(){

  $("#tik").click(function(){

   $("#kare").animate({

    "background-color":"#000"

    },1000)

   return false;

  });

    });

</script>

şimdi jQuery kodlarımızı açıklayalım hemen, id'si tik olana tıklandığında id'si kare olanın arkaplan rengi siyah olarak değişecek.
Ee sadece tek bir özellik mi verebiliriz ? tabiki hayır aynı anda 5 10 tane özellik değiştirmek için virgül koyup istediğimiz özellik yazılır örnek vermek gerekirse.

$("#kare").animate({

 "background-color":"#000",

 "width":"200px",

 "margin-left":"50px"

},1000);

bunları öğrendik, hoş güzel ama sondaki 1000 sayısı neyi ifade ediyo ? oda animasyonumuzun ne kadar süreceğini söylüyor bize 1000 demek 1 saniye manasına geliyor ordaki değeri düşürerek yada arttırarak animasyon hızını uygun şekilde ayarlayabiliriz.

Demoyu Görmek için tıklayın.

Tabi bu fonksiyon kullanımı bu kadar mı ? tabiki hayır ama ben basit olarak anlattım, detaylarını sonraki yazılarımızda yazıcam selametle.

jQuery ile css değiştirme

Merhaba arkadaşlar bugün html nesnelerimize jquery css'lere müdahele etmeyi göstericem jquery'nin bu özelliği sayesinde direkt olarak nesnelerimizin css özelliklerini değiştirebiliriz.

Mesela bir div'imiz olsun bu div'imizin özelliklerini biz sonradan değiştirelim, Peki nasıl değiştiricez ?

jQuery bunun için bize basit bir fonksiyon hazırlamış ".css()" bu fonksiyon sayesinde istediğimiz nesnenin css özelliğini değiştirebiliriz.

Mesela

<style>
    width:100px;
    height:100px;
    background-color:#CCC;
</style>


<a href="#" id="tik">Tikla</a>

<div id="kare"></kare>

dedik ve standart bir div oluşturduk. Şimdi bu div'in özelliklerini jquery fonksiyonumuz ile değiştirelim.

<script>
    $(document).ready(function(){
		$("#tik").click(function(){
			$("#kare").css({
				"width":"200px",
				"height":"500px",
				"background-color":"#000"
				});
			})	
			
    });
</script>

Dedik ve linke tıklandığı an divimizin css özellikleri değişecektir.
Demo olarak incelemek için tıklayınız.

Peki bu özellik sadece buna mı yarar ? Tabiki hayır.
Ben belki o nesnenin istediğim css değerini öğrenmek istiyorum ve ona göre işlem yapmak istiyorum, bu fonksiyon sayesinde buda mümkün kullanımında ise hiçbir değişiklik yok sadece değer girmiyoruz aynen devam.

$("#tik").click(function(){
     var deger = $("#kare").css("width");
     alert(deger);			
})

dersek bize seçtiğimiz nesnenin css'te tanımlı genişlik değerini verecektir.
Bununda demosuna buradan ulaşabilirsiniz.

jQuery append ile appenTo Arasındaki farklar ve kullanımları

Merhaba arkadaşlar jQuery'e yeni başladığım sıralar kafama hep takılırdı append ile appendTo arasındaki farklar. Ne kadar çözmeye çalışsamda  bir türlü çözemedim taki canıma tak edene kadar.

Şimdi arkadaşlar append kullanımının kısaca türkçesi belirtilen nesneye içine yazılan yazıyı eklemek, appenTo ise belirtilen yazıyı belirtilen yere ekle manasında kullanılır.

Kısaca kodlarla açıklamak gerekirse


append:

$("head").append("<script src="jquery.js"></script>");

Append kullanmış olduk bu şekilde, peki ne oldu ? ne dedik ?
head tagları arasına <script src="jquery.js"></script> yazısını ekle dedik.

Peki appendTo ile nasıl yapıcaktık bunu ?

$("<script src="jquery.js"></script>").appendTo("head");

olarak kullanıcaktık.
Peki burda ne dedik ? <script src="jquery.js"></script> yazısını head taglarına ekle dedik.

Soru ve görüşlerinizi yorumlarda belirtirseniz memnun kalırım.

jQuery Add Class - Remove Class Kullanımı

Merhaba arkadaşlar bugün jQuery'de sık sık kullanabilceniz 2 tane fonksiyondan bahsedicem.

• addClass
• removeClass

Şimdi belki diceksiniz bunlar benim ne işime yarıcak ? kısaca şöyle açıklıyım, sayfayı hiç post etmeden direkt olarak tarayıcı üstünden nesnenize class eklemenize olanak sağlayacak böylelikle aktif olarak sayfanızda nesnelerinize css ile yapabilceğiniz herşeyi ekleyebilirsiniz.

Kullanımına gelirsek öncelikle addClass'tan başlayalım.

addClass:

<div id="baslik">ekipcalismasi.blogspot.com</div>

Css kodlarını ise şu şekilde yapalım

div
{
    background-color:#DDD;
}

standart bir div oluşturduk arkaplan rengini gri yaptık şimdi jquery ile değiştirelim bunları
bir tane buton koyalım butona tıklandımı css ile başka değişiklikler yapalım.

Öncelikle css tanımlayalım

<style type="text/css">
.kirmizi
{
 background-color:#F00;
 width:100px;
 height:100px;
}
</style>

kirmizi diye class tanımladık tıkladımı classımız eklencek arkaplan kırmızı olcak ve yükseklik genişlik değişecek.

Şimdide jquery kodlarımızı ekleyelim

<script type="text/javascript">

$(document).ready(function(e) {
    $("#css").click(function(e){
  $("#baslik").addClass("kirmizi");
  });
});

</script>

Kodumuzda dedik ki id'si css olan butona tıklandıgında id'si başlık olan nesneye kirmizi classını ekle.

Aşşağıdaki demodan inceleyebilirsiniz uygulamamızı

Demo

removeClass:

removeClass ise eklediğimiz herhangi bir classı silmemize yarayan jquery kodudur.

Kullanımı ise basittir.

<script type="text/javascript">

$(document).ready(function(e) {
    $("#css").click(function(e){
  $("#baslik").removeClass("kirmizi");
  });
});

burada ise üstte eklediğimiz classı sildik. Sorularınızı ve görüşlerinizi yorum olarak bildirirseniz memnun kalırız.

jQuery Göster - Gizle Uygulaması

jQuery web uygulamalarında işimizi kolaylaştıran, çok  kısa kodlar ile bir çok işlem yapmamızı sağlayan bir kütüphanedir.

Bugün bu kütüphanede standart bir div'i gösterip - gizlemesini anlatıcam.

Öncelikle jquery kütüphanesini sitemize ekliyoruz

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Ardından  divi oluşturuyoruz.

<div id="kutu" style="width:100px;height:100px;background-color:#000;"></div>

Div şuan gözüküyor biz bunu gizlemek için bir link tanımlıcaz ve o linke tıklanınca div kaybolcak kaybolması için ise fadeToggle fonksiyonunu kullanıcaz.

<script>

 $(document).ready(function(e) {

        $("#kapat").click(function(){

   $("#kutu").fadeToggle(500);

   });

    });

</script>

Burda id'si kapat olan linke tıklandığında sitedeki id'si kutu olan divler görünür durumda ise kapanıcak, görünmez ise açılıcaktır.


DEMO

Göster Gizle