} //-->
 
  //htmlfbmlkodu61.tr.gg/jQuery-ile-A%E7%26%23305%3Bl%26%23305%3Br-Kapan%26%23305%3Br-%26%23304%3Bleti%26%23351%3Bim-Formu-Alan%26%23305%3B-Yap%26%23305%3Bm%26%23305%3B.htm    
       
  YAAN MENÜ  

-Html Fbml Kodu.tr.gg-

jQuery ile Açılır Kapanır İletişim Formu Alanı Yapımı

 

1. ADIM: XHTML 
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.

<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>
 

Xhtml kodlarında ne gibi bir işlem yaptığımızı yazımızın sonunda bulabilirsiniz. Şimdi hemen örneğimize ait CSS kodlarını yazalım.

 
2. ADIM: CSS
 
 
.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}

 3. ADIM: jQUERY
Bu adımda yazdığımız kodlara göre oluşan elemanları tetikleyecek jQuery kodlarını yazıyoruz.Kaynağı gösteryazdır?

 
  <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>

 

 
Ayda 157312 ziyaretçi (370664 klik) buradaydı.!
 
         
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=