6. Gün – jQuery Dersi 6

Altıncı jQuery Dersimizde aşağıdakileri öğrendik;
– jQuery remove Metodu
– jQuery toggle Metodu
– jQuery slide Metodları
     * slideUp
     * slideDown
     * slideToggle

Remove Metodunun Kullanımı

$("button#btn1").click(function(){
	$("div.div1").remove();
});

Toggle Metodunun Kullanımı

$("button#btn2").click(function(){
	$("div.div2").toggle();
});

slideUp Metodunun Kullanımı

$("button#btn3").click(function(){
	$("div.div3").slideUp();
});

slideDown Metodunun Kullanımı

$("button#btn4").click(function(){
	$("div.div4").slideDown(1000); // 1snde göster
});

slideToggle Metodunun Kullanımı

$("button#btn5").click(function(){
	$("div.div5").slideToggle();
});

Yayınlayan

Tayfun Erbilen

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

“6. Gün – jQuery Dersi 6” üzerine 20 yorum

  1. Tayfun eline sağlık 🙂

    bu kısa öz videolar iyi güzel hoş, ama artık uygulama videoları çekmiyormusun. artık ne öğretiyor da ne de burada şöyle örnek uygulama tadında örnekler eklemiyorsun. öğretiyor bünyesinde ne gibi çalışmalar yapıyorsunuz. yoksa şu ogretiyor.tv için mi çekimler yapılıyor. işe girdin gireli ilk başlarda bi hızla videolar eklendi sonrasında durdu. bunun sebebi üstte belirttiğim ogretiyor.tv için olan çekimler mi? 🙂

  2. Ben fikir dükkanı'ndan ayrılalı 1 ay kadar oluyor.. Çok fazla ders çekemiyorum çünkü hayatımda birkaç şey yolunda gitmiyor.. Freelance olarak aldığım işlere vakit ayırmaktan ders çekmeye vaktim kalmıyor.. Ve tabi bir yandan da birkaç amaç uğruna geliştirmeye çalıştığım kendi projelerim var.. Hal böyle olunca işler biraz aksıyor 🙂 Bu videoları birazda jquery'i unutmamak adına çekiyorum.. Bende bilgilerimi tazelemiş oluyorum böylece.. Şimdilik bu şekilde ilerliyoruz, ilerisi için kesin birşey söyleyemem.

  3. anladım, demek öyle. sonuçta yinede boş durmuyorsun çalışıyorsun. boş vaktin yoksa tabi ki çekim yapamazsın. ben oradan ayrıldığını bilmiyordum. şu çekim hataları videosunu falan görünce bir de hergün 3 jquery dersi videosunda kitabın biri iş yerinde deyince hala oradasın ve o proje için çekimler yapıyorsunuz sandım. 🙂

    hayirlisi olsun, umarım yolunda gitmeyen şeyler istediğin şekilde yoluna girer, sende biraz ferahlarsın.

  4. İnşallah teşekkür ederim 🙂 Oradan ayrıldım ama öğretiyor'un güncellemelerini hala ben yapmaktayım.. O yüzden tam ayrıldımda denemez bir yanım fikir dükkanında 🙂

  5. Tayfun acaba bir sonraki örneğinde Jquery yardımıyla yapılan 'İçeriği görmek için facebook sayfamızı beğenmelisiniz' tarzı şeylerin nasıl yapıldığını mantık olarak ve kod olarak gösterebilir misin ?

  6. Selam Tayfun, eline sağlık 🙂

    önümüzde ki derslerde jQuery nin;

    -focusin
    -focusout
    -blur

    eventlerinden -window- elementiyle kullanımından bahsedebilirmisin. neden bunları soruyorum, extabit.com indirme sitesinde download yaparken 30 sn geri sayıyor ama sadece sayfa aktifse yani sen sayfaya bakıyorsan sayıyor. başka sayfaya bakarsan sayaç duruyor. bu durumu biraz araştırdım karşıma bu 3 event çıktı ama nasıl kullanılacağı konusunda pek birşey anlayamadım. 🙂

    jQuery ile ilgili bir soru olduğu için umarım dikkate alırsın.
    Teşekkürler Tayfun 🙂

  7. toggle yerine slideToggle kullandığımızda sayfa açılış hızında yavaşlama yada kod yoğunluğundan dolayı işlem başladığında hızda sorun olur mu?

  8. Vaaay, güzel bir şeye benziyor. Ben de merak ettim bunu. Bilgi edinirsen bize de ilet. 🙂

  9. Merhaba oncelikle cok tesekkur ediyorum eline salik.Azeri oldugum icin yazi hatalarim ola bilir.toggle a sikca tiklandigi zaman durmadan calisiyor bunu nasil duzelte biliriz?

  10. slideToggle başına stop ya da finish koyun;

    $('nesne').click(function(){
        $('digernesne').stop().slideToggle();
    });
  11. merhaba tayfun,
    tab uygulaması (9.gün) ve bu slide metod (6.gün) derslerini inceleyerek bir tab menü oluşturdum. bu tab menüde yapma istediğim şey : butona (tab) tıklama sonrası açık olan divin slideıp metodu ile kapanması ve tıklanan butonun indisine göre ilgili div in slidedown ile açılması. aslında bunu kısmen yaptım ancak tab geçişlerinde önce içerik geliyor sonra yukarı aşağı açılma animasyonu gerçekleşiyor. ben bu işlemin şu şekilde olmasını istiyoru: öncelikle açık olan div slideUp ile kapanacak ve tekrar açılırken tıklanmış olan yeni sekme slider ile açılarak görüntülenecek. umarım anlatabilmişimdir. delay() vb. birçok metod denemedim ama bir türlü yapamdım. kodlarım aşağıdaki gibi. yardımcı olabilirsen sevinirim. eminim birçok kişiye farklı yerlerde yardımcı olacaktır

    <html>
    <script>$(function(){	
    
    	$("ul#tab li:first").addClass("aktif");
    	$("div.tab_icerik").hide();
    	$("div.tab_icerik:first").show();
    
    	$("ul#tab li").click(function(){
    		var index = $(this).index();
    		$("ul#tab li").removeClass("aktif");
    		$(this).addClass("aktif");
    		$("#wrap").slideUp("slow");
    		$("div.tab_icerik").hide();
    		$("#wrap").slideDown("slow");
    		$("div.tab_icerik:eq(" + index + ")").show();
    
    		return false // adres çubuğundan diez işaretini kaldırıyoruz
    
    	});
    	
    });
    </script>
    <body>
    	<STYLE TYPE="text/css">
    		ul,li {padding: 0; margin: 0; list-style: none}
    		a {text-decoration: none}
    		.clear {clear: both;}
    		ul#tab {margin-bottom: 10px; height: 30px}
    		ul#tab li {float:left; margin-right: 5px}
    		ul#tab li a {display: block; border: 1px solid #bbb; padding: 4px 10px; color: #333; border-top-color: #e1e1e1; border-left-color: #e1e1e1}
    		ul#tab li.aktif a {background-color: #000; color:#fff; border-color: #000} 
    		/* div.tab_icerik { padding: 10px; color: #aaa; width: 600px; height: 400px; position: relative; }*/
    		div#wrap {border: 5px solid #ddd; color: #aaa; width: 600px; height: 400px; position: relative;overflow: hidden;}
    	</STYLE>
    
    <ul id="tab">
    	<li><a href="#">1. İçerik</a></li>
    	<li><a href="#">2. İçerik</a></li>
    	<li><a href="#">3. İçerik</a></li>
    </ul>
    <div id="wrap">
    <div class="clear"></div>
    <div class="tab_icerik">içerik BİR</div>
    <div class="tab_icerik">içerik İKİ</div>
    <div class="tab_icerik">içerik ÜÇ</div>
    </div> 	
    </body>
    </html>
  12. @emre batu, anladığım kadarıyla siz önce divin kapanmasını kapanma bittiğinde açılması gereken divin açılmasını istiyorsunuz.. Öncelikle şunu söyleyeyim, animasyonlarda her zaman bir complete fonksiyonu çalıştırabilirsiniz.. Şöyle düzenleyin kodlarınızı;

    $("ul#tab li").click(function(){
    	var index = $(this).index();
    	$("ul#tab li").removeClass("aktif");
    	$(this).addClass("aktif");
    	$("div.tab_icerik").slideUp(function(){
            $("div.tab_icerik:eq(" + index + ")").slideDown();
    	});
    	return false;
    });

Bir Cevap Yazın

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