JQuery ile Şık Bir Teknik

11 Yorum

Bu yazı Web Deneyimleri adlı blogdan Volkan Görgülü tarafından konuk yazar olarak yazılmıştır.

Fatih Turan ile yaptığımız röportajdan sonra sık sık sohbet eder olduk. Kendisi bir süredir blogunda yeni paylaşım yayımlamıyordu.

Birgün bana tekrar paylaşımlarda bulunmak istediğini söyleyince bende bir atraksiyon yapalım dedim ona ve misafir paylaşımcı olarak birbirimizin bloglarında bu açılışı duyurmak, kutlamak amacı ile birer paylaşımda bulunmaya ve aynı anda yayınlamaya karar verdik.

Fatih Turan, Wordpress İçin SEO İpuçları adlı paylaşımda bulundu.

Ve Benim Paylaşım

Bu paylaşımda sizlere JQuery kullanarak çok basit bir şekilde oluşturabileceğimiz, şık bir teknikden bahsedeceğim. Şık bir teknikten kastımı bizzat kendi gözlerinizle görmek için şu sayfayı ziyaret edebilirsiniz.

Altyapımızı Hazırlamaya Başlayalım

JQuery ile çalışacaksak en öncelikle yapmamız gerekenler, JQuery web sitesinden, JQuery adlı JavaScript kütüphanesinin en son sürümünü indirmek (ben birde dosyanın ismini JQuery olarak değiştiriyorum, daha kısa oluyor) ve

1	<script type="text/javascript" src="jquery.js"></script>

kodunu HTML dökümanımızın head bloğu arasında kullanarak HTML dökümanımıza
jQuery.js dosyasının yolunu göstermek.

Ayrıca örneğimizde CSS ve JQuery kodları geliştireceğimiz için ve hazır head
kod bloğunun içindeyken atacağımız en mantıklı adım

1
2
3

<script type="text/javascript">
 
</script>

ile

1
2
3

<style type="text/css">
* {margin:0; padding:0}
</style>

kod bloklarını açmak ve işimizi görecek bir sıfırlama tekniği kullanmak olacak.

Alternatif olarakda bu paylaşım için başlangıç niteliğinde hazırladığım şu
klasörü bilgisayarınıza indirebilirsiniz.

Ne Yapmak İstiyoruz?

Yapmak istediğimiz şu, belirlediğim bir bağlantıya basılınca sayfanın üst kısmından x yükseklikte bir alanın, şık bir şekilde açılması.

Alan dediğimize göre bir div etiketine ihtiyacımız var.

1	<div id="acilacakAlan"></div>

İsterseniz birde div etiketimize yükseklik ve bir arkaplan rengi verelim.

1	#acilacakAlan {height:240px; background-color:#000}

Sayfamızı açıcak olursak, sayfanın üst kısmında, 240px yüksekliğinde, siyah renkli bir alan göreceğiz.

O zaman sayfamıza birde tetikleyici niteliğinde bir bağlantı ekleyelim ve HTML kısmı ile işimiz bitsin.

1	<a href="#" id="gosterici">Göster</a>

Burada href="#" tanımı önemli, çünkü href="" boş kaldığı zaman a etiketimiz bir bağlantı olarak görülmez ve basılır durumda olmaz, bu nedenle bir # işareti istediğimizi yapmak için yeterli.

JQuery’ye Giriş

JQuery’nin en sevdiğim yanı şu, JQuery geliştirmek için çok fazla bir JavaScript bilgisine sahip olmam gerekmiyor, ya da basit isteklerimi yapmak için sayfalarca kod yazmama gerek yok, önceden tanımlanmış fonksiyonları kullanabiliyorum.

Zaten JQuery’nin sloganı olan, Tasarımcılar için JavaScript, herşeyi anlatıyor.

Çalışmaya Başlayalım

JQuery kodu geliştireceğimiz zaman kullanmamız gereken bir kod var

1
2
3

$(document).ready(function() {
 
});

Bu kodun türkçesi “döküman hazır olduğunda” demek, dolayısı ile şimdi bu kod bloğunun içine yazacağımız kodlar döküman hazır olduğunda çalışacak.

Bir defa öncelikle o div‘i gizlemeliyiz sayfa ilk açıldığında gizli olmalı. Yani şöyle birşey demem lazım, acilacakAlan.gizle yani acilacakAlan’ı seçip ona gizlenme komutunu vermem lazım.

$('#acilacakAlan') kodu ile ben o div etiketini seçiyorum ve bu kodun sonuna .hide(); kodunu ekleyerek div etiketine gizlenmesini söylüyorum.

1
2
3

$(document).ready(function() {
$('#acilacakAlan').hide();
});

Sayfamızı açıcak olursak bomboş bir sayfa göreceğiz, güzel.

Bu noktadan sonra yapmak istediğimizi yeniden gözden geçirelim. Ben gosterici adlı bağlantıya tıklandığımda acilacakAlan’ın gözükmesini istiyorum.

O zaman önce gosterici’ye tıklandığı anı bilmem lazım.

1	$('#gosterici').click();

Yukarıdaki kod ile, gosterici bağlantısına tıklandığı bilgisi avcumun içinde, artık acilacakAlan‘ın gözükmesini sağlayacak fonksiyonu yazabilirim:

1
2
3

function() {
$('#acilacakAlan').show;
}

İki kodu birleştirince

1
2
3

$('a#gosterici').click(function() {
$('#acilacakAlan').show();
});

ortaya yukarıdaki kod çıkıyor, bir deneyelim bakalım ne olacak?

Evet bağlantıya basınca alanımız geliyor, ama bir sorun var şu anda alanımız direk açılıyor, hiç bir şıklık ya da güzellik yok.

Oysa ben yukarıdan aşağıya doğru şık bir şekilde açılmasını istiyorum, o zaman ben yanlış bir komut kullanıyorum, aşağıya(down) kaydırmak(slide) için slideDown komutunu deneyelim o zaman.

.show(); yerine .slideDown(); yazalım ve sayfamızı kontrol edelim.

Evet istediğim oldu, ve ayrıca ben

1	.slideDown('slow');

veya

1	.slideDown('fast');

değerlerini kullanarak ya da direk rakam girerek,

1	.slideDown(400);

kayma hızını ayarlayabilirim, dikkat edin metinlerde ‘ kullanıyoruz ama rakamlarda kullanmıyoruz.

.slideDown(); kodunu .slideDown(400); ile değiştirerek kayma hızını 400′e ayarlıyorum.

Ufak Bir Sorun Var

Herşey çok güzel ama ufak bir sorun var, bu alanı açtıktan sonra birde kapatmamız lazım. İsterseniz en baştaki

1	$('#acilacakAlan').hide();

kodunun başına // koyarak onu yorum yapalım ve alanımız direk açık gelsin.

Şimdik alanımızı kapatmak istiyoruz ama yukarıya (up) doğru kayarak (slide) kapanmasını istiyoruz.

.slideDown(400); kodunu .slideUp(400); ile değiştirelim ve, evet, amacımıza ulaşıyoruz.

Ama şimdide şöyle bir durum var az evvel alanı aşağıya doğru kaydırarak açtık şimdi ise yukarıya doğru kaydırarak açtık ama ben aynı bağlantıya ilk defa basıldığında açılmasını tekrar basıldığında kapanmasını istiyorum. Bu işlem için iki ayrı bağlantı oluşturmak istemiyorum.

Sihirli Komut, Toggle

Arkadaşlar JQuery harika çünkü toggle adlı hazır bir fonksiyonu var ve bu fonksiyon tam istediğimizi yapmamızı sağlayacak. Gelin şu şekilde kodumuzu değiştirelim ve sayfamızı kontrol edelim.

1	.slideToggle(400);

Harika değil mi? Toggle ilk basıldığında önündeki (slide) komutu gerçekleştiriyor ve diğer basışta, ilk yaptığının tam tersini yapıyor. Yani Aç Kapa şeklinde düşünebiliriz. Zaten Toggle kelimesinin türkçe karşılığı, iki konumlu düğme demekmiş.

Ne Kadar Kolaymış değil mi?

Artık elimizde şık bir teknik var ve bu tekniği istediğimiz gibi süsleyebiliriz. Ben şu şekilde bir örnek geliştirdim (Arkadaşlar, örneğe sadece FireFox3′de baktım, diğer tarayıcılar için optimize etmedim), Fatih Turan ise, Sinemalardan adlı blogunda (şu anda kapalı olarak test ediliyor yakında açılacak) bu tekniği çok şık bir şekilde kullanmış, kısacası sınır sizin hayal gücünüz, çok efektif ve şık kullanımlar çıkartılabilir.

Umarım sizde ne kadar kolaymış bunu yapmak demişsinizdir, faydalı bir paylaşım oldu ise ne mutlu bana.

Tarih: 18 Eylül 2008 12:28
Geri İzleme Yap
Kategori: Web Tasarım
Bu Yazıyı Paylaş

Yorumlar

Bu yazı hakkında 11 yorum yazıldı. Yorumları RSS üzerinden de takip edebilirsiniz. Siz de yorum yazmak ister misiniz?

Teşekkür ediyoruz Volkan :) Uzun uzun kod yazmak hoşuma gittiği için JQuery’ye kendimi veremedim ancak ÖSS sürecini atlattıktan sonra öğrenmekte fayda var diye düşünmeye başlıyorum yavaş yavaş.

Bu arada Fatih hocam’a bildireyim, Ubuntu FF3′den giriş yapıyorum siteye ve br kaç sorun var, istenilirse ekran görüntüsünü yollayabilirim.

Tekrar teşekkür ediyoruz :)

brsyuksel → http://www.brsyuksel.com 18 Eylül 2008 14:48
@brsyuksel: Bahsettiğin şekilde ekran görüntüsünü bana iletişim formundan yollayabilirsen çok memnun olurum. Teşekkürler. :)

fatihturan → http://www.fatihturan.com 18 Eylül 2008 14:56
Peki bu tekniği bir header’ın üstüne oturtmak istedim. Sayfayı görmek için “Göster”e tıkladığını varsayıyorum ve açılıyor bu kısım. Sitenin tamamı aşağı mı kayacaktır yoksa sitenin üzerinde mi görüntülenecektir?

Harun YAŞAR → http://www.linux.web.tr 18 Eylül 2008 18:00
@Harun Yaşar: Aynı örnekte olduğu gibi sayfa aşağı doğru kayacak. Sitenin üstünde kayması için CSS kodlarda birtakım düzenlemelere gitmek gerek. Daha doğrusu relative/absolute tekniğini kullanmanız gerekiyor.

fatihturan → http://www.fatihturan.com 18 Eylül 2008 20:22
Volkan abi bu sefer de jQuery’nin okadarda zor olmadığını gösterdin bana teşekkürler,eline sağlık :)

Hsn → http://www.hedehodo.net 06 Ekim 2008 15:44
Volkan & Fatih işbirliği güzel gidiyor. Fatihin Web Deneyimlerindeki yazıdan sonra bu yazıda çok güzel oldu. Deneyelim bakalım :D :D

Eray Usta 06 Ekim 2008 23:31
teşekkürler bu güzel bilgi için.

ama yuarda adım adım gittiğiniz için bi yerde biz uygularken yanlış yapma olasılığımız yüksek.

şurda
$(’a#gosterici’).click(function() {
$(’#acilacakAlan’).show();
});

bu kodu eklediğimizde.

normalde sonuç

$(document).ready(function()
{
$(’#acilacakAlan’).hide();
$(’a#gosterici’).click(function()
{
$(’#acilacakAlan’).slideToggle();
});

böyle. ama örnek sayfayı incelediğimde.

$(document).ready(function()
{
$(’#acilacakAlan’).hide();
$(’a#gosterici’).click(function()
{
$(’#acilacakAlan’).slideToggle();
});
});

doğrusu. bu.

dikkat etmeyenler bu yanlış yüzünden hata alabilirler.

Teşekkürler.

çağlar → http://www.grupmp3.org 10 Ekim 2008 02:15
merhaba,
gerçekten de zor değilmiş.
biraz detaylı araştırmak yeterli geldi.
İyi çalışmalar..

eren → http://www.payidarulke.com 13 Ekim 2008 16:06
Elinize sağlık. Çok kısa ve anlaşılır bir anlatım hemde çok güzel bir örnek olmuş. +RSS

Sedat Kumcu → http://www.sedat.web.tr 15 Ekim 2008 04:32
Örneği görüntüleyemedim, sayfa bulunamıyor…

Eray Alakese → http://www.erayalakese.com 10 Kasım 2008 11:18
@Eray: Bağlantıları düzelttim. Hatayı belirttiğin için teşekkürler. ;)

fatihturan → http://www.fatihturan.com 10 Kasım 2008 11:53

Reaksiyonlar

Bu yazı hakkında 2 pingback ve 0 trackback yapıldı.

Yorum Yaz

Yorum yazabilmeniz için adınız, soyadınız ve e-posta adresinizi mutlaka girmeniz gerekiyor. E-posta adresiniz burada gösterilmeyecektir.

Lütfen yorumunuzu yazdıkdan sonra önizleme düğmesine basıp yazım hatalarınızı kontrol edin. Konu ile alakasız ve çok fazla yazım hatası bulunan yorumlar onaylanmayacaktır.