jQuery ile birlikte diğer kütüphaneleri kullanmak

jQuery Dersleri

Bu yazı Using jQuery with Other Libraries başlıklı eğitselin Türkçe çevirisidir. Orijinaline bağlı kalarak çevirmeye çalıştım, umarım işinize yarar.

Konu Başlıklarını Gizle

1. Genel
2. $- Fonksiyonunu Geçersiz Kılmak
3. jQuery’i Diğer Kütüphanelerden Önce Dahil Etmek
4. jQuery için Sihirli Kısayollar

Genel

jQuery kütüphanesi, ve neredeyse bütün eklentileri jQuery ad uzayı  içerisinde çalışmasına yönelik yapılmıştır. Genel kural olarak, “global” objeler jQuery ad uzayı içerisinde saklanır, dolayısıyla diğer kütüphanelerle herhangi bir çakışma yaşamazsınız. (Örneğin Prototype, MooTools veya YUI)

Buna rağmen sadece dikkat edilmesi gereken bir nokta vardır: Öntanımlı olarak jQuery “$” işaretini jQuery kısaltması olarak kullanır.

$-Fonksiyonunu Geçersiz Kılmak

Ancak bu öntanımlı fonksiyonu, jQuery’den sonra jQuery.noConflict() çağırarak geçersiz kılabilir, ardından diğer kütüphane ile birlikte yükleyebilirsiniz. Örneğin:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ile birlikte diğer kütüphaneleri kullanmak | Mehmet Tahta</title>
 <script src="prototype.js"></script>
 <script src="jquery.js"></script>
 <script>
 jQuery.noConflict();

 // jQuery(...) aracılığıyla jQuery kullanın.
 jQuery(document).ready(function(){
 jQuery("div").hide();
 });

 // $(...) ile birlikte Prototype kullanın, vs.
 $('someid').hide();
 </script>
</head>

<body>
</body>
</html>

Bu $ işaretini orijinal kütüphanesine çevirecektir. Siz yine jQuery’i uygulamanızın geri kalanında kullanabileceksiniz.

Ek olarak bir başka seçenek daha bulunuyor. Eğer jQuery’nin bir başka kütüphane ile çakışmamasından emin olmak istiyorsanız -fakat kısa isim kullanmadan da faydalanmak istiyorsanız, şöyle bir şey yapabilirsiniz:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ile birlikte diğer kütüphaneleri kullanmak | Mehmet Tahta</title>
 <script src="prototype.js"></script>
 <script src="jquery.js"></script>
 <script>
 var $j = jQuery.noConflict();

 // $j(...) ile jQuery kullanın
 $j(document).ready(function(){
 $j("div").hide();
 });

 // $(...) ile Prototype kullanın, vs.
 $('someid').hide();
 </script>
</head>

<body>
</body>
</html>

Kendi alternatif isimlerinizi belirleyebilirsiniz (örneğin: jq, $J, harikaQuery – istediğiniz her şey).

Son olarak, eğer alternatif jQuery ismi tanımlamak istemiyorsanız (eğer gerçekten $ kullanmaktan memnunsanız ve diğer kütüphanelerin $ metodu ile ilgilenmiyorsanız), sizin için bir diğer çözüm daha var. Bu kısa jQuery kodu kullanmanın avantajlarından faydalandığınız, diğer kütüphanelerle çakışmasını engellediğiniz en sık kullanılan yöntemlerden birisidir.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ile birlikte diğer kütüphaneleri kullanmak | Mehmet Tahta</title>
 <script src="prototype.js"></script>
 <script src="jquery.js"></script>
 <script>
 jQuery.noConflict();

 // Bütün kodlarınızı document ready alanına koyun
 jQuery(document).ready(function($){
 // $ kullanarak jQuery işleri yapın
 $("div").hide();
 });

 // $(...) ile Prototype kullanın, vs.
 $('someid').hide();
 </script>
</head>
<body>
</body>
</html>

Bu muhtemelen çoğu kodlar için en ideal çözümdür, unutmayın; değiştirmek zorunda olduğunuz kodlar ne kadar az olursa uyumluluğu o kadar iyi sağlamış olursunuz.

Bkz: Custom Alias (İngilizce)

jQuery’i diğer kütüphanelerden önce dahil etmek

Eğer jQuery’i diğer kütüphanelerden önce dahil ederseniz, jQuery ile iş yaparken jQuery kullanabilirsiniz, ve “$” işareti de diğer kütüphane için kısaltma olarak kalır. Bu durumda $-fonksiyonunu “jQuery.noConflict()” ile geçersiz kılmaya gerek yoktur.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ile birlikte diğer kütüphaneleri kullanmak | Mehmet Tahta</title>
 <script src="jquery.js"></script>
 <script src="prototype.js"></script>
 <script>
 // jQuery(...) ile jQuery kullanın
 jQuery(document).ready(function(){
 jQuery("div").hide();
 });

 // $(...) ile Prototype kullanın, vs.
 $('someid').hide();
 </script>
</head>
<body>
</body>
</html>

jQuery için sihirli kısayollar

Eğer her zaman tam olarak “jQuery” yazmak istemiyorsanız sizin için bazı alternatif kısayollar var:

jQuery’i bir başka kısayola atamak

var $j = jQuery; 

(Bu farklı kütüphane kullanmayı düşünüyorsanız en iyi çözüm olabilir.)

Aşağıdaki teknik, $ işaretini tamamen geçersiz kılmadan kod bloğu içerisinde kullanmanıza olanak sağlıyor:

 (function($) {  /* $ kullanılan bazı kodlar buraya */  } ) (jQuery) 
Önemli Not: Eğer bu tekniği kullanırsanız, Prototype metodlarını bu kapsül içerisindeki fonksiyonda kullanamazsınız. Yani bu kodla bu blokta sadece jQuery kullanabilirsiniz. 

Aşağıda jQuery ile ilgili yazılmış diğer jQuery derslerine ulaşabilirsiniz. Ayrıca paylaşmak güzeldir, yazıyı beğendiyseniz paylaşmayı unutmayın.

, , , , , ,

  • mutlu

    teşekkür ederim anlatma mantığınız sayesinde sorunum çözüldü birçok sitede aynı mevzudan bahsediyor ama bizim gibi jquery yarım yamalak bilenler için güzel anlatmışsınız.

  • Vaay Be

    merhabalar arkadaslar benim bir sorunum var cozemedim. yardimci olacak arkadaslara cok tesekur ederim,n ben sitemde jquery kulaniyorum size koplayip yapistirayim.

    bu ikisi bir arada calismiyor cakisiyorlar bu sekilde olan jquery cozumu nasil olacak.
    birini menu icin kulaniyorum birini ise slider icin kulaniyorum. birini kaldirdigimda biri calisiyor ikisi bir arada calismiyor. uzun zamandir cozemedim…. tesekurler

Powered by WordPress. Designed by WooThemes

%d blogcu bunu beğendi: