Dokuzuncu jQuery dersimizde aşağıdaki örnek uygulamayı hazırladık;
– jQuery ile Tab Uygulaması
Canlı Demo;
9. Gün – jQuery ile Tab Uygulaması
İçeriğe geç
Freelance Web Developer
Teşekkürler tayfun. Klavyene sağlık.. 🙂
Eline diline sağlık
Benim ilgim arttı.Web sitelerim artık daha hoş bir görünüm kazanmaya başladı.
teşekkürler.
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
Bunun için aşağıdaki linkten çektiğim videoyu izleyebilirsiniz;
http://www.erbilen.net/2012/08/zen-coding-eklentisi-kurulumu-ve-kullanm.html
takibe devam, ilgi düşmedi 🙂
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. 🙂
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.
Çok teşekkür ederim. İyi çalışmalar.
Anladım, o kısımda hiç bir sitile sahip olmayan, görünmez bir div oluşturduk yani 🙂
Teşekkürler ^^
tayfun ılgının dustugu yok bırader sıteyı cogu kısı bılmıyordur
Tayfun bu güzel anlatımın için teşekkür ederim..
İlgi düşmedi. Herkes derslerden çok memnun soru – sorun olmuyor o yüzden yorumlar az 🙂 Teşekkürler…
Tayfun abi, ilgi düşmedi bence. Millet videoları izleyip örnek çalışma yapmaktan yorum atmayı unutuyor. 🙂
hadi o zaman bilenler bilmeyenlere söylesin ^^ eheh.
Teşekkürler. Doktorlar tavsiye ediyor. uyumadan önce Tayfunun jquery dersin izleyin sonra uyuyun )))
İlginin düştüğü yok da teşekkür etmeye üşenen gizli takipçilerin var. :D.
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?
Hepsini yapacağız inşallah sırayla 🙂
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.
İ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.
Tayfun,
Rıza Çelik – A'dan Z'ye jQuery
kitabı hakkında ne düşünüyorsun 🙂
tayfun abi sag alta daha yeni farkeetim seni haha 😀
Sonunda beni farkeden biri 😛 😀
Eline saglik baya faydali bir uygulama cok isimize yariyacak. ilgi dusmedi aslinda sadece agzimiz acik derslere yoneldik )
derslerin devamlarını bekliyorum
eline ve ağzına sağlık 🙂 teşekkürler tayfun 🙂
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?
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.
notepad++ için ctrl + alt + enter tuşlarını kullandım fakat olmadı ayrı bir ayar yapmamız gerekiyor mu?
ctrl + e yi denebilirmisiniz, bende ctrl e ile çalışıyor.
zen coding eklentisini kurduysanız bir ayar yapmanıza gerek yok, hayır.
tayfun kardeş emeğin ve paylaşımın için teşekkürler..
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
Ç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.
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.
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.
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
Öyle bir sorun olmaması gerekir çünkü canlı demoda da aynı şekilde ve bir sorun yok gibi?
Eline emeğine sağlık üstad.
abicim herşey için çok teşekkür ederim yaaa. Allah razı olsun
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.
@Şeref Ayazgün, senin için bu şekilde bir örnek hazırladım.. Sanırım incelersen kafandaki soru işaretleri kalkmış olur;
http://codepen.io/tayfunerbilen/pen/uKHfG
Teşekkür ederim Tayfun, tamda istediğim buydu.
Ellerine ve bilgine sağlık.
İyi Çalışmalar.
ö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
@fatih keskin, hocam demek istediğinizi tam olarak anlayamadım. Biraz daha açarsanız yardımcı olmaya çalışayım size.
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.
@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 🙂
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.
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.
Evet dilediğiniz şekilde kullanabilirsiniz 🙂
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.
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.
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
içeriklerin hepsinin aynı classı olmalı. bunu kontrol edin. örnek çalışıyor yani, mutlaka gözden kaçırdığınız bir şeyler olmalı.
Teşekkürler …
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
Eline emeğine sağlık üstad.
Teşekkürler.