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

jQuery ile tab uygulaması geliştirmek

Bu yazımda sizlere bir tab uygulamasının nasıl geliştirileceğini anlatacağım. Bu uygulamayı aslında web sitem için geliştirmiştim ve acemice yanları olabilir fakat bunu daha sonra biraz daha geliştirerek cstabs ismini verdiğim bir uygulamaya dönüştürdüm. İsteyen buraya tıklayarak bu uygulama ulaşabilir.

Not: Başlangıçdada yazdığım gibi acemice yanları olabilir istediğiniz yönde geliştirmek size ait.

Öncelikle divlerden oluşmuş html tasarımımızı yapıyoruz;

1
2
3
4
5
6
7
8
 
<body onload="kapat();">



	<a onclick="tab1();">Tab1</a> | <a onclick="tab2();">Tab2</a> | <a onclick="tab3();">Tab3</a>

	<div id="tab1">Tab 1 denemesi</div>

	<div id="tab2">Tab 2 denemesi</div>

	<div id="tab3">Tab 3 denemesi</div>



</body>

Gördüğünüz gibi 3 div ve onları aktif eden 3 adette a html etiketi var.
Aşağıda gördüğünüz kodu genel olarak incelersek mantık aslında çok basit. Örneğin tab2 yi açmak isteyelim o zaman ne yapmamız gerekli? tab1 ve tab3 kimlikli divleri kapamamız gerekli. Gördüğünüz gibi bizde tab2() isimli fonksiyonda bunu yaptık. Bir tanede kapat() isimli bir fonksiyon var bunuda başlangıçda tab2 ve tab3 ü kapamak için kullandık. Tablarınız arttıkça oradaki fonksiyonlar ve tab isimleride artacaktır.

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
 
function kapat()

{

$("#tab2").hide("slow");

$("#tab3").hide("slow");

}

function tab1()

{

$("#tab1").show("slow");

$("#tab2").hide("slow");

$("#tab3").hide("slow");

}



function tab2()

{

$("#tab1").hide("slow");

$("#tab2").show("slow");

$("#tab3").hide("slow");

}



function tab3()

{

$("#tab1").hide("slow");

$("#tab2").hide("slow");

$("#tab3").show("slow");

}

Genel olarak mantık bu şekilde daha fazlası için buraya bakabilirsiniz. Uygulamanın son halini indirmek için tıklayın.

/* Etiketler: , , , , , */
/* Fornox yazdı. 28 Temmuz 2009 02:48. 3 yorum var */

Yorumlar

Çok hoş olmuş, tebrikler.

/* nskmr | 21 Ağustos 2009 11:26 */

affınıza sığınarak başka deyimde bulamadım bu biraz amelece olmuş sanki
http://www.r10.net/1059258926-post6.html
burada daha güzel yazmıştım sanki..

fark var ? Ney !
Şunlar :
1- sürekli diğer divleri hide oldukları halde hide edip performans kaybına sebep olmuyor.
2- yeni bir tab ekleyecek olsan ohoo kurban gelir o zamana
sonuç : teknik olarak en sevdiğim şeylerden temp ile son show olan id yi temp e alıp daha sonra onu hide edip yeni show ettiğimiz şeyi temp e atamak işi daha kıssadan çözmeye yardımcı oluyore....

/* saho10 | 22 Ağustos 2009 23:36 */

İhtiyaç oldu, şöyle bir şeyler karaladım.
< li>< a href="#tabSAYI" class="tetik">....< /a>< /li> şeklinde tetikleyiciler (tablar) ,
< div id="tabSAYI">...< /div> şeklinde sekme içerikleri çoğaltılabilir.
CSS kurcalanarak daha da güzel hale getirilebilir.

/* umutkeskin | 07 Ocak 2010 22:50 */

ü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