pillinetwork hesabınızla giriş yapın.

jQuery'e İle Efektli açılan içerik, Kısa yazıp çok iş yapalım :)

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
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ı.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="header" id="b1">Twitter</div>

<div id="c1" class="content"> </div>



<div id="b2" class="header">2.new</div>

<div id="c2" class="content">

  <p class="style4">2. new </p>

  <p>İki ay kadar önce ana sayfasında bazı değişikliklere <a target="_blank" href="http://www.bildirgec.org/yazi/twitter-yeni-tasarimina-gecti">giden</a> <a target="_blank" href="http://www.bildirgec.org/ara/Twitter">Twitter</a>, şimdi de <a target="_blank" href="http://twitter.com/following">following</a>(sizin takip ettikleriniz) ve <a target="_blank" href="http://twitter.com/followers">followers</a>(sizi takip edenler) sayfalarının görünümlerinde ve işlevselliklerinde iyileştirmelere <a target="_blank" href="http://blog.twitter.com/2009/06/following-and-followers-page.html">gitti</a>.</p>

</div>



<div id="b3" class="header">3. new</div>

<div id="c3" class="content">

  <p class="style3">3. new </p>

  <p>İki ay kadar önce ana sayfasında bazı değişikliklere <a target="_blank" href="http://www.bildirgec.org/yazi/twitter-yeni-tasarimina-gecti">giden</a> <a target="_blank" href="http://www.bildirgec.org/ara/Twitter">Twitter</a>, şimdi de <a target="_blank" href="http://twitter.com/following">following</a>(sizin takip ettikleriniz) ve <a target="_blank" href="http://twitter.com/followers">followers</a>(sizi takip edenler) sayfalarının görünümlerinde ve işlevselliklerinde iyileştirmelere <a target="_blank" href="http://blog.twitter.com/2009/06/following-and-followers-page.html">gitti</a>.</p>

</div>

neyse artık jquery kodlarımıza geçelim ne kadar 4 satır da olsa :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
//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ım 

 var 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 kod

if ($("#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 hali

indirmek için tıklayın

diğer yazılarım

/* Etiketler: , , , , , , , */
/* vectro yazdı. 06 Temmuz 2009 10:12. 3 yorum var */

Yorumlar

daha sonraki işlerinizde "efektli açılan içerik" yerine "akordeon menü/içerik" gibi bir tanımlama kullanmanızı tavsiye edebilirim...

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 07 Temmuz 2009 19:41 */

efektli açılan içerik = slideToggle diğer opacity değiştirme özelliği pek bi anlam katmamış onu da toggle yapsaydın tamam derdim ama vasat bi uygulama olmuş yine de ellerine sağlık

/* http://sercanvirlan.com */
/* Sercan Virlan | 11 Temmuz 2009 09:54 */

hazır jquery eklentileri dışında hiç tek başıma uğraşmadım. javascript ve dom'a ait giriş seviyesi bilgilerim var ancak şu örnekte de karşılaştığım gibi, jquery örnekleri karmaşık, iç içe girmiş şekilde. biri birini tetikliyor, öteki öbürünü. Daha düzenli bir kod yapısı gerek. neyse.

/* Kaza yerine ulaştınız, ilk ne yapmalısınız?Peki bununla beraber ilkyardımla nasıl hayat kurtarabileceğinizi biliyor musunuz? */
/* guldemgokalp | 16 Temmuz 2009 12:43 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork