jQuery / Ajax / JavaScript kategorisinin ikinci makalesi ile artık jQuery ye adım atıyoruz şimdiki konumuz basit ama konunun temel bilgi olması için üzerinde biraz fazla duracağım. Bundan sonraki derslerimizde jQuery ile post işlemleri gibi işlemler yapcağız, şimdiki konumuz jQuery deki slideUp() , slideDown() ve toggle() fonskiyonlarını kullanmak.
İndex.html sayfamızı hazırlıyoruz
Öncelikle tagları arasına jquery.js dosyasımızı entegre ediyoruz. ( jquery.js dosyamız js/ dizinin altındadır. )
<head> <script src=”js/jquery.js” type=”text/javascript”></script> </head>
Şimdi arkadaşlar 2 şekilde div açma ve kapatmayı yapabiliriz şimdi birinci yolu göstereceğim.
Aşağıdaki kodları <head> </head> tagları arasına yazıyoruz.
<script>
$(document).ready(function () {
$('#Menu a').click(function () {
$('#Menuiki').slideDown('medium');
});
});
</script>
Bu kodlar belki zor görünüyor gibi gelebilir ama korkmaya gerek yok arkadaşlar teker teker anlatacağım.
$(document).ready(function () { xxxxx }); = belge tamamen yüklendiğinde xxxxxxx diye belirttiğimiz fonksiyonları çalıştır.
$(‘#Menu a’).click(function () {yyyyyyyy }); =
<div id=”Menu”>
<a href=”#”>Aç</a>
</div>
Burada Menu class’ının altındaki herhangi bir <a></a> tagına tıklandığında yyyyyy işlemini gerçekleştir diyoruz.
$(‘#Menuiki’).slideDown(‘medium’); Burada ise <div class=”Menuiki”></div> Div’îni slideDown yani aşağıda doğru slayt efektiyle açıyor.
Burada slideDown yerine slideUp toggle taglarınıda kullanabilirsiniz aslında daha fazla etiket kullanabilirsiniz ama şimdilik ben bu üç fonksiyonu anlatıyorum.
Bu Birinci yoldu yani jQuery’de de belirttin xx adlı ziyaretçi şu divin içindeki şu <a></a> tagına tıklarsa şu divi aç diye belirttik.
Demo :
Şimdi ise direk biz istediğimiz <a></a> tagına değer vereceğiz. öncelikle jquery.js dosyasını <head></head> tagları arasına entegre ediyoruz.
<head> <script src="/jsjquery.js" type="text/javascript"></script> </head>
jquery.js yi entegre ettikten sonra sitemizdeki herhangi bir <a> </a> tagına gidip
<a href="#" onclick="$('#Aycan').slideDown('normal');
$('#Zone').slideDown('normal');">Divleri aç /kapat</a>
Divleri aç / kapat linkine tıkladığımız zaman #Aycan div’ini aşağı doğru açacak #Zone divini ortadan kaldıracak.
Burada slideUp fonksiyonun yerine slideUp() , slideDown() ve toggle() bu fonksiyonlarıda yazabilirsiniz.
Demo : Toggle
Umarım anlamışssınızdır, anlamadığınız kısımları konu altında belirtirseniz elimden geldiğince yardım etmeye çalışacağım bu arada artık jQuery anlatımları için bir klasör oluşturdum onu şuan veriyorum artık bütün değişiklikler orda olacak.
1.yolu boşver.değer vermek bi bu işte yarıyor. 2.yoldan devam slidedown klasik div kafası .
içeriklerinizi beğeniyle takip ediyoruz .
bir de şu blogu tam türkçe yap hacı.Submit falan olmuyor .
Aycan çok teşekkür ederim gerçekten çok güzel bir makale olmuş.
Gerçekten çok yararlı birbilgi olmuş teşekkürler hocam.
Merhabalar hocam yazdığınız herşeyi uyguladım ancak bir türlü yapamadım kodlarımı versem yardımcı olurmusunuz?
Div Kodlarım;
——————————————–
Yorum Yazar mýsýn?
Adýnýz:
E-Posta:
Yorumunuz:
———————————–
Css Kodlarım;
———————————–
#yorum-yaz {background: url(images/yorum.png); border: 1px solid #efadad; margin-top: 5px; color: #4f4f4f;}
.yorum-yaz {padding: 5px;}
.ad-soyad {background: url(images/input.png); border: 1px solid #dedede; color: #919191; padding: 3px; width: 200px;}
.eposta {background: url(images/input.png); border: 1px solid #dedede; color: #919191; padding: 3px; width: 200px;}
.yorumunuz {background: url(images/textarea.png); border: 1px solid #dedede; color: #919191; padding: 3px; font-family: Tahoma; font-size: 12px; width: 350px;}
.yorum-yaz-baslik {color: #7e2a2a; font-size: 15px; font-weight: bold; border-bottom: 1px solid #f5cece; padding: 0 0 3px 0; margin-bottom: 3px;}
.yorum-gonder {background: url(images/yorum-gonder.png); width: 90px; height: 23px; border: 0;}
/* Yazýlan Yorum */
.yazilan-yorum {border: 1px solid #a0c6da; background: url(images/yorum-bg.png); margin-top: 5px;}
.yazilan-yorum1 {padding: 5px;}
#kaplama {width:500px;float:left;}
.kutu {width:250px;height:200px;float:left;margin:0px;padding:0px;}
————————————————————-
sölediğiniz 2 yoluda denedim olmadı acaba nerde yanlış yapmış olabilirim?
Msn’den sorun çözülmüştür.
Abi teşekkürler güzel olmuşta Divleri aç /kapat
burada sanırım gözünden kaçmış ikiside slidedown vermişsin..
Kolay gelsin abi , teşekkürler tekrardan işime yaradı 
merhaba SlideUp daki gibi yukarıdan aşşağıya doğru acılma olayını toggle() yukarıdan aşşağıya doğtru acıp aşşağıdan yukarı doğru kapatma olayı varmı toggle() yada başkası acaba.
slideUp aşağıdan yukarı hareket eder ve div’i kapatır, slideDown ise yukardan aşağı doğru divi açar.
Aycan BÜLBÜL Arkadaşımıza Teşekkürler…..
Buna Benzer Daha da Basit Çalışmlarla Bizleri Aydınlatırsa Daha Memnun Kalacağımızı Düşünerek Herkese İyi Çalışmalar Dilerim.
Saygılarımla;
Yakup TAŞLIBEYAZ
Bunu yukarı doğru açılır aşağı doğru kapanır halde nasıl yapabilirim?
bu divlerle başım belada dostum ya
bide şu h1 etiketi yan yana kullanınca alt satıra geçemsini istemiyorum ama ne yazmam lazım ? çözemedim h1 tagı yan yana iki keliemye uygulayınca alt satıra geçmemesi için…
merhaba , bana facebook Sohbetteki gibi üye ismine tıklanınca açılan div ler gerekli ,hazır sayfa linki aşağıda.burdaki alt barı kullanıyorum ama üye ismine tıklanınca popup olarak açtırıp sohbet yaptırabildim ancak,faceteki gibi sistemi uyarlayamadım.bunu nasıl yapabiliriz arkadaşlar acaba,faceteki mantık nedir,sanırım .appenTo() ile yeni bir div oluşturuluyor ama sohbet yazıları nasıl o div içindeki text alana getiriliyor ve bu tablar nasıl o barda aktif olarak kalıyor her üyeye ayrı ayrı,bunun hakkında yorumlarınızı bekliyorum arkadaşlar lütfen.
mail adresime konu ile alakalı bir mail atarsanız eğer cevaplanırsa konu ,sevinirim…
saolasın kardeşim mükemmel anlatmışsın işime yaradı.
Teşekkürler çok işime yaradı
Aycan Arkadaşımızı Tebrik Ediyorum
Gerçekten Mükemmel Bir Paylaşım
Anlatım Güzel
Kodlar Sade
ve En Önemlisi
Kendi Projeme Entegre Etmekte Hiç Sıkıntı Yaşamadım Buda Aycan Arkadaşımızı jQuery konusunda Farklı Kılıyor.
İyi Çalışmalar
Yakup TAŞLIBEYAZ
Teşekkürler yakup.
bu dive ihtiyacım var ama sitemdeki diğer jquerylerle çakışıyor. msn adresimi eklerseniz yardımcı olmanızı isterim orenaksakal@hotmail.com
mail yoluyla yardımcı olmaya çalışayım
selamlar, anlatım iyi olmuş.
sayende yaptım.
kolay gelsin…
