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.
01 |
<div class="iletisimbuton"> |
02 |
<a href="#" class="ac">İLETİŞİM</a> |
03 |
<a href="#" class="kapat" style="display: none">KAPAT</a> |
06 |
<div id="iletisimformu"> |
07 |
<h2>İLETİŞİM FORMU </h2> |
08 |
<form name="iletisim" method="post" action=""> |
09 |
<label>Adınız Soyadınız </label> <input type="text" name="isim" /> |
10 |
<label>E-Posta Adresiniz</label> <input type="text" name="e-posta" /> |
11 |
<label>Web Adresiniz</label> <input type="text" name="web" /> |
12 |
<label>Mesajınız</label> <textarea name="mesaj"></textarea> |
13 |
<label></label><input type="submit" name="gonder" value="GÖNDER" /> |
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
01 |
.iletisimbuton {background:#81c8f4; |
02 |
padding:6px;width:auto; |
03 |
margin:50px 0px 0px 0px; |
06 |
border:2px solid #6abee8; |
09 |
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;} |
10 |
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;} |
14 |
background:#3ea2e1 url(img/formbg.gif) repeat-x; |
17 |
border:2px solid #6abee8; |
18 |
margin:90px 0px 0px -400px; |
20 |
position:fixed;top:0;left:0; |
26 |
font:18px/36px arial, verdana, helvetica, sans-serif; |
27 |
padding:0px 0px 6px 6px; |
31 |
#iletisimformu label { |
34 |
font:12px arial, verdana, helvetica, sans-serif; |
37 |
margin:8px 2px 8px 2px; |
40 |
#iletisimformu input{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px} |
41 |
#iletisimformu textarea{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px;width:200px;height:100px} |
43 |
#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.
02 |
$(document).ready(function() { |
03 |
$(".iletisimbuton a").click(function() { |
04 |
$("#iletisimformu").animate({ marginLeft: '0px' },100); |
08 |
$("a.kapat").click(function() { |
09 |
$("#iletisimformu").animate({ marginLeft: '-400px' },100); |
12 |
$(".iletisimbuton a").click(function () { |
13 |
$(".iletisimbuton a").toggle(); |
İŞİN ÖZETİ
Gerekli tüm kodlarımızı yazdıktan sonra biraz işin teknik kısmından bahsetmek istiyorum. Şayet uygulamamızın örnek görünümünü incelediyseniz sayfamız üzerinde var olan bir iletişim butonu olduğunu görürsünüz. Bu iletişim butonu sayfamız üzerinde sabit durmakta ve üzerine tıklandığında ise iletişim formumuz görünmekte. İleşitim formunun sayfamızda görünmemesi için margin değerlerinde sol tarafa eksi margin değeri verdiğimizi görebilirsiniz. Yine aynı şekilde iletişim butonu üzerine tıklandığında ise iletişim formumuz kaybolmakta.
İşin Javascript/jQuery bölümüne gelirsek oluşturduğumuz iletişim butonu isimli ögeye fare ile tıklandığında iletişimformu isimli id’mizin görünmesini sağlıyoruz. Görünme olayını ise jQuery’nin Animate özelliğinden yararlanarak iletisimformu isimli id’nin soldaki margin değeri 0px olacak şekilde sağlıyoruz. Bu da demek oluyor ki iletisimbuton isimli ögeye tıklandığı zaman iletisimformu isimli id marginLeft değeri 0px olana kadar bir yol katedecek 
İ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.
Bu anlatımla size biraz karışık gelebilir ama yazılanları okuyup sonra örneği gördüğünüzde herşey daha iyi anlaşılacaktır. Görüldüğü üzere uygulamamızda aşırı jQuery ve Css/Xhtml kodu kullanmadık. Sadece doğru oluşturduğumuz ögelere doğru değerler ve olay başlatımları vererek uygulamamızı tamamladık.
Aslına bakarsanız bir id seçiciye verilen eksi margin değerlerinin sonradan jQuery ile görünür olmasını sağlayarak tasarımda birçok alanda bunu kullanabiliriz. Bu sayede menüler, navigasyonlar ve sayfa içi bilgilendirmeler yapılabilir. Ben bu örneğimizde bir iletişim paneli yapmayı uygun gördüm. Siz de örnek kodlardan yola çıkarak kendi uygulamanızı yapabilirsiniz.
Umarım sizler için faydalı bir anlatım olmuştur. Bir başka makalemizde görüşmek üzere. |
