JQuery Plugin
من المعروف أن عند صدور المكتبة المصغرة من الـ JavaScript والتي تعرف بـ JQuery , رأينا كيفية أنه تم اختصار حجم الكود اللازم لعمل على سبيل المثال اخفاء او اي عمل خاص بـ Client side عن طريقة جعلة على شكل دوال بسيطة ومفهومة المعنى.
ولا استبعد أن المستخدمين للـ JQuery لم يتراود هذا السؤال في اذهانهم, وهو كيف يتم عمل هذا الشيئ بسهولة وبمجرد دالة؟.
وأيضا من جهة اخرى لو قررت يوم من الايام أن تعمل تحميل لأخر نسخة من مكتبة الـ JQuery من خلال الموقع الرسمي, ستلاحظ ان هناك رابط او قسم يحمل أسم Plugins وعند الدخول عليه تستطيع تحميل اضافات قام بعملها اشخاص مثلي ومثلك عزيزي القارئ, وبمختلف المجالات حيث منها ما يكون موجه الى forms والأخر موجه الى اضافة حركة جديدة للموقع والخ...
ولعل ابسط الامثلة على هذه الأضافات هي ما تعرف بـ ToolTip . عبارة عن اضافة نراها في بعض الموقع وهي عند تمرير المؤشر(Mouse) على رابط او اي كان , يظهر لك ما الذي يعملة هذا الرابط و الخ..., حيث ستلاحظ عزيزي القارئ انك في عندما تريد ان تستدعي هذه الاضافة في العمل الخاص بك هو سوف يكون على النحو التالي:
$('a').tooltip();أذا نستطيع فهم او تعريف الـ Plugin بأنها دالة مكتوبة بـ JavaScript والهدف منها تنفيذ أوامر معينة يستطيع المستخدم لهذه الأضافة ان يضيفة الى مشروعة بأقل عدد من الاسطر وفي نفس الوقت تخدم المبرمج عندما يرد ان يضيف اي تعديلات جديدة مستقبلا.
فبعد هذه المقدمة البسطة سوف أعرفك عزيزي القارئ على كيفية بناء هذه الأضافات وادراجها في مشروعك بكل سهولة.
قبل ان نتفق عزيزي القارئ على الهيكل العام لبناء Plugins لا بد ان تكون على علم بكيفية استخدام الـ JQuery سواء كنت خبير فيها او حتى لو كان يوجد لديك مرجع لها, لكن الاهم هو أنك ملم بطريقة كتابة كواد بأستخدم هذه المكتبة.
قبل البدأ تأكد عزيزي القارئ انك تملك نسخة من مكتبة الـ JQuery والتي تستطيع تحميلها من http://jquery.com/ .
لنبدأ:
في البداية لنتفق على الهيكل العام لكتابة Plugins الخاصة بنا, طبعا الملفات التي تتكون منها الـ Plugins عبارة عم ملف JavaScript و ملف CSS اذا كنت تريد ان تعمل تعديلات للمظهر الخارجي وملف الـ HTML طبعا هذا ليس بالاهمية الكبيرة للمستخدم لكن تستطيع ان تجعلة كـ مثال نهائي للأضافة.
في الخطوة الثانية لنتفق على كيفية تسمة ملفي الـ JavaScript و ملف الـ CSS.
ليكن ملف الـ JavaScript على النحو التالي : jquery.pluginname.js
وملف الـ CSS على النحو التالي: jquery.pluginname.css
في المثال الذي سوف نطبقة مع الشرح, سوف نعمل Plugin بسيطة والهدف منها هو عند مرور المؤشر على الفقرة يتغير النص الموجود بها.
الشكل العام لكتابة اي plugin هو على النحو التالي
(function($){
jQuery.fn.txthover = function(){
return this.each(function(){
// here the code.
});
};
})(jQuery)لنقف عند الكود قليلا ونتعرف على الاسطر المهمة فيه, بداية جعلنا الـ Plugin عبارة عن function لتستطيع استخدامها مع اضافات اخرى بكل سهولة ونلاحظ ان في هذا السطر
jQuery.fn.txthover = function(){هو تعريف اسم الـ plugin حيث يهمنا هو اسم الاضافة وفي الكود السابق هو txthover, ارجو ان تركز عزيزي القارئ على هذا الاسم وسوف تكتشف ماهي اهمية عند كتابة المثال في مابعد.
في اخر جزء من الكود وهو المسؤول عن تشغيل الاضافة على العناصر المحددة لها, فلو تلاحظ استخدما الـ each loop ليدل على ان هذا الكود سوف يطبق على كل عنصر في الصفحة يحمل مثلا الكلاس المعين, على سبيل المثال:
لنفرض انه يوجد لدينا 4 فقرات (P) في الصفحة, وبكتابتك للكود التالي:
$('p').txthover();سوف يتم تطبيق كل ما بداخل هذا الكود ( الموجود في الاضافة ) على جميع العناصر الـ 4 الموجودة في الصفحة. ومن هذا المثال استطيع ان اتاكد انك عندما تتعامل مع الـ Jquery تستطيع ان تحدد مثلا عناصر محددة بأستخدام الـ id أو الـ class , فتخيل معي انك تستطيع فعل هذا ايضا بكل سهولة مع الاضافة , لاحظ الكود السابق بعد التعديل:
$('.text').txthover();سوف يتم تطيبق ما بداخل الاضافة على العناصر التي تحمل الـ class الذي يكون اسمة text.
سابقا عزيزي القارئ ذكرت لك في جزئ من الهيكل العام للأظافة أن تركز على اسم الاضافة في الكود التالي:
jQuery.fn.txthover = function(){بالرجوع الى المثال السابق سوف تلاحظ استدعاء هذه الاضافة بواسطة الاسم txthover وهو مثل الاسم المكتوب في الكود الموجود في اعلى هذه الفقرة, اذا الان استطيع ان ادرك ان تم فهم طريقة تسمية الاضافة وكيفية استداعها.
ملاحظة: هذا الهيكل العام هو الذي ستتعامل معه حتى عند كتابة اضافات اخرى.
وبعد التعرف على الهيكل العام للـ plugin , لننشاء ملفين وهما index.html والاخر مثل ما تم الاتفاق عليه وهو jquery.txthover.js
ولنقم بفتح ملف الجافاسكريبت ونبدا بكتابة الهيكل العام للأضافة كما اتفقنا عليه سابقا, وقم باضافة مكتبة الـ jquery و ملف الاضافة الخاص بنا, وفتح script tag مثل ما نعمل لكتابة اي كود jquery عادي, وبعدها نضيف كود الـ jquery و ثلاث فقرات لتطبق الاضافة عليهم . لاحظ الصورة.
ملاحظة مهمة جدا:
لا تكتب اسم الاضافة كأسم متشابه لأي دالة موجودة في مكتبة الـ jquery على سبيل المثال في مثالنا السابق لم اقم بكتابة اسم الاضافة بـ hover لانها سوق تكون مشابهة للموجودة في المكتبة .
ونتوجه الى كتابة أول اضافة لنا:
في ملف الجافاسكريبت وداخل الـ each loop نكتب التالي:
بكل بساطة افتح صفحة index على المتصفح ومرر المؤشر على العناصر الذين يملكون الـclass وستلاحظ تغير في النص التابع.
قبل التقدم واضافة خواص جديدة للأضافة ساقف قليلا لشرح جزء بسيط من الكود وهو this اذا استخدمت عزيزي القارئ الـ jquery سوف تكون على علم بما تعنيه هذه الكلمة ولكن لامانع من تذكثير بسيط لها .
تعني هذه الكلمة للعنصر المحدد, كما ذكرت اننا سوف نتعامل مع each loop لنحدد كل عنصر يحمل الـ class ونطبق عليه التالي فعندما نعود للكود السابق نلاحظ هو يقصد بأول كلمة this اي العنصر الذي سوف نضع عليه المؤشر وبعدها كتبنا this مرة اخرى لنخبر الكود بأن العنصر الذي تم وضع المؤشر عليه هو الذي اعمل تغير للنص الخاص به كما في الكود.
اذا وصلنا لمرحلة ممتازة, لكن لنقف قليلا ونسأل انفسنا عندما ممرنا المؤشر وبعدنها لاحظنا ان النص الجديد هو الذي سوف يبقى, ماذا لو اردنا ان نعيدة للنص السابق , اذا لنعد الى الكود ونعمل التعديل التالي:
في الحقيقة كلها مهارات برمجية فهذا يعتمد على مهارتك في استخدام الـ JavaScript و الـ jquery , افتح الصفحة ولاحظ الفرق.
لنتقدم قليلا الى الامام لأضافة اخر تركيبة للـ Plugin وهي جعل المستخدم يحدد خيارات معينة, على سبيل المثل والذي سوف نطبقة في مثالنا سوف يستطيع المستخدم ان يضيف لون للخط عندما يمرر المؤشر وحجم الخط, كما في الكود التالي:
بكل بساطة عزيزي القارئ جعلت الدالة تستقبل متغيرات (options ) وبعدها جعلت قيم افتراضية لهذه الاضافة, بمعنى اخر اذا لم يدخل المستخدم اي قيم لهذه الاضافة سوف تكون الاعدادات التي موجودة في المتغير DefaultOptions هي التي سوف تطبق على في الكود, وذالك قمنا بتعريف متغير o لكي يتم عمل دمج للمتغيرات سواء كانت الاصلية لو المدخلة من قبل المستخدم ووضعها في المتغير الاول وفي هذه الحالة سوف يكون DefaultOptions
بمعنى اخر اذا لم يكتب المستخدم اي قيم جديدة , سوف يبقي على المتغيرات الافتراضية.
لربما تتسأل عن كيفية ان المستخدم هو الذي يعرف المتغيرات , وأجيب عليك عزيزي القارئ وهو ان تقوم بفتح ملف index وتعمل التغيرات التالية:
افتح الصفحة من جديد ولاحظ الفرق.
في النهاية لست مجبر عزيزي القارئ على اضافات اعدادات اضافية , يعتمد على الحاجة لأستخدام الاضافات في الـ plugin.
وأيضا مهارتك في التعامل وفهم الـ Jquery ستساعدك على بناء plugins على حسب متطلباتك.
في النهاية انا لم اتطرق الى اشياء اعمق لكن اهم شي حاولت اوصل له هو المبدأ العام لكتابة الـ Plugins
وأيضا احببت ان اشارككم بهذا المقال, وان اتمنى انه نال على اجابكم.
وانا ارحب بأي تعديلات لو اضافات.
Good Luck
