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