bildirgec.org

Mutlaka görmüşsünüzdür.Bir nesneyi istediğiniz yere taşıyabiliyorsunuz.Özellikle wordpress gibi sistemlerde bu çok yaygındır.Peki bunları nasıl yapıyorlar?
Aslında bunu yapmak Javascript için sayfalarca kod sürebilir.Ama jQuery için tek satır kod.Nasıl mı?Birlikte görelim:

Bu tekniği bize jQuery Ui sunuyor.Birkaç dosya include edicez tabi olsun o kadar.İlk önce include edeceğimiz dosyaları indirelim.
jQuery’yi indirmek için burayı
Buradan da indireceğiniz jQuery Ui özelliklerini seçerek ui.core ve ui.draggable dosyalarını indirin.

1
2
3
4
5
6
7

<script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/jquery.js"></script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.core.js"></script>
<script type="text/javscript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#box").draggable();
})
</script>

Burda “box” id’li div’e draggable yani taşınabilir özellik verdik.
Bir de bırakılabilir özellik alanlar var.Biz bunlara droppable diyeceğiz.
jQuery Ui sitesinden droppable işaretini de seçerseniz bu dosya da iner.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/jquery.js"></script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.core.js"></script>
<script type="text/javscript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/ui.draggable.js"></script>
<script type="text/javascript" src="http://arsiv.pilli.com/ui.droppable.js">
<script type="text/javascript">
$(document).ready(function(){
$("div#box").draggable();
$("div#box2").droppable({
        accept: ".block",
	activeClass: 'droppable-active',
	hoverClass: 'droppable-hover',
	drop: function(ev, ui) {
		$(this).append("Bırakıldı!");
	}

});
})
</script>

Burda da draggable nesneyi droppable nesneye taşıdığımızda veya bıraktığımızda olacakları sıralıyoruz.Yukarıdaki “droppable-active” ve “droppable-hover” class’dır.
Gördüğünüz gibi birkaç kodla oluyormuş.Artık daha dinamik sayfalar hazırlayabilirsiniz.

web sitenizde kullanabileceğiniz ya da kod geliştirirken size ilham verecek (open source) açık kaynak kodlardır.

1. lightbox 2

sayfanızdaki küçük reimlerin orjinal hallerini, kullanıcıyı başka bir sayfaya götürmeden göstermenizi sağlar. (arka planı siyah yaparak, kapatma butonu ile birlikte beyaz bordürlü bir şekilde gösterir)

2. timeline

bir zaman çizelgesi üzerinde, bölgelerin arasındaki zaman farkını göstermeye yarar.

3. reflection.js

reflection.js resimlerinize yada logolarınıza hiçbir işlem yapmadan yansıma özelliği katar.
web 2.0 sitelerde bolca görebilirsiniz, farklı bir yöntem.
(class=”reflect rheight50 ropacity33″ width=”435″) sitenizdeki her resme bu yöntemle yansıma ekleyebilirsiniz.

4. pie & donut chart

elinizdeki verileri web sitenizde veya bilgisayarınızda grafiksel olarak sunmanızı çok kolay bir şekilde sağlar.
tek yapmanız gereken şablon seçip, başlığı, veri sınıflarını ve değerlerini yazı/xml dosyasına girmek, flash arayüz+animasyon+fare işlevi+güzel tasarıma sahiptir.
sitede farklı amaçlar için tasarlanmış örnekleride mevcuttur.

5. plotr

plotr ise pie & donut chart’ın java versiyonudur. görsel açıdan güzeldir fakat tarayıcıların java destekleri bakımından problem yaratabilir.

6. ajax instant messenger

tarayıcı üzerinden anında mesajlaşma sistemidir.

7. starbox

rating sistemidir, basit ve güzel bir görünüme sahiptir. sitenize farklı türlerde oylama özelliği ekleyebilirsiniz.

8. ajax tabs content

farklı amaçlar için kullanabilceğiniz sekmeli içerik gösterimi sağlayan bir java scripttir. burda tavsiye etmiştim.

9. drag and drop shopping

sürükle bırak tekniğine bir örnek:) sayfalarınızdaki resimlerin veya diğer içeriğin sürüklenip bırakılmasını sağlamak için kullanabilirsiniz.

10. progress bar

yükleniyor…… olayını görselleştirmek için güzel bir örnektir. 4 farklı tasarımda örnek mevcuttur dilerseniz kendi tasarımınızı geliştirebilirsiniz.
sayfadaki icon’lara tıklayarak test edebilirsiniz.

11. thick box

tab content’in biraz daha gelişmiş versiyonudur, sekmelerde resimler veya kaynak kodlar göstermenizide sağlar.

12. create flickr like fields

üyelik sistemi olan web sitelerinde üyelerin profil bilgilerini güncellemelerini daha görsel ve aynı sayfada yapmalarını sağlamak için geliştirilmiş bir kod. burda flickr örnek verilmiş.

13. jtip – a jquery tool tip

jquery için güzel bir ajax örneğidir. demo sayfasından test edebilirsiniz.

14. accordian

sayfalarında kod vb. içerik yada detaylı anlatım yayımlayan arkadaşlar için güzel bir okordiyon örneğidir. seri çalışır.

15. unobtrusive ajax star rating bar

oylama barı’dır (rating bar) sitenize eklemek için kılavuz mevcuttur. kullandığınız cms sistemi için böyle bir eklenti mevcut değilse yahut cms geliştiriyorsanız kullanabileceğiniz bir scripttir.

aşağıdakileride açıklarsam destan olur heralde, bundan sonrasını size bırakıyorum. faydalı olması dileğiyle.
devamı: