JQuery UI ile Draggable (Ders 1)

Bu bölümde JQuery UI ile nesneleri sürüklemeyi öğrendik.

Bu dersimizde JQuery UI kütüphanesine ufak bir giriş yaptık. Şu an derslerin 5 videosu hazır. Yavaş yavaş çekimlere devam ediyorum.

İsterseniz hemen ders geçelim. Öncelikle www.jqueryui.com adresi üzerinden jqueryui kütüphanesini temin ediyoruz. Daha sonra indirdiğimiz dosyanın içindeki jquery-ui.min.css ve jquery-ui.min.js dosyalarını alıp sayfamıza dahil ediyoruz ama bundan önce jquery dosyamızı çağırmamız lazım. Onun da son sürümünü http://code.jquery.com/jquery-latest.min.js adresinden indirebilirsiniz. bunları yaptıktan sonra hemen ufak bir kutu oluşturalım. Öncelikle wrapper id'sine sahip bir div oluşturalım.


<div id="wrapper"></wrapper>


daha sonra css ile buna ufak bir düzenleme yapalım.

#wrapper {width:250px; height:250px; background:#ccc;}



Bu şekilde bir düzenleme yaptıktan sonra script taglarımızı açalım ve arasına JQuery kodlarımızı yazmaya başlayalım.


$(function() {

    $("#wrapper").draggable();

})



Nesnemizi seçtikten sonra .draggable fonksiyonu ile nesnemizi sürüklenebilir bir hale getiriyoruz. İşte bu kadar basit. İsterseniz kendiniz de deneyebilirsiniz. İlerleyen derslerde burada kullanabileceğimiz ayarları göstereceğim. Lütfen takipte kalın.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git