T-İnfection sürekli takip ettiğim bloglar arasında yer alıyor. Kendi alanında çalmadan çırpmadan özgün içerikler giriyor. Özellikle CSS / XHTML konusunda mükemmel yazılar yazılıyor bu blogda. Bu yazımda da T-İnfection ' un yazısından alıntı yapacağım.
Kaynak belirttiğim için sanırım T-İnfection bu konudan rahatsızlık duymaz. Eğer rahatsızlık bildirilirse de yazıyı kaldırırım.
Açılır, kapanır jquery email uygulamasının demosu .Açılır, kapanır jquery email uygulamasının indirme adresi.Her zaman olduğu gibi öncelikle uygulamamızın Xhtml kodlarını yazarak başlıyoruz. Aşağıda yer alan kodları sayfamıza kaydedelim.
İlk adım : Öncelikle yapmanız gereken aşağıdraki kodları sayfamıza kaydederek html sayfayı oluşturmak.
XHTML kodları :
-
<div class="iletisimbuton">
-
<a href="#" class="ac">İLETİŞİM</a>
-
<a href="#" class="kapat" style="display: none">KAPAT</a>
-
</div>
-
-
-
<div id="iletisimformu">
-
<h2>İLETİŞİM FORMU </h2>
-
<form name="iletisim" method="post" action="">
-
<label>Adınız Soyadınız </label> <input type="text" name="isim" />
-
<label>E-Posta Adresiniz</label> <input type="text" name="e-posta" />
-
<label>Web Adresiniz</label> <input type="text" name="web" />
-
<label>Mesajınız</label> <textarea name="mesaj"></textarea>
-
<label></label><input type="submit" name="gonder" value="GÖNDER" />
-
-
</form>
-
</div>
İKİNCİ ADIM : CSS OLUŞTURMAK
-
.iletisimbuton {background:#81c8f4;
-
padding:6px;width:auto;
-
margin:50px 0px 0px 0px;
-
position:fixed;
-
left:0;
-
border:2px solid #6abee8;
-
}
-
-
a.ac {background:url(img/email_go.png) no-repeat;padding:0px 0px 0px 20px;color:#fff;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}
-
a.kapat {background:url(img/cross.png) no-repeat;padding:0px 0px 0px 20px;color:#1a79a8;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}
-
-
-
-
#iletisimformu {
-
width:350px;
-
background:#3ea2e1 url(img/formbg.gif) repeat-x;
-
padding:5px;
-
color:#fff;
-
border:2px solid #6abee8;
-
margin:90px 0px 0px -400px;
-
display:block;
-
position:fixed;top:0;left:0;
-
}
-
-
#iletisimformu h2 {
-
-
color:#fff;
-
font:18px/36px arial, verdana, helvetica, sans-serif;
-
padding:0px 0px 6px 6px;
-
margin:0;
-
}
-
-
-
#iletisimformu label {
-
float: left;
-
width: 100px;
-
font:12px arial, verdana, helvetica, sans-serif;
-
padding:4px;
-
clear:both;
-
margin:8px 2px 8px 2px;
-
}
-
-
#iletisimformu input{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px}
-
#iletisimformu textarea{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px;width:200px;height:100px}
-
-
#iletisimformu input:focus, #iletisimformu textarea:focus {border:2px solid #bee2f4;background:#f5f5f5}
ÜÇÜNCÜ ADIM JQUERY KODLARI OLUŞTURMAK
-
<script>
-
$(document).ready(function() {
-
$(".iletisimbuton a").click(function() { //mouse in
-
$("#iletisimformu").animate({ marginLeft: '0px' },100);
-
-
});
-
-
-
-
$("a.kapat").click(function() { //mouse in
-
$("#iletisimformu").animate({ marginLeft: '-400px' },100);
-
-
});
-
$(".iletisimbuton a").click(function () {
-
$(".iletisimbuton a").toggle();
-
});
-
});
-
-
-
</script>
ÖZET
İletişim butonun açık ve kapalı olarak değişebilmesi içinse jQuery'de Toggle olayından yararlanıyoruz. İlk tıklamadan sonra toggle olayına giren iletisimbuton sınıfı a.kapat sınıfına dönüşüyor. Kapat sınıfına yapılan tıklama tetiği ile 0px marginLeft değere gelen iletisimformu isimli id tekrar eski yerine dönüyor.