jQuery

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.

[hr] [toggle title_open=”Konu Başlıklarını Gizle” title_closed=”Konu Başlıklarını Göster” hide=”no” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Read More” read_less_text=”Read Less” include_excerpt_html=”no”]

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[/toggle] [box type=”note”]

Orijinal: Using jQuery with Other Libraries Çeviri: Mehmet Tahta, Sponsor: Domain , Kaynak: jQuery ile Birlikte Diğer Kütüphaneleri Kullanmak

[/box]

Genel

jQuery kütüphanesi, ve neredeyse bütün eklentileri jQuery [abbr title=”namespace”]ad uzayı[/abbr]  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: [highlight]Öntanımlı olarak jQuery “$” işaretini jQuery kısaltması olarak kullanır. [/highlight]

$-Fonksiyonunu Geçersiz Kılmak

Ancak bu öntanımlı fonksiyonu, jQuery’den sonra [highlight]jQuery.noConflict()[/highlight] ç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

[highlight]var $j = jQuery; [/highlight]

(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:

[highlight] (function($) {  /* $ kullanılan bazı kodlar buraya */  } ) (jQuery) [/highlight] [box]Ö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. [/box] [hr]

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.

[related_posts limit=”5″]
%d blogcu bunu beğendi: