bildirgec.org

Merhabalar yine bir jquery dökümanı ile burdayım, her ne kadar kısa olsa da jQuery’ye başlamayaı düşünenler, gözü korkanlar, yada ufakdan bişeyler denemek isteyenler için faydalı bir yazı olacak.Bu yazıda gerçekten jquery felsefesine çok güzel uyan bir örnek yapacağız.The Write Less, Do More deyip başlıyoruz. klasik açılıp kapanan içerik yapacağız bunun bir çok örneği var ama 4 satırlık kod için niye hazır kullanalım ki 🙂 ben de bu kadar kolay olacağını beklemezdim açıkcası.neyse bir içerik bir de head sınıfımız var. 3 tane div ile bir örnek deneyecğiz.sınıflarımız burada.body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 9px;color: #333333;}.header{width:530px;padding:5px;height:20px;cursor:pointer;font-size:12px;font-weight:bold;border:1px solid #CCCCCC;background-color:#FFFFCC;background:url(pop_02.jpg);}.content{width:500px;padding:20px 20px 20px 20px;height:150px;display:none;border:1px solid #CCCCCC;background-color:#FFFFCC;background:#E4EEF1;}
div yapısında başlıklara sırayla b1,c1 şeklinde olacak alttaki yapıyı kurabilirsiniz. oldukça basit bir yapı.

neyse artık jquery kodlarımıza geçelim ne kadar 4 satır da olsa 🙂//klasik ready fuction ile dökümanın yüklenmesini kontrol edelim.$(document).ready(function(){// nokta.sinif adı selectoru ile header sınıfımıza hover, mouse out ve click atıyoruz.$(“.header”).hover(function () {//basşlıkların üstüne geldiğimizde opacity efekti verleim.$(this).animate({opacity: “0.5”});},function(){//this ile hangi başlığın üstünden çekilirsek opacitsini sıfırlayalım$(this).animate({opacity: “1”});}).click(function(){//ve tıklandığında hangi başlığa tıkladık onu bulalımvar ad= $(this).attr(“id”).replace(“b”,””);//slideup ile tüm açık içerikleri kapatalım.//# işareti ile idsi c + ad olan yani tıkladığımız divin hemen altındaki içeriği açalaım//ben açmak için slidetoggle kullandım ama ters slashları kaldırıp hide ve toogle ile değişik etki elde edebilirsiniz.//$(“.content”).hide(“slow”);$(“.content”).slideUp(“slow”);//aynı başlığa basıldıysa tekrar açmamak için sadece kutu kapalıysa açan kodif ($(“#c”+ad).css(“display”)==’none’) $(“#c”+ad).slideToggle(“slow”);//$(“#c”+ad).toggle(“slow”);});});
evet aslında bu kadar. 🙂 kısa oldu ama bende öğredikçe paylaşıyorum. gerçekten jQuery çok keyifli. isteyen örneği geliştirebilir.uygulamanın çalışır haliindirmek için tıklayındiğer yazılarım