JİBŞY(2) - Eklentiler
JİBŞY serisinin ikinci yazısında JQuery'nin olmazsa olmazları 'eklentiler''i anlatacağım. Yazıda eklentilerin genel yapısı, sayfaya elenişi ve bir Türk yapımı eklenti üzerinde kullanımını bulabilirsiniz. Bundan sonraki yazılarda yapacaklarımızın temeli olan eklentileri kavramak JQuery'de gelişmek isteyenler için en büyük ihtiyaçlardan biri.
Jquery ile Bir Şeyler Yapalım yazı dizisinde sıradaki yazımız Jquery pluginleriyle ilgili. Yazı dizisi bir süre sonra örneklere döneceğinden pluginleri kullanmak bizim için bir zorunluluk haline gelecek. Jquery, geliştirebilir bir dildir. Herkes bir plugin ile kendisine, Jquery'ye ve haliyle bize yardım etmiş olur. Sadece konuyla ilgili pluginleri kullanacağımızdan sitemizde gereksiz bilgi yani gereksiz bir yavaşlama olmayacaktır. Pluginleri kullanmak son derece kolay. İleride plugin yazmayla ilgili bir makale yazar mıyım bilmiyorum ama pluginleri kullanmayı anlatmak gerçekten kolay olacak:)
Pluginleri sayfamıza import etmek şöyle oluyor:
1-Önce Jquery ana dosyasını sayfamıza ekliyoruz
<script type="text/javascript" src="jquery.js"></script>
2-Daha sonra pluginin .js uzantılı dosyasını yine aynı yöntemle sayfamıza ekliyoruz.
<script type="text/javascript" src="jquery.plugin_ismi.js"></script>
Bu kadar:) Anlatması gerçekten kolay oldu umarım işinize yarar.
Ancak yazımız bu kadarla kısıtlı değil yani size HTML sayfalarınıza js uzantılı dosyaları nasıl import ederseniz bunu anlatmıyorum. Jquery yardımıyla yapacağımız işlemi seçtikten sonra buna uygun plugini bulmak sayfanıza import etmek(yukarıda anlattım) ve daha sonra o pluginin dökümantasyonu üzerinden plugini kullanmak. Bunların tamamını bir örnek üzerinde anlatacağım. Örnekte kullanacağım pluginin Türk yapımı olmasını istedim ve aklıma saygıdeğer blogger EBurhan'ın kalan karakter eklentisi geldi. Hem Türk yapımı hem de gerçekten işe yarar bir uygulama. Yapan EBurhan'a gönülden teşekkür ediyorum.
Gelelim kullanımına... Öncelikle konunuzun belirlenmiş olduğunu düşünüyorum yani projenizin.
Ben bir proje yapıyorum ve bu projede bir textarea ile ziyaretçi o an ne yaptığını yazıyor ancak ben kişinin bu input'a 150 karakterden fazla yazmasını istemiyorum. Bunu ASP ile yapmak o veriyi postlamak o verinin kontrol edilmesi hata olduğunun anlaşılması ve tekrar sayfaya yönlenmesi... Gerçekten uzun bir süre. ASP kontrollerimizi her ihtimale karşın yapıyoruz ancak sayfamızda bunu javascript ile yaparsak gerçekten çok önemli bir hızlanma görürüz. Projem bu ve javascript ile formun yanında kişinin kaç karakter daha yazabileceğini görebilmesini istiyorum. İşin içinde javascript olduğu için hemen Jquery'e koştum, son sürümünü indirdim ve sayfama import ettim... Ancak Jquery tek başına işimi görmeme yetmiyor ve ben de uzun kodlarla boğuşmak istemiyorum. O zaman ne yapıyoruz hemen plugin arayışına çıkıyoruz. Aramak için http://plugins.jquery.com/ 'u kullanabilirsiniz. Aradım aradım ve en sonunda EBurhan'ın kalan karakter eklentisini buldum. Hemen indirdim sayfama import ettim... Ama bir eksik var nasıl kullanacağımı bilmiyorum bunun için de Plugin'i indirdiğimiz yerde her zaman dökümantasyona ulaşabilirsiniz ki ben de ulaştım. Okudum yazıyı ve artık her şey hazır! Kodları yazıyoruz.
Projemde formun olduğu bir form.asp sayfası vardı. Bu sayfanın kodları:
<html>
<head>
<title>Şu An Ne Yapıyorsun?</title>
</head>
<body>
<form method="post" action="islem.asp">
<input type="text" name="neyap" />
</form>
</body>
</html>
Öncelikle sayfamıza Jquery ve pluginimizin dosyalarını ekliyoruz. Sayfamızın eklenmiş hali şu:
<html>
<head>
<title>Şu An Ne Yapıyorsun?</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.kalankarakter.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="islem.asp">
<input type="text" name="neyap" />
</form>
</body>
</html>
Ve son olarak sayfamıza dökümantasyon sayfasından eriştiğimiz bilgilerle kontrollerimizi ekliyoruz:
<html>
<head>
<title>Şu An Ne Yapıyorsun?</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.kalankarakter.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<form method="post" action="islem.asp">
<textarea id="neyap" name="neyap" ></textarea>
</form>
</body>
</html>
Bu haliyle sayfamız sorunsuz çalışacaktır. Kişi 150 karakteri geçtiğinde uyarı verecek ve her zaman kaç karakter daha yazabileceğini görebileceği bir kod yazdık ve gerçekten zor olmadı:). Plugin kullanımıyla ilgili bundan sonraki 5 yazıda her yazıda farklı bir plugin olacak şekilde örneklerle kullanımını anlatacağım. Hem işinize yarar pluginlerin örnekleri blogda bulunsun hem de sizler tam olarak öğrenebilesiniz diye...
Umarım faydalı bir yazı olmuştur... Bir sonraki yazıda görüşmek üzere(:
Etiketler: bir şey, birşeyler, eklenti, how to use jquery plugins, ile, javascript, jquery, jquery dersler, jquery eklentiler, jquery examples, jquery nedir, jquery plugin, kac karakter kaldı, kalan, karakter, kütüphane, library, nasıl eklenti yapılır, nasıl kullanılır, ornek, plugin, plugins, plugins for jquery, yapalım
Paylaş :del.icio.us Digg it Furl iFeedReaders Netvouz Netscape Simpy Spurl StumbleUpon Wink Yahoo MyWeb
Ağustos 8th, 2008 at 4:42 am
[...] Ancak için içinde javascript olduğundan daha kolayına kaçıyoruz ve jQuery’e başvuruyoruz. jQuery eklentiler yazısında dediğim gibi jQuery eklentileriyle yapacaklarınızın sınırı yok… Her şey için eklenti [...]