9. Gün – jQuery ile Tab Uygulaması

Dokuzuncu jQuery dersimizde aşağıdaki örnek uygulamayı hazırladık;
– jQuery ile Tab Uygulaması

Canlı Demo;

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“9. Gün – jQuery ile Tab Uygulaması” üzerine 60 yorum

  1. Benim ilgim arttı.Web sitelerim artık daha hoş bir görünüm kazanmaya başladı.

  2. Teşekkürler üstad ellerine sağlık. Bir konuda ufak bir sorum olacaktı. Mesela dreamweaver'da otomatik olarak div yazısını hangi kısayol tuşu ile getiriyorsun? Örneğin tab_icerik divini oluştururken sanırım klavyeden bir tuş ile divi direk oluşturdun bunu nasıl yapıyorsun? Şimdiden teşekkür ederim. iyi çalışmalar

  3. Selam Tayfuni eline sağlık yine 🙂

    benim anlamadığım tek olay burada şu;

    [div class="clear"></div]

    satırının yaptığı işlem. o zamana kadar ki yazılmış tüm css leri o satırdan sonra kaldırmaya mı yarıyor.

    Bir de neden Tab divlerinin genişliğini üstteki tıklanan yerin genişliği ile bir olarak, aynı ayarlamadık. Unuttun mu yoksa özellikle mi öyle yaptık. 🙂

  4. clear: both ile bulunduğu kısma hayali bir çizgi çizdiğini varsay.. Ve geri kalan kodlar o çizginin altından devam ediyor.. Li'lere float: left uyguladığımız için hayali çizgiyi çizdik ki, içerik divleri üste çıkmasın diye 🙂

    Ve görünüme çok dikkat etmedim, maksat mantığı anlatmak.

  5. Anladım, o kısımda hiç bir sitile sahip olmayan, görünmez bir div oluşturduk yani 🙂

    Teşekkürler ^^

  6. İlgi düşmedi. Herkes derslerden çok memnun soru – sorun olmuyor o yüzden yorumlar az 🙂 Teşekkürler…

  7. Tayfun abi, ilgi düşmedi bence. Millet videoları izleyip örnek çalışma yapmaktan yorum atmayı unutuyor. 🙂

  8. Teşekkürler. Doktorlar tavsiye ediyor. uyumadan önce Tayfunun jquery dersin izleyin sonra uyuyun )))

  9. tüm derslerin mükemmel son dersine diyecek birşey bulamadım. beklediğim dersler arasında horizontal drop down menu uygulaması var. acaba bu dersi eklemeyi düşünüyor musun?

  10. Peşindeyiz tayfun kardeş :d

    Bana javascript, jquery ve css kitapları önerebilirmisin?
    Temelden ele almak istiyorum bunları.

    Teşekkür eder iyi çalışmalar dilerim.

  11. Eline saglik baya faydali bir uygulama cok isimize yariyacak. ilgi dusmedi aslinda sadece agzimiz acik derslere yoneldik )

  12. Merhaba, öncelikle çok teşekkür ederim derslerinizi izliyorum gerçek den çok yararlı oldu. Kodları yazarken kısaltmalar kullanıyorsunuz örn; ul#tab>li*3 deki gibi bunu oluşturmak için devamın da hangi tuşları kullanıyoruz?

  13. mac için (cmd + ,) win içinde ctrl ya da alt virgül olması gerek.. Bu dw için geçerli tabi, notepad++ içinse ctrl + alt + enter kullanılıyor.

  14. notepad++ için ctrl + alt + enter tuşlarını kullandım fakat olmadı ayrı bir ayar yapmamız gerekiyor mu?

  15. kardeşim teşekkurler .bi sorum olacaktı hover vediğimde diğer 2 div de acılııp kapanıyoo nasıl çözebililrim bu sorunu

  16. Çok hızlı geçiş yaptığınızda bu sorunu yaşama ihtimaliniz yüksek.. Ancak show-hide kullandığınızda böyle bir problem olmaması gerekir.

  17. Merhaba,

    Yaptığınız örnek tam da aradığım çözüm. Ancak bir şey var. Tab içeriğine örneğin video yada radyo yayını eklediğimizde diğer taba geçildiğinde önceki tabda çalan içeriğin durmasını nasıl sağlarız? Yani div içeriğinin tamamen silinmesi gerek sanırım. Yardımcı olursanız sevinirim.

  18. Hocam şöyle bir çözüm yapabilirsiniz.. Tab içeriklerini ajax ile yüklersiniz.. Mesela taba tıkladığınızda diğer içerikleri remove metodu ile kaldırıp ajax ile tıkladığınız taba göre içerik yükletebilirsiniz.

  19. Tayfun hocam burada aktif olan li'ye verdiğimiz arkaplanı addClass yönteminde yani aktif classı js kodlarıyla aynı sayfada olduğunda görmüyor bende.farklı bir css sayfası oluşturup çektiğimde ancak arkaplan olmuş oluyor.Neden aynı sayfa içinde classımı oluşturamıyorum sizce

  20. Öyle bir sorun olmaması gerekir çünkü canlı demoda da aynı şekilde ve bir sorun yok gibi?

  21. Merhaba Tayfun,

    Öncelikle emeğine sağlık. Benim için güzel ve yararlı bir örnek oldu.

    Burada ki tabları tıklamak yerine, bir tane "devam" butonumuz olsa ve bu butona bastıkça diğer tab'a geçse ve otomatik olarak tıklanmasını sağlasak. Bunu nasıl yaparız. Biraz araştırdım. .trigger() ve .next() kullanmam gerekiyor sanırım ama nasıl kullanacağımı bilemedim.

    Yardımcı olabilir misin?

    Teşekkürler.

  22. Teşekkür ederim Tayfun, tamda istediğim buydu.

    Ellerine ve bilgine sağlık.

    İyi Çalışmalar.

  23. öncelikle videon için teşekkür ederim cok güzel bir paylaşım
    benim istediğim bunu php ile while döngüsünde kullanmam
    su sekilde kullanım üst başlık bir yorum olsun devamı tıklaynca
    bu yoruma yapılan tüm yorumlar sıralansın nasıl yapabilirim şimdiden cok teşekür ederim

  24. @fatih keskin, hocam demek istediğinizi tam olarak anlayamadım. Biraz daha açarsanız yardımcı olmaya çalışayım size.

  25. merhaba,
    tab uygulaması ve benzer birçok uygulamayı jquery ui ile kolyalıkla yapabiliyoruz (aslında videodaki yöntem de gayet basit). sormak istediğim soru şu: jquery ui ile yapılan uygulamalar browser larda sorun yaratır mı? hız sorunları oluşur mu? vb.. yani jquery ile jquery ui arasındaki fark nedir.? jquery ui nin dezavantajları var mıdır?
    yaptığınız çalışmalar için teşekkürler. başarılar.

  26. @emre batu, jquery ui'yi basit bir şey için bile kullansan bir çok dosya beraberinde geliyor.. Bu kadar karmaşaya gerek yok diye düşünüyorum, çok komplike bir şey yapıyorsanız belki. Ancak sadece tab için ui kullanmak? bana pekte mantıklı gelmiyor. Hem tasarımsal anlamda estetik ve kolay olması açısından, hemde yazdığım kodları daha kolay kavrayabileceğimden ben bu yolu seçiyorum, elbette seçim tamamen kullanıcıya kalmış bir şey 🙂

  27. Teşekkürler Tayfun, JQuery'le yeni ilgilenmeye başladım, derslerin gayet keyfli olmuş, anlatımın da iyi, sadece ekran geçişlerinde biraz daha yavaş yapabilirsen daha iyi olacağını düşünüyorum.

  28. Bu uygulamayı wordpress' te tekil yazılarda kullanma imkanımız var mıdır? yani yazıyı hazırlarken bu tabların içeriklerini girip yayınladığımızda bu şekilde olacak.

    Bu işlere yeni başladığım için çok bilgim yok fakat olabilir gibi geliyor.

  29. tayfun bey anlatım super uzun zamandır aradığım bir konuydu teşekürler fakat mümkünse bir sorum olacak ben aynı sayfada ddsmooth menu bir de fancy galeri kullandım onların bulunduğu sayfaya eklemek istiyorum( jquery kutuphaneside 1.10 .2)yaptığynız uygulamayı bire bir yaptım fakat tabların içerik leri altaltta sıralanıyor $(“div.tab-icerik”).hide();
    $(“div.tab-icerik:first”).show(); bunları yazınca sizde sadece bir tab içerik görünüyor bende gene hepsi alt alta görünüyor neden olmuş olabilir yardımcı olursanız sevinirim teşekürler.

    1. Gülşah hanım, chrome’da f12 diyerek geliştirici aracını açın. Oradan console bölümüne geçin eğer bir javascript hatası varsa bunu orada görebilirsiniz. Yapamazsanız, hatayı buradan iletin bende yardımcı olmaya çalışayım. Kolay gelsin.

  30. tayfun bey sekmeler arası geçiş yapıyor background color dan anlıyorum hangisini tıklarsam onun aktif gösteriyor fakat içeriklerini göstermiyor lütfen ilgilenirseniz sevinirim

    1. içeriklerin hepsinin aynı classı olmalı. bunu kontrol edin. örnek çalışıyor yani, mutlaka gözden kaçırdığınız bir şeyler olmalı.

  31. Hocam Teşekkür ederim jquery eğitimlerini takibine yeni başladım. Daha önce php eğitimlerini izledim.
    Uzman cevapta bu konu ile soru sordum cevap bulamadım bakabilirmisin soruma aynı bu konyla ilgili. Teşekkürler.

    Link : http://uzmncvp.in/13772

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir