BLOG

9. Gün - jQuery ile Tab Uygulaması

Tayfun Erbilen ekledi. 17 Ağustos 2012 Cuma

Dokuzuncu jQuery dersimizde aşağıdaki örnek uygulamayı hazırladık;

- jQuery ile Tab Uygulaması



Canlı Demo;




Gözat

38 yorum

  1. Teşekkürler tayfun. Klavyene sağlık.. :)

    YanıtlaSil
  2. Eline diline sağlık

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

    YanıtlaSil
  4. 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

    YanıtlaSil
  5. takibe devam, ilgi düşmedi :)

    YanıtlaSil
  6. 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. :)

    YanıtlaSil
    Yanıtlar
    1. 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.

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

      Teşekkürler ^^

      Sil
  7. tayfun ılgının dustugu yok bırader sıteyı cogu kısı bılmıyordur

    YanıtlaSil
    Yanıtlar
    1. hadi o zaman bilenler bilmeyenlere söylesin ^^ eheh.

      Sil
  8. Tayfun bu güzel anlatımın için teşekkür ederim..

    YanıtlaSil
  9. İlgi düşmedi. Herkes derslerden çok memnun soru - sorun olmuyor o yüzden yorumlar az :) Teşekkürler...

    YanıtlaSil
  10. Tayfun abi, ilgi düşmedi bence. Millet videoları izleyip örnek çalışma yapmaktan yorum atmayı unutuyor. :)

    YanıtlaSil
  11. Teşekkürler. Doktorlar tavsiye ediyor. uyumadan önce Tayfunun jquery dersin izleyin sonra uyuyun )))

    YanıtlaSil
  12. İlginin düştüğü yok da teşekkür etmeye üşenen gizli takipçilerin var. :D.

    YanıtlaSil
  13. 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?

    YanıtlaSil
  14. 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.

    YanıtlaSil
    Yanıtlar
    1. İlk jquery konusunda kitapları gösterip önermiştim..
      http://www.erbilen.net/2012/08/her-gun-3-yeni-jquery-dersi.html

      Css için ise kitap almak yerine fatih hayrioğlu'nun e-kitabını okumanızı tavsiye ederim.

      Sil
    2. Tayfun,

      Rıza Çelik - A'dan Z'ye jQuery

      kitabı hakkında ne düşünüyorsun :)

      Sil
  15. tayfun abi sag alta daha yeni farkeetim seni haha :D

    YanıtlaSil
  16. Eline saglik baya faydali bir uygulama cok isimize yariyacak. ilgi dusmedi aslinda sadece agzimiz acik derslere yoneldik )

    YanıtlaSil
  17. derslerin devamlarını bekliyorum

    YanıtlaSil
  18. eline ve ağzına sağlık :) teşekkürler tayfun :)

    YanıtlaSil
  19. 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?

    YanıtlaSil
    Yanıtlar
    1. 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.

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

    YanıtlaSil
    Yanıtlar
    1. zen coding eklentisini kurduysanız bir ayar yapmanıza gerek yok, hayır.

      Sil
  21. tayfun kardeş emeğin ve paylaşımın için teşekkürler..

    YanıtlaSil
  22. 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

    YanıtlaSil
    Yanıtlar
    1. Ç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.

      Sil
  23. 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.

    YanıtlaSil
    Yanıtlar
    1. 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.

      Sil
  24. 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

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

      Sil

HAKKIMDA

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