Kadir GÜNAY’ ın Css, Xhtml, jQuery ve Wordpress Günlüğü

jQuery ile Kayan Panel

Yazı başlığında olduğu gibi jQuery ile oluşturulmuş kayan panel yapıp içine ufak bir iletişim formu ekleyeceğiz.

jQuery Kayan Panel

Adım 1 - XHTML Oluşturmak

<div class="GenelAlan">
<div id="FormAlan">
<div id="IletisimForm">
<fieldset>
<label for="Name">İsim *</label>
<input id="name" type="text" />
<label for="Email">E-Posta Adresi*</label>
<input id="Email" type="text" />
<label for="Message">Mesajınız *</label>
<textarea id="Message" rows="3" cols="20"></textarea>
<input id="sendMail" type="submit" name="submit" onClick="closeForm()" value="Gönder" />
<span id="MesajGonderildi">Mesajınız başarıyla gönderildi!</span>
</fieldset>
</div>
<div id="IletisimBtn"></div>
</div>
<div class="header">
<h1>
<img src="logo.png" style="margin-top: -20px;" /></h1>
</div>

.....

Adım 2 - CSS Hazırlamak

.GenelAlan
{
margin: 0px auto;
width:960px;
background-color:#ffffff;
text-align:left;
position: relative;
}

#FormAlan
{
position:absolute;
left:600px;
float:right;
}
#IletisimForm
{
height:277px;
width:351px;
background-image:url('bkg.jpg');
display:none;
}
#IletisimForm fieldset
{
padding:30px;
border:none;
}
#IletisimForm label
{
display:block;
color:#ffc400;
}
#IletisimForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#IletisimForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#IletisimForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#IletisimBtn
{
height:40px;
width:351px;
background-image:url('iletisim_form_btn.png');
display:block;
cursor:pointer;
}
#MesajGonderildi
{
color:#ff9933;
display:none;
}

Adım 3 - jQuery Dosyalarını İndirmek ve HTML Dosyasına Tanıtmak

Bildiğiniz gibi jQuery bir javascript kütüphanesi. jQuery ile çalışmak istiyorsanız bu kütüphaneye ait js dosyasını indirmek zorundasınız. İndirmek için jQuery resmi sitesini ziyaret edip son versiyonu indirebilirsiniz. İndirdiğiniz js dosyasını şu şekilde HTML dosyanıza ekleyin;

<script src="dizin/jquery-1.2.6.min.js" type="text/javascript"></script>

Siz direk ana klasöre de ekleyebilirsiniz.

Adım 4 - jQuery Kodlarını HTML Dosyasına Eklemek

Daha önceki konularda da söylediğim gibi jQuery ile ilgili işlemleri gerçekleştirebilmek için sadece js dosyasını eklemek yeterli olmuyor. Gerekli alanlar için tetikleyici bir kod bloğu eklemeniz gerekir.

<script type="text/javascript">
$(document).ready(function(){

$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});

});

function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}
</script>

Bu kod’u kısaca anlatmamız gerekirse;

$(document).ready(function(){

Tetikleyiciyi çalıştır

$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});

#IletisimBtn isimli dive bir tıklama fonksiyonu oluştur ve eğer bu div gizli ise yavaş biçimde (.slideDown(”slow”)) aşağıya kaydır. Gizli değilse yine yavaş biçimde yukarı kaydır (.slideUp(”slow”))

;function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}

closeForm isminde bir fonksiyon oluştur ve #MesajGonderildi isimli div’i yavaşca göster. setTimeout komutu ise MesajGonderildi divi içindeki mesajın yok olma zamanını belirtiyor. Bu mesaj yok olduktan sonra da IletisimForm isimli divi yani aşağıya kayan divimizi yavaşca yukarı doğru ilerlet ve kapat komutunu gerçekleştiriyor.

Örnek Uygulama

Örnek Dosyaları İndir

Not: Orjinal makale adresi http://designshack.co.uk/tutorials/creating-a-slide-in-jquery-contact-form ben jQuery kod bloğunu, css ve xhtml dosyalarını Türkçe anlattığım ve herkesin anlaması için bir bölümünü değiştirdim.

Değişiklik

Daha önce www.kadirgunay.info alan adı altında yayın yapıyordum. İşlerimin yoğunluğundan dolayı yaklaşık 2 ay hiçbir veri girememiş ve gündem ile ilgili hiçbir şekilde yazı yazamamıştım. Alan adımın süresi de bitmek üzereydi. Derken kadirgunay.com alan adını alıp yeni bir arayüz oluşturup ve sadece belirli konularda yazı yazmaya karar verdim. Peki nedir bu belirli konular?;

• CSS
• HTML ve XHTML
• jQuery
• Wordpress
• Deneme yazılarım

Sonuç olarak artık bu alan adı altında yayın yapmaya başladım. Elbette Google‘ da halen Kadir GÜNAY aramalarında eski sitem yer almakta fakat bunu da kısa bir zaman içerisinde bu sitedeki içerik ile değiştirmeye gayret göstereceğim.