Ana sayfa » Programlama » JavaScript » jQuery ile birlikte diğer kütüphaneleri kullanmak
JavaScript Programlama

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

[js]

<!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>

[/js]

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:

[js]

<!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>

[/js]

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.

[js]

<!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>

[/js]

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.

[js]

<!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>

[/js]

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)   [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″]

Yazar hakkında

Mehmet Tahta

Egenin gözbebeği İzmir'de yaşıyor, Dokuz Eylül Üniversitesi Yönetim Bilişim Sistemleri yüksek lisans öğrencisi. DMOZ, GNU, WordPress, jQuery ve Ubuntu projelerine katkıda bulunur; ayda yılda bir de bu blog sayfasını günceller.

2 Yorum

Yorum eklemek ister misiniz?

  • 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.

  • 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

Yazılar E-posta Adresinize Gelsin

Abone olmak için aşağıdaki forma e-posta adresinizi yazıp gönderilen onay e-postasını onaylamanız yeterlidir.

İletişim bilgileriniz hiçbir şekilde 3. parti uygulama ile paylaşılmamaktadır.