Jquery Dersleri
Akordiyon yapmak
Akordiyon
Az Evvel Bahsettiğim Gibi.Akordiyonlar Günümüzün Popüler Atraksiyonlarından.Yararları Ne? Diyecek Olursanız, Benim Gördüğüm Tek Yararı İçeriğime Daha Kısa ve Öz Bir Görünüm Katıyor.
Şimdi Akordiyonumuzun İçeriğini Hazırlayalım:
<div id="akordiyon">
<h3>HTML Nedir?</h3>
<p>Zengin Metin Isaret Dili (Ingilizce Hyper Text Markup Language, ks. HTML) günümüzde Internet üzerinde veri paylasimi için kullanilan en yaygin metin tabanli dildir.<br>http://tr.wikipedia.org/wiki/HTML</p>
<h3>JavaScript Nedir?</h3>
<p>Netscape Navigator 2.0 ile birlikte Brendan Eich tarafindan gelistirilen ve önceleri Mocha daha sonra LiveScript olarak adlandirilan ve en sonunda su anki adini alan JavaScript dili baslangiçta sadece istemci tarafli (client-side) yorumlanan (interpreted) bir dildir. Aralik 1995 tarihinde, C dilinin tarayicilara uyarlanmis hali diyebilecegimiz JavaScript piyasaya sürüldü. Web sayfalarinda dinamik içerik saglamak ya da kullaniciyla iletisim kurmak için kullanilmaktadir.Ad benzerligine karsin 'Java' ile iliskili degildir. Yaygin yanlislardan biri JavaScript'in basitlestirilmis Java olarak tanimlanmasidir. Baslangiçta yalniz Netscape tarayicilari üstünde çalisan JavaScript artik tüm yaygin ag taraycilari tarafindan desteklenmekte. Microsoft JavaScript'e benzer bir dil olan JScript'i gelistirdi. Microsoft Internet Explorer her iki dili de desteklerken standart olmayan JScript eklentileri diger tarayicilar üstünde çalismamaktadir.<br>http://tr.wikipedia.org/wiki/Javascript</p>
<h3>XML Nedir?</h3>
<p>Genisletilebilir Isaretleme Dili (Dosya:Small Orange XML Button for RSS Page.gif XML; eXtensible Markup Language), hem insanlar hem bilgi islem sistemleri tarafindan kolayca okunabilecek dokümanlar olusturmaya yarayan, W3C tarafindan tanimlanmis bir standarttir. Bu özelligi ile veri saklamanin yaninda farkli sistemler arasinda veri alisverisi yapmaya yarayan bir ara format görevi de görür. SGML'in basitlestirilmis bir alt kümesidir.<br>http://tr.wikipedia.org/wiki/XML</p>
<h3>Ajax Nedir?</h3>
<p>AJAX (Ingilizce:Asynchronous JavaScript and XML), Internet sayfalarinda JavaScript ve XMLHttpRequest kullanimi ile etkilesimli uygulamalar yaratan teknigin adidir.
Nasil okunmasi gerektigi konusunda bir genel uzlasma olmamakla birlikte çogunlukla yazildigi gibi 'ajaks' olarak okunurken, kimileri tarafindan ayni yazimli isme iye futbol takimi örnek gösterilerek 'ayaks' olarak okunmaktadir. Ingilizce'de 'ey-ceks' olarak okunur.<br>http://tr.wikipedia.org/wiki/AJAX_%28programlama%29</p>
<h3>jQuery Nedir?</h3>
<p>jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanilabilen bir framework’dür. 2006'nin Ocak ayinda bir javaScript gurusu olan John Resig tarafindan duyurulmus. Su anda ise 15 kisilik bir ekip tarafindan gelisimi sürdürülüyor. Lisans konusuna da kisaca deginmek gerekirse, MIT veya GPL lisansinin sartlarina uydugunuz sürece kendi uygulamalarinizda kullanabiliyorsunuz. Bu konuda jQuery’nin resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, egitsellere, eklentilere ve sorularinizi yazabileceginiz foruma da ulasabilirsiniz.<br>http://www.eburhan.com/jquery-dunyasina-adim-atiyoruz/</p>
</div>Akordiyonumuzu Biçimendirelim:
<style type=”text/css”>
body
{
width:500px;
margin:auto;
text-align:center;
}
#akordiyon
{
border:1px solid #CCCCCC;
border-bottom:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:25px;
text-align:left;
}
#akordiyon h3
{
background: #999999 url(ok.gif) no-repeat right -51px;
margin:0px;
padding:1px 10px;
border-bottom:1px solid #CCCCCC;
}
#akordiyon h3.active
{
background-position: right 5px;
}
#akordiyon h3:hover
{
background-color:#BCBCBC;
}
#akordiyon p
{
margin:0px;
padding:5px 10px 5px 10px;
background-color:#F9F9F9;
}
</style>
Bu Biiçimlendirmeden Sonra Sayfa Görünümü Aşağıdaki Gibi Olacaktır:
Sıra Geldi Asıl İş Olan jQuery Efektlerini Kazandırmaya.Bizim Bu Akordiyona jQuery İle Yapacaklarımız:
- Başlıklara Tıklandığında Başlıkların Altındaki Paragrafın Gösterilip/Gizlenmesi
- Başlığın İçeriğinin Gizli veya Görünür Olmasına Göre Başlığın Arkaplanındaki Ok İşaretinin (başlıkların en sağında) Yukarıyı veya Aşağıyı Göstermesi
Öncelikle jQuery Kütüphanesini Sayfaya Buyur Ediyoruz:
<script type=”text/javascript” src=”jquery.js”></script>
Ardından jQuery Komutlarını Yazacağımız Tagları açıyoruz.
<script type=”text/javascript”>
…..
</script>
Bu Tagların Arasındaki Boşluğa Komutları Girmeye Başlıyoruz:
$(document).ready(function(){
$(”#akordiyon h3:first”).addClass(”active”);
$(”#akordiyon p:not(:first)”).hide();
$(”#akordiyon h3″).click(function(){
$(this).next(”p”).slideToggle(”slow”)
.siblings(”p:visible”).slideUp(”slow”);
$(this).toggleClass(”active”);
$(this).siblings(”h3″).removeClass(”active”);
});
});
$(”#akordiyon h3:first”).addClass(”active”); Satırı İle Akordiyonumuzun İçindeki İlk Başlığa active Sınıfını Ekledik.Bu Sayede Akordiyonumuzun Bulunduğu Sayfayı Yenilediğimizde İlk Paragraf Açık Olacaktır.(Benim Örneğimde Açık Olan Kısım Html Nedir? Kısmı)
$(”#akordiyon p:not(:first)”).hide(); Satırı İle Akordiyonumuzda Bulunan 1. Paragraf Dışındaki Tüm Paragrafların Gizli Olmasını Sağladık.
Eğer Sayfa Yenilendiğinde Tüm Paragrafların Görünür Olmasını İstiyorsanız Yukarıda Açıkladığım İlk Satırı Silin ve İkinci Satırı Aşağıdaki Gibi Değiştirin:
$(”#akordiyon p”).show();
Eğer Sayfa Yenilendiğinde Tüm Paragrafların Gizli Olmasını İstiyorsanız Yukarıda Açıkladığım İlk Satırı Silin ve İkinci Satırı Aşağıdaki Şekilde Değiştirin:
$(”#akordiyon p”).hide();
$(”#akordiyon h3″).click(function(){ Satırı İle Akordiyonumuzdaki Başlıklara Tıklanması Halinde Bir Fonksiyonumuzun Harekete Geçmesini Sağlıyoruz.
(this).next(”p”).slideToggle(”slow”)
.siblings(”p:visible”).slideUp(”slow”);
$(this).toggleClass(”active”);
$(this).siblings(”h3″).removeClass(”active”); Satırları Yukarıda Bahsettiğimiz Fonksiyonun Yaptıklarıdır.Bu Satırların Yaptıklarını Kısaca Özetleyecek Olursak:
- Herhangi Bir Başlığa Tıklanılması Halinde Bu Başlıktan Hemen Sonra Gelen Paragrafın Gizlenip/Görünmesini Sağlama
- Herhangi Bir Başlığa Tıklanması Halinde Bu Başlığa active CSS Sınıfının Eklenmesini/Silinmesini Sağlama
Buraya Kadar Anlattıklarımı Eksiksiz Yerine Getirdiğinizde Akordiyonunuzu Oluşturmuş Olacaksınız.