jQuery ile Çok Basit ve Esnek bir Tab Yapısı
Yazar: Volkan Görgülü | Yayın Tarihi:
08 Ekim 2009 | Yorumlar:
52 Yorum
Kategori: jQuery
Herkese merhaba, yeni yayın döneminin, ikinci videolu anlatımı, jQuery ile Çok Basit ve Esnek bir Tab Yapısına hoşgeldiniz.
Bu videolu anlatımda, jQuery’nin index alma özelliğini kullanarak çok basit ama bir o kadarda esnek bir tab yapısı geliştiriyoruz.
Arkadaşlar son bir kaç haftadır, kendimi jQuery konusunda, hızlı bir şekilde geliştirmekteyim ve size jQuery kodu geliştirmenin ne kadar zevkli ve kolay olduğunu anlatamam.
Umarım faydalı bir videolu anlatım olmuştur. Düşüncelerinizi yorum bölümü aracılığı ile paylaşırsanız çok mutlu olurum.
Güncellemeler
javascript:void(0) ve noktalı virgülleri eklemek – 12.10.2009
Arkadaşlar a etiketlerinde
href="#"
aşağıdaki güncellemeyi yaptım.
href="javascript:void(0)"
Bu güncellemeyi yapmadan evvel herhangi bir sekmeye tıkladığınızda url’in sonuna # işareti koyuyordu yani aslında sayfada # işaretli bir anchor linke gitmeye çalışıyordu. Ama ben eklediğim kod ile a etiketine href değeri ile hiçbirşey yapmamasını söylüyorum.
Ayrıca işlemlerin sonlarına noktalı virgül ekledim. Noktalı virgüller yokken de sorunsuz çalışıyordu ancak noktalı virgülleri eklememeyi tembellik olarak değerlendirebiliriz. Çünkü yarın olurda kodlarınızı sıkıştırmanız gerekirse sıkıştırma uygulamaları bu noktalı virgülleri dikkate alıyorlar.
Başka bir paylaşımımı inceleyebilirsiniz
Düşüncelerinizi duymaya ihtiyacım var!
Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.
Yazıya Gelen Yorumlar
1
ofc
08 Ekim 2009´de söylemiş
Başta karmaşık gibi gelsede güzel anlatımınla gayet açıklayıcı bir video olmuş . Teşekkürler Volkan
2
Volkan Görgülü
08 Ekim 2009´de söylemiş
Ben teşekkür ederim, kolay gelsin.
3
delivar
08 Ekim 2009´de söylemiş
ilk başta futbol derbisi kıvamında bir anlatımla karşılaşınca şaşırdım =) samimi, anlaşılabilir ve yararli paylaşımın* için teşekkürler.
4
Volkan Görgülü
08 Ekim 2009´de söylemiş
@delivar, çok teşekkürler.
5
Adem
08 Ekim 2009´de söylemiş
Çok güzel bir videolu anlatım paylaşımı olmuş. Kesinlikle devamını bekliyoruz videoların. Takipteyiz…
6
Salih Gedik
08 Ekim 2009´de söylemiş
jQuery konusunda bilgi vermen çok güzel olmuş. Her seviyede kişi için yararlı olabilir ve yeni fikirler konusunda yol gösterebilir
7
joyologo
08 Ekim 2009´de söylemiş
çok güzel bir ders, derste paylaştığınız kaynak da hoşuma gitti. teşekkürler..
8
cemal
08 Ekim 2009´de söylemiş
teşekkürler volkan
9
Volkan Görgülü
08 Ekim 2009´de söylemiş
Ben teşekkür ederim arkadaşlar, faydalı oldu ise ne mutlu bana.
10
Berker Ünlüer
09 Ekim 2009´de söylemiş
Volkan abi,
Bu paylaşımdan dolayı gerçekten çok büyük bir teşekkür borçluyum. Ajax ve jQuery konusunda eksik kalmamın daima sorununu yaşıyorum ve şuanda yürütmeye başlamak üzere olduğumuz proje de kendimce “Büyük Eksik” olarak nitelendirdiğim ve bir çok denemede bulunup yapamadığım “Manşet” görünümünü sadece “.click” yerine “.hover” yazıp bir kaç ufak değişiklik ve ekleme ile elde ettim.
Değerli paylaşımlara devam…
Bu belki Volkan Görgülü için küçük bir paylaşım olabilir fakat benim için gerçekten büyük bir yararı oldu.
11
Yiğit Özdamar
09 Ekim 2009´de söylemiş
Umarım jQuery paylaşımların son bulmaz. Türk internet standartlarına göre çok ileride olan bir paylaşım. Buarada yeni blog’un hayırlı olsun, yeni farkettim. Umarım yakında daha fazla zaman bulabilir, daha çok paylaşımda bulunabilirsin. Teşekkürler.
12
Yiğit Özdamar
09 Ekim 2009´de söylemiş
Buarada eklemeyi unuttum.
Show ve hide komutu yerine slideUp, slideDown gibi komutlar vererek görsel anlamda daha güzel sonuçlar elde edebilirler.
13
Volkan Görgülü
09 Ekim 2009´de söylemiş
@Berker, faydam dokundu ise ne mutlu bana.
@Yiğit, bu benim aslında yeni blogum değil, ben ilk başlangıçtada WebDeneyimleri.com altında yayın yapıyordum. Animasyonlara henüz giriş yapmadım, onlarada giriş yapayım paylaşırım
14
Film izle
09 Ekim 2009´de söylemiş
eline sağlık hocam çok başarılı bir video olmuş
15
Senol Coskun
09 Ekim 2009´de söylemiş
jQuery Magic
16
Serdar KUZUCU
09 Ekim 2009´de söylemiş
Uzun zamandır takip edemiyorum üni. de başladı. Böyle ara sıra gelip bakabiliyorum.
Ama çok tatlı bir uygulama olmuş beğendiğimi söylemeliyim
Yeni yayın dönemin sana ve bize hayırlı olsun
17
fFatih
09 Ekim 2009´de söylemiş
JQuery’yi senin sade ve samimi anlatımınla öğrenmek büyük bir keyif
. Emeğine sağlık Volkan kardeş.
18
zafer zent
12 Ekim 2009´de söylemiş
paylaşım ve anlatım için teşekkürler…
19
Burak
19 Ekim 2009´de söylemiş
@Volkan Görgülü , hocam jquery paylaşımlarına ara vermeden devam etmen dileği ile. Gerçekten jquery paylaşımları hem ilgi çekici , hem daha önce yapanı görmedim. Sen bunu da yap , jquery videolu anlatımlarını daha fazla görelim.
Bu arada eburhanda da jquery ile ilgili bir sürü döküman var , fakat videolu anlatım olarak senden bekliyoruz.
20
Volkan Görgülü
20 Ekim 2009´de söylemiş
Merhaba Burak, jQuery ile ilgili güzel videolu anlatımlar yayınlamyı planlıyorum ama önce halletmem gereken bir kaç problemim var.
21
SEFA AYDIN
01 Kasım 2009´de söylemiş
Merhaba volkan;
abi senin sayende büyük bir yükten kurtulmuş oldum. Böylesine güzel bir anlatım bulamadım net aleminde. ama benzersiz video serisi vardı. onları yayınlasan çok daha güzel olur.. =) Ellerine sağlık bu arada.
takipteyim.. =)
22
Volkan Görgülü
02 Kasım 2009´de söylemiş
Çok teşekkürler, arşivi yayına alacağım ilk müsait olduğum zaman diliminde.
23
Barış Zümrütçü
05 Kasım 2009´de söylemiş
Bu kadar basit olduğunu hiç düşünmemiştim, paylaşım için çok teşekkürler.
24
hamza altunsoy
06 Kasım 2009´de söylemiş
jquery çok kullanışlı ve değiştirilebilir çözümler sunuyor gerçekten,,
örnek basit bir çalışmam
http://erenyapi.net/slideshow/dekoratif%20ayna.html
25
Haktan
07 Kasım 2009´de söylemiş
Hocam öncelikle çok teşşekkür ederim paylaşım için gayet faydalı olmuş fakat bir de seçili olan tab li a değerinde cursor pointer olmaktan çıksa daha bi hoş olacak, css ile bunu yaptım ben eminim gözden kaçırmışsındır. Çalışmalarının devamını dilerim.
26
Volkan Görgülü
09 Kasım 2009´de söylemiş
Merhaba Haktan, söylediğin mantıklı evet, ilk fırsatta bende kodu güncelliyeceğim.
27
Haktan
11 Kasım 2009´de söylemiş
Güncellendi mi bilmiyorum ama belki aktif tabdaki cursorun pointer şeklinde olmasını engellemek isteyen ve yapamayan arkadaşlar olursa:
#tabs li a.active {
background-image:url(../_i/bgr_active.png);
border:1px solid #499eb3
cursor: default;
}
yukarıdaki classa “cursor:default” satırını eklemeleri yeterli olacaktır.Volkan, çalışmalarının devamını diliyor ve bekliyorum.
28
Volkan Görgülü
11 Kasım 2009´de söylemiş
Teşekkürler Haktan
29
Kaan Gökçe
08 Aralık 2009´de söylemiş
Volkan yazın için öncelikle teşekkür ediyorum ayrıca anlatım ve video içinde teşekkür ediyorum bu arada eklemek istiyorum jQuery dünyasında diyerek başlarsak daha doğru olur gibi geliyor geçenlerde erhan çek bırak özelliğini yayınlamıştı gerçekten jQuery ile çok güzel şeyler ortaya çıkıyor aynı şekilde hazırladığın tabler fazla söze gerek yok son olarak videoda çok heyecanlıydın galiba :=) Görüşmek üzere.
30
Fehmi
20 Aralık 2009´de söylemiş
Kullanışlı bir yapı volkan bey teşekkür ederim.
Bir sorum olacak:
Bununla yapacağım bir çalışmayı sitede ortalamak istiyorum fakat body etiketine eklediğim kod işe yaramıyor,yazılar ortalanıyor.CSS kodunda hangi satıra hangi kodu eklersem sitede ortalanmış şekilde gözükür ?
Teşekkürler tekrardan,iyi çalışmalar.
31
Volkan Görgülü
20 Aralık 2009´de söylemiş
Merhaba, çalışmam faydalı oldu ise ne mutlu bana. İçeriği ortalamak çok kolay, örneğin “ortala” id sine sahip bir div olsun sayfanızda body etiketinden hemen sonra.
Ve bu div’e içeriğinizin genişliğini ve margin:0 auto kodunu ekleyin yani
#ortala {width:900px;margin:0 auto}
32
Adem ilter
22 Aralık 2009´de söylemiş
tek kelimeyle harika. çok teşekkürler video için.
33
Tayfun Erbilen
26 Aralık 2009´de söylemiş
Allah razı olsun volkan abi, çok sade ve anlaşılır bir anlatım olmuş
Sayende jquery tab yapımınıda öğrenmiş olduk.
34
Mehmet Ozan Baysal
04 Ocak 2010´de söylemiş
Öncelikle Teşekkür ederim dersi izlemeye çok fazla vaktim olmadı fakat ben örneği direk uygulamaya geçtim. Ancak şöyle bir sorunla karşılaştım.
Site lightbox kullanıyorum ve jquery-1.2.2.pack.js adlı dosyayı çekince lightbox devre dışı kalıyor. Bunu nasıl çözebilirim acaba ?
Kolay Gelsin
35
deniz
06 Ocak 2010´de söylemiş
Çok teşekkürler çok yararlı bir paylaşım
Sizden farklı olarak bir derste ben istesem acaba hazırlarmısınız:
960 gird sistem diye bir olay var bu konu hakkında sadece yabancı kaynaklar var ama ayrıntılı ve uygulamalı bir video ders yok, rica etsem böyle bir ders hazırlamnız mümkünmü, şimdiden teşekkürler.
36
Muharrem ERİN
15 Ocak 2010´de söylemiş
href=”#” şeklinde oluşturduğunuz bağlantıların click eventına return false; eklerseniz adres satırına # işaretini eklemez. Yani her tabın href değerini javascript:void(0); şeklinde vermenize gerek yok
$("#tabs li a").click(function(){
var indexTabLink = $("#tabs li a").index(this);
$(".contentBox").hide().eq(indexTabLink).show();
$("#tabs li a").removeClass("active").eq(indexTabLink).addClass("active");
return false;
});
Makale ve örnek için teşekkürler, iyi çalışmalar…
37
Deniz
22 Ocak 2010´de söylemiş
Harika bir ders çok yararlı ama yeni dersler bekliyoruz sizden, uzun zamandır ders gelmedi sizden
Şimdiden teşekkürler.
38
Mehmet Çağatay
26 Ocak 2010´de söylemiş
Paylaşımınız için teşekkür ederim.
Size bir sorum olcak sayın abim. Sayfa ilk açıldığında gördüğüm kadarıyla ilk TAB açılıyor. Ben birinci değil de 2.tabın açılmasını istiyorum. Bu durumda nasıl bir değişiklik yapılması gerekiyor kodlarda, ya da bu yapılabilir mi..
39
Şükrü
01 Şubat 2010´de söylemiş
Volkan özlettin kendini. Yıl oldu yıl ders yapmadın hala. Evlilik bozdu seni abicim.
40
murat
12 Şubat 2010´de söylemiş
Video için teşekkürler.Peki orada kullandığınız Jquery Selectors dökümanını nereden indirebiliriz? Link verebilirseniz çok güzel olur…
41
mcakir
12 Şubat 2010´de söylemiş
bu güzel anlatımın sonrasında “SLİDER” yapımını da anlatabilirseniz sevinirim.
paylaşım için teşekkürler…
42
Ali
16 Mart 2010´de söylemiş
teşekkürler örnek çok güzel
43
Burak
02 Nisan 2010´de söylemiş
JQuery’nin ilk mantığını bu derste öğrendim az önce
Teşekkür ederim çok başarılı bir ders olmuş 
44
ekrem
07 Nisan 2010´de söylemiş
Güzel Ders
ie 8 de ilk tab boş olarak açılıyo taba tıklamak gerekiyo açılması için bunun bi çözümü varmı?
Teşekkürler
45
f'aint ~
20 Nisan 2010´de söylemiş
Teşekkürler süper olmuş
. Allah razı oLsun 
46
Rıdvan
30 Mayıs 2010´de söylemiş
Keşke devam etseniz
47
Ceyhun Artan
31 Mayıs 2010´de söylemiş
Teşekkürler Paylaşım İçin.
48
kemsay
11 Haziran 2010´de söylemiş
Teşekkürler çok güzel bir paylaşım olmuş farklı mantıklarda da kullanıla bilinir diye düşünüyorum ..
49
Fatih YILMAZ
17 Haziran 2010´de söylemiş
Güzel içten anlatım..
Teşekkürler.
Geri İzlemeler