Jquery ile Sürüklenebilir Nesne Yaratma – Draggable

Bu yazımda jquery ile hareket edebilen nesneler yaratmayı ve bu nesneleri nasıl kontrol edebileceğimizi anlatmaya çalışacağım.

Öncelikle bu işlem için gerekli kütüphaneleri sırasıyla sayfamıza entegre etmemiz gerekiyor.

<script src="jquery-1.6.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>

Jquery UI Kütüphanesi

Daha önceki yazılarımda jquery nin temellerinden bahsetmeye çalıştım. Seçicileri, olayları, niteleyicileri, css işlemlerini vs. yazarak jquery hakkında temel seviyede toplu bir döküman oluşturmaya çalıştım.

Artık temelden orta seviyeye adım atıyorum. Tam bu noktada sizlere Jquery UI adlı siteyi tanıtmadan yapamayacağım. Bu site jquery geliştiricileri için bir kullanıcı arayüzü görevi görüyor. İşin detayına biraz inelim.

Jquery yi daha efektif ve basit bir şekilde kullanabilmek için geliştirilmiş kütüphaneler ve fonksiyonlar bulunmaktadır. Bu kütüphanaler Jquery UI adı altında toplanmıştır.

Jquery ve Efekt Fonksiyonları

Jquery denince akla ilk gelen olgulardan biri de sanırım efektlerdir. Bu yazıda jquery ve efekt fonksiyonlarını yazmaya çalışacağım.

Efekt fonksiyonları Jquery’nin resmi sitesinde 4 gruba ayrılarak anlatılmış, bende o şekilde anlatmayı düşünüyorum. Gruplandırmaya bir göz atalım ;

  • Temel (Basic) Efekt Fonksiyonları
  • Karartma (Fading) Fonksiyonlar
  • Slayt (Slide) Fonksiyonları
  • Özel (Custom) Efekt Fonksiyonları

Jquery ve Olaylar

Bir sayfada gezerken gerçekleştirdiğiniz olaylar vardır. Herhangi bir linke, butona vs. tıklamanız, bir resmin üzerine gelmeniz, bir formu göndermeniz, gerçekleştirdiğiniz olaylara birkaç örnektir. Bu yazıda jquery deki olayları incelemeye çalışacağız.

Öncelikle genel olarak en çok kullanılan olayları (daha doğrusu  olay yardımcılarını) açıklayalım. Daha sonra olay işleme fonksiyonları dediğimiz fonksiyonlara bir göz atalım, ardından da belki de en güzel olay fonksiyonları olan hover ve toggle fonksiyonlarını inceleyelim.

Arama
RSS
Beni yukari isinla