‘jQuery’ Etiketi Arşivi
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.
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.
sIFR
Merhaba arkadaşlar. Bu yazımda size jQuery’ nin sayısız nimetlerinden birisi olan sIFR tekniği hakkında bilgi vereceğim.
Öncelikle sIFR nedir ona bakalım?
sIFR jQuery eklentilerinden birisi ve özelliği web sitelerinizdeki metinleri flash tabanlı olarak istediğiniz yazı tipine çevirmenize yarıyor.
Peki jQuery nedir?
jQuery bir Javascript kütüphanesi. Bu kütüphane aracılı ile çok basit şekilde web sitelerinizde çok güzel uygulamalar yapabilirsiniz. Yazımı kolay ve kısadır.
sIFR’ i kullanabilmemiz için gerekli dosyalar nelerdir?
- jQuery kütüphanesi - jquery-1.2.1.pack.js
- jQuery Flash eklentisi - jquery.flash.js
- jQuery sIFR eklentisi - jquery.sifr.js
- Embed (sanırım Türkçesi içine gömmek oluyor) edeceğimiz yazı tipini hazırlayacağımız fla dosyamız - sifr.fla
- fonts dizini
Tüm bu dosyaları ve örnek dosyayı buradan indirebilirsiniz.
Adım 1 - Yazı Tipini Embed Etme (Flash içine gömme)
zipli dosyamız içinden çıkan sifr.fla isimli dosyamızı flash programı ile açın. İç içe gömülü movieclipler göreceksiniz. Metin kutusunu görünceye kadar moviecliplerin içine girin. Karşınıza örnek bir metin gelecek. Orada bulunan metni seçin ve değiştirmek istediğiniz yazı tipini seçerek metnin yazı tipini değiştirin. Değişikliği yaptıktan sonra metin ayarlarının bulunduğu yerde “Embed” isimli bir düğme göreceksiniz işte o düğmeye tıklayın. Karşınıza gelen pencerede “Basic Latin (95glyphs)” seçin ve aşağısında bulunan “Include these characters” isimli kutucuğa şunları ekleyin; “ŞşİiÖöÇçÜüIıĞğ” (tırnaklar olmadan ekleyin). Bu yaptığımız işlem şunun içindir; seçtiğimiz yazı tipi Türkçe karakterleri desteklemiyor ise buraua girdiğimiz karakterleri de almasını sağlayacağız.
Bu işlemleri yaptıysanız eğer son olarak ctrl+enter tuşları yardımı ile swf dosyanızı oluşturun. Bu dosyayı kendi belirleyeceğiniz bir dizin içine atın. Ben fonts olarak ayarladım ve fonts dizini içine attım.
Adım 2 - Javascript dosyalarını tanıtmak
zip dizini içinden çıkan
- jquery-1.2.1.pack.js
- jquery.flash.js
- jquery.sifr.js
dosyalarımızın yolunu <head></head> etiketleri arasında göstererek tanıtın.
Adım 3 - jQuery tetikleyicisini eklemek
Bildiğiniz gibi javascript kodları bir tetikleyici kod satırı ile çalışmaktadır işte jQuery’ de tetikliyici kod bloğu da şu şekilde olmaktadır;
$(document).ready(function(){
// Your code here
});
Şimdi de sIFR için kullanacağımız kodu yazalım
$(function(){
$.sifr({path:'fonts'});
$('h3.KadirGunay, p.KadirGunay').sifr({font:'NeoSans'});
});
Burada dikkat etmemiz gereken şu; $(’.KadirGunay’).sifr({font:’NeoSans’}); bu kısımda .KadirGunay olarak geçen kısım CSS dosyamızda KadirGunay sınıfına atadığımız özellikleri alacaktır ve yine aynı şekilde KadirGunay sınıfındaki değişkenleri sIFR eklentisi ile belirlediğimiz yazı tipine değiştirecektir.
Hepsi bu kadar arkadaşlar 
WP Code Box - WP Kod Kutusu
CMSTurk.Net WP bölümünde denk geldiğim bu eklenti gerçekten çok kullanışlı ve işe yarıyor. Öncelikle adından anlayacağınız gibi Wordpress sisteminizdeki yazılarınızda kullandığınız xhtml, css, javascript, php ve daha nice kodu kod şeklinde göstermek için kullanılıyor. Nasıl mı? Öncelikle eklentiyi buradan indirin. Daha sonra rarlı dosya içinden çıkan dizini wp-content/plugins dizini içine kopyalayın. Yönetim panelinize gidip eklentiler kısmından eklentiyi bulup aktif edin. Eklenti ayarlarını yapmak için yönetim panelinde Ayarlar kısmına gidin.
Gelelim eklentinin kullanımına;
Örnek verecek olursam bir xhtml kodu yazacaksanız ve bunu normal yazı ile değil farklı bir şekilde kod kutusu içinde göstermek istiyorsunuz. İlk olarak normal bir şekilde yazalım;
<div id="icerik">
<div id="kayanAlan">
<div class="bolum">
Bölüm1
</div>
<div class="bolum">
Bölüm2
</div>
<div class="bolum">
Bölüm 3
</div>
<div class="bolum">
Bölüm 4
</div>
<div class="bolum">
Bölüm 5
</div>
</div>
</div>
Bu normal yazım şekliydi. Şimdi bunu bir de kod kutusu içinde yazdıralım;
Bölüm1
Bölüm2
Bölüm 3
Bölüm 4
Bölüm 5
işte bu da kutu şekliydi.
Hangi dilde kod örneği ekleyecekseniz o dilin ismini
kısmına ekliyorsunuz. Hepsi bu
www.maylo.com.tr
www.maylo.com.tr
Lila Kağıt ürünlerinden olan Maylo markası için çalıştığım ajans Ping Dijital’ in tasarladığı Maylo ürünü resmi web sitesi. Proje dahilinde benim görev aldığım alanlar;
- XHTML
- CSS
- Flash CS3
- jQuery
Sitede Maylo ürünü ile ilgili detaylı bilgilerin haricinde, oyunlar, pratik bilgiler, yemek tarifleri ve reklam filmlerini de bulabilirsiniz.
www.lilakagit.com
www.lilakagit.com
Çalıştığım firma Ping Dijital’ in Lila Kağıt için tasarladığı .net platformunda hazırlanan ve VB.Net ile yazılan Lila Kağıt resmi web sitesi. Bu proje evresinde benim yaptığım alanlar;
- XHTML
- CSS
- Flash Animasyonlar (Markalarımız alanında bulunan Maylo-Sofia-Nua)
- jQuery