في بعض الأحيان نلجأ لإستخدام أكثر من مكتبة جافاسكريبت في صفحة واحدة لتشغيل اكثر من تطبيق مختلف .. مثل إستخدام jQuery مع Mootools او jQuery مع prototype … في الغالب يؤدي هذا إلى توقف احد التطبيقات عن العمل بسبب حدوث تعارض بين المكتبات المُستخدمة .. هنا ساعرض بعض الطرق للتغلب على التعارض بين jQuery و المكتبات الأخرى ..
لنفرض أن لدينا هذا الكود و عند إستخدامه يحدث التعارض إما بتوقف عمل هذا الكود او توقف تطبيقات اخرى في الصفحة عن العمل :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(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 20 21 | 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 19 20 | 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
السلام عليكم ورحمة الله وبركاته..
تدينة قيمة منك أخي الكريم المعاصر، فمثل هذه المواضيع خصوصا عن المكتبتات الشهيرة ك jQuery ليست متوفرة عربيا إلا بشكل نادر يقترب من العدم..
لكن لي استفسار أخي: أحيانا أستخدم أكثر من إضافة ب jQuery مع ووردبريس، والمفروض أن نجلب مكتبة jQuery في سطر واحد وتكون أحدث نسخة وتشتغل الإضافات كلها، لكن يحدث أنها لا تشتغل إلا إذا استدعيت لكل واحد منها نسخة المكتبة jQuery الخاصة بها كما وردت في الشرح مثلا، وهو ما لم أستوعبه..
حبذا لو تخصص تدوينة عن طرق استخدام jQuery مع ووردبريس وأكون شاكرا لك..
موفق ومني لك أرق تحية..
أهلا بك اخ عبد الهادي ..
لا أعرف هل هناك تطيبقات تعمل مع اصدارت معينة من jQuery ولا تعمل مع اخرى .. هل لي بـأسماء بعض الاضافات التي تحدثت عنها
موفق
نعم هذا ستدعاء نفس المكتبه مرتين فى نفس الملف، تدوينه قيمه شكراً لك
أهلا بك أخي فؤاد مجددا، وعذرا على التأخير..
أولا مبارك الشهر الكريم وكل عام وأنت إلى الله أقرب إن شاء الله..
الإضافات التي استخدمتها أخي هي التالية:
http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/
فحينما أتابع الشرح أجد صاحب الإضافة يطلب تحميل آخر نسخة من مكتبة jQuery، ومنطقيا من وجهة نظري يجب أن تعمل كلا الإضافتين حينما نستدعي آخر نسخة من المكتبة لمرة واحدة، والمفروض أن تعمل من خلال استدعائنا لمكتبة jQuery المدمجة مع وورد بريس من غير مشاكل، لكن هذا لم يحصل معي فاضطررت لاستدعاء المكتبة في نسختين مختلفتين، فلربما تكون ملاحظتك تلك صحيحة..
أنتظر توضيحك يا غالي مع شكري العميق لك..
مني لك أرق تحية..
فعلا الجى كيرى ممتازة دائما
وانا كنت شفتلها كام درس هنا
http://www.jooria.com/
جميل جداً كانت تواجهني نفس المشكله وحليتها بطريقه تقريباً نفس هذه الطريقة
شكراً لك على نشر العلم اخوي فؤاد :) الله يوفقك
لازلت أطمع في الرد لو أمكن، أو على الأقل إخباري في حالة تعذر الرد لضيق الوقت حتى لا أظل رهينا لهذه التدوينة..
شكرا مجددا ومني لك أرق تحية..
اهلا بك عزيزي .. و اعتذر عن التأخر في الرد للإنشغال
سأحاول في أقرب فرصة تجربة الإضافات إن شاء الله
شكرا لك أخي فؤاد على الاهتمام، وأرجو لك التوفيق في أعمالك، وإن كان هناك حل نهائي فسيكون جميلا لو تم نشرته في تدوينة منفصلة للفائدة، وأنا أتحدث تحديدا عن استعمال أكثر من إضافة jQuery في قالب وورد بريس..
موفق ومني لك أرق تحية..
يزاك الله خير يا المعاصر :)
واجهتني هذه المشكلة في أحد التصاميم على الوورد بريس .. فلم أعرف ما هو الحل بسبب عدم تعمقي في jQuery .. فكان الحل أني اكتفيت باستخدام تطبيق واحد و ألغيت الثاني :(
لكن الآن وجدنا الحل و سوف نطبقه في الأعمال القادمة.
شكراً لك و يعطيك العافية :)
لا اعرف كيف اقوم بشكرك لكن لدي مشكله أنا استخدم بعض خصائص الجاي كيوري وعندما استخدم اضافة Lightbox 2 لا تعمل تلك الخصائص مالعمل؟
اضافة Lightbox 2 تعتمد على مكتبة Prototype … و بالتالي يحدث تعارض بينها وبين jQuery >> هل جربت الحل بالأعلى لحل هذا التعارض ؟
نعم عزيزي جربته أو بالأحرى أني جربته وكانت طريقتي خاطئه لكني قضيت ٣ أسابيع أحل المشكلة ولم أتمكن من ذلك
أنا آسف جداً أزعجتك بمشكلتي
هل جربت طريقة الحل بطريقة صحيحة .. أرجو أن تجرب الطريقتان بالأعلى و أبقيني على إطلاع
موفق
جزاك الله كل خير أخي فؤاد .
للأسف لا فائدة .. سأراجع معك ماقمت بعمله فتحت ملف jquery.js وحاولت تطبيق شرحك ولكن تأثيرات الجاي كيوري لا تعمل مع إضافة lightbox هل ماقمت به كان صحيح؟
يالله لا أعرف كيف أقوم بشكرك لإهتمامك لأمري
أهلا بك عزيزي ..
الطريقة بالأعلى لا تطبق على ملف jquery.js .. بل تطبق على التطبيق نفسه .. راجع المثال في هذه التدوينة
لو فرضنا أن تستخدم تطبيق قوائم منزلقة و بسبب إستخدام lightbox فإنها لا تعمل .. إذن عليك تطبيق الطريقة بالأعلى على أكواد القائمة المنزلقة و ليس على اكواد المكتبه نفسها
ولكن ماذا عن tooltip(); لا استطيع ان اقوم بتشغيله مع اضافات ورد بريس جاي كيوري اخرى !
درس رائع
شكرا على الشرح
السلام عليكم
اتمنى اعرف حل للمشكله دى فهى عقدتى الوحيده فى اضافه اى تطبيق جافا فى الووردبريس
بس للأسف لانى مبعرفش اتعامل معا الجافا غير فى حاجات بسيطه فمعرفتش اطبق الدرس
حاولت اعمل سلايدر لأخر المواضيع فى المدونه واشتغل تمام على القالب الافتراضى twenty
ومافيش اى تعارض بين الجاكوارى والووردبريس
لكن لما حبيت اطبق الموضوع على قالب اخر
حصل مشكله فى ان السلايدر اشتغل بطرييقه غير صحيحه
$(document).ready(function(){
$(“#myController”).jFlow({
slides: “#slides”,
controller: “.jFlowControl”, // must be class, use . sign
slideWrapper : “#jFlowSlide”, // must be id, use # sign
selectedWrapper: “jFlowSelected”, // just pure text, no sign
auto: true, //auto change slide, default true
width: “610px”,
height: “235px”,
duration: 400,
prev: “.jFlowPrev”, // must be class, use . sign
next: “.jFlowNext” // must be class, use . sign
});
});
ممكن اعرف no-conflict mode
بيتم فى مكتبه الجاكوارى ولا فى سكربت الجاكوارى ولا فى headsection فقط
طبعا الجافا اللى فوق دى الداله اللى عندى فى ال Headsection
وفى رابطين رابط للمكتبه jquery-1.3.2.min.js
ورابط للسكربت jquery.flow.1.2.auto.js
لدي كود جكويري وهو عرض للصور s3slider ولكن لدي مشكلة وهي يوجد وميض في الصفحة في كل عرض كانه يحمل الصفحة مرة ثانية الكود اللي استخدمه هو التالي
$(document).ready(function() {
$(‘#s3slider’).s3Slider({
timeOut: 4000
});
});
بسم الله الرحمن الرحيم
– يا غالي انا رح اقول العبارة الي قالها واحد كانت عنده نفس مشكلتي \\
Ok, after several hours of tearing my hair out, I discovered my own mistake
هههههه
– بالفعل انا صارت معي المشكلة من البارح تقريبا وتخيل الساعات الي بحاول احل فيها المشكلة
الله المستعان جلست كثييير ساعات وانا احاول ، واخيراً طبقت الطريقة الثانية الّي هي :
var $j = jQuery.noConflict();
– ونجحت العملية .. والحمدلله ..
– الف شكر ،، Mnes Blue
كنت قد صممت مدونة ووضع كودات Html/java وكانت تعمل فجأة
This Plug-in is not supported
السلام عليكم و رحمة الله .
عندي مشكل في عرض اخر التويترات في موقعي و شكرا.
من ظن يوما أن تدوينة في 2009 ستساعد شخصا في 2016.
تبارك الله عليك خويا. شحال وانا كانقلب على الحل. شكرا جزيلا