jqueryفي بعض الأحيان نلجأ لإستخدام أكثر من مكتبة جافاسكريبت في صفحة واحدة لتشغيل اكثر من تطبيق مختلف .. مثل إستخدام jQuery مع Mootools او jQuery مع prototype … في الغالب يؤدي هذا إلى توقف احد التطبيقات عن العمل بسبب حدوث تعارض بين المكتبات المُستخدمة .. هنا ساعرض بعض الطرق للتغلب على التعارض بين jQuery و المكتبات الأخرى ..

لنفرض أن لدينا هذا الكود و عند إستخدامه يحدث التعارض إما بتوقف عمل هذا الكود او توقف تطبيقات اخرى في الصفحة عن العمل :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
 
	m=document.getElementById('buttons');
	sa=m.getElementsByTagName('a');
 
	$("a").click(function(){
		$(this).blur();
	});
 
	$(sa).mouseover(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
	});
 
	$(sa).mouseout(function(){
		$(this).stop().animate({height:'20px'},{queue:false, duration:900, easing: 'easeOutBounce'})
	});
 
});

سنحاول الأن حل هذا التعارض باستخدام jQuery.noConflict وهناك طريقتان لإستخدامها ..
الطريقة الأولى : سنقوم أولا بإستدعاء الدالة بكتابتها بالشكل التالي jQuery.noConflict(); بعد ذلك في الدوال سنقوم بإستبدال $ بـ jQuery مع وضع $ داخل قوسي function .. هذا سيتيح لنا إستخدام $ داخل الدالة بدون مشاكل … أتوقع أنك لم تفهم شئ :D …. حسناً شاهد الكود التالي و لاحظ التغيير في السطرين الأول و الثاني

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery.noConflict();
jQuery(document).ready(function($){
 
	m=document.getElementById('buttons');
	sa=m.getElementsByTagName('a');
 
	$("a").click(function(){
		$(this).blur();
	});
 
	$(sa).mouseover(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
	});
 
	$(sa).mouseout(function(){
		$(this).stop().animate({height:'20px'},{queue:false, duration:900, easing: 'easeOutBounce'})
	});
 
});

الطريقة الثانية : سنقوم بإسناد jQuery.noConflict إلى متغير معين وليكن $j ثم نستخدم $j بدلاً من $ في التطبيق .. شاهد المثال ولاحظ السطر الأول وكيف تم إستبدال $ في باقي الكود بـ $j

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var $j = jQuery.noConflict();
$j(document).ready(function(){
	m=document.getElementById('buttons');
	sa=m.getElementsByTagName('a');
 
	$j("a").click(function(){
		$j(this).blur();
	});
 
	$j(sa).mouseover(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
	});
 
	$j(sa).mouseout(function(){
		$j(this).stop().animate({height:'20px'},{queue:false, duration:900, easing: 'easeOutBounce'})
	});
 
});

هناك طريقة أخرى لا تعتمد على jQuery.noConflict عن طريق إستبدال $ بـ jQuery ولكنها تتطلب إستدعاء مكتبة jQuery قبل المكتبات الأخرى كما أنها لا تعمل بشكل سليم في كثير من الأحيان ….. ( على الأقل من واقع تجربتي ^_^ )

راجع ايضاً .. Using jQuery with Other Libraries