Bir önceki yazımda haftasonu jQuery ile Twitter Alanı oluşturmayı anlatacağım demiştim ve bunu haftasonuna bırakmadım ve bugün anlattım o dersi.Yaptığım sistem çok basit bir mantıkla iş yapıyor.Bunları videoda adım adım anlattım fakat burada da adım adım anlatmayı istiyorum.
1.Adım Alanları Oluşturma
Biz bu alanları oluştururken öncelikle kendimize bir düzen belirlemeliyiz ve işe ardından başlamalıyız.Ben kendi düzenimi oluşturdum ve kodlarımı ekledim.
Bak bakalım nevar?
Kapat İstersen artık!!
Bunun CSS düzenlemesini ise bu şekilde yapabiliriz.
.tw_alani {background-color: #323232; padding: 8px 0; overflow: auto;}
.tw_alani figure{float: left; padding: 5px;}
.tw_alani figure img {width: 110px; height: 20px;}
.tw_alani p {color: #fff; font: 12px Tahoma; margin: 8px 10px 3px 0;}
.ac {background-color: #323232; padding: 10px; float: right; color: #fff; font: 12px Tahoma;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
.kapat {background-color: #323232; padding: 10px; float: right; color: #fff; font: 12px Tahoma;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}2.Adım jQuery kodlarımızı girerek alanı dinamikleştirme
Bu alanımız şuan için dinamik bir görünme sahip değil.Biz bu alanı dinamikleştirmek için öncelikle sayfamızda jQuery’nin ana dosyasını çağırmamız gerekli.Bunun için 2 yöntem var.Birincisi jQuery.com’a girerek oradan çağırmak ikincisi ise Googleapis üzerinden çağırmak.Google Sunucuları daha hızlı olduğundan dolayı ben Google üzerinden çağırıyorum.
Bu jQuery.com üzerinden gelen dosya
<script></script>Buda Googleapis üzerinden gelen dosya
<script></script>Bu adımıda tamamladıktan sonra kendi yazmamız gereken kodları ekliyoruz.
<script>
$(document).ready(function () {
$(".tw_alani").hide();
$(".kapat").hide();
$(".ackapa").click(function(){
$(".acil").toggle(ac, kapat);
});
function ac(){
$(".tw_alani").slideDown(700);
$(".ac").hide();
$(".kapat").show();
$("header").css("height","270");
}
function kapat(){
$(".tw_alani").slideUp(700);
$(".ac").show();
$(".kapat").hide();
$("header").css("height","190");
}
});
</script>Tüm işlem bu kadar.Artık bizimde bir jQuery’li alanımız var.Bu çalışmanın Demosuna ve İndirme linkine aşağıdaki adresten ulaşabilirsiniz.
Ayrıca bu yazımdan sonra sitemde yeni yeni kategorilere yer vermeye karar verdim.Yavaş Yavaş HTML5 ve CSS3 makaleleri yayınlayacağım.
Bu videoda da bu işlemi gerçekleştirmeyi anlattım.
Yazar: Eren Keskin
Kategori: jQuery
Web Adresi: ErenKeskin.com
