CSS3 Dropdown Menu

درس يشرح طريقة عمل قائمة روابط منزلقة عند تمرير الفأرة عليها بطريقة جميلة جداً وبإستخدام CSS3.

مقابلة مع مصمم ومطور المواقع سو تاناكا

25jQuery Tutorials for Creating and Working with Forms

25 درس حول التعامل مع نماذج HTML بإستخدام مكتبة jQuery.

عن Google Analytics نتحدث

10Tips to Create a Motivating Working Environment at Home

مقالة تتحدث عن كيفية تكوين البيئة الدافعة أو المحفزة على الإنتاجية عند العمل من المنزل.

70Ultimate Cinema 4D Tutorials & Techniques

مقالة تعرض 70 درس عملي جديد حول برنامج Cinema 4D، أعجبتني جداً الدروس المعروضة في هذا الرابط وخاصة أفضل هذا البرنامج لسهولة إستعماله وجودة عمله ولكنه غير متاح مجاناً.

Brainstorming Tips & Techniques for Bloggers

مقالة توفر عدة نصائح وطرق حول العصف الذهني للمدونين، وهي تفيد المدونين في عدة أمور مثل كتابة المواضيع وتنظيمها.

مقاطع مرئية لخطوات الرسم

اسلامنا هو نهضتنا

في هذه التدوينة سأعرض 6 أفكار تساعد على الإستفادة الفعالة من الوقت، وكتبتها خاصة للمطورين والمصممين أو مستخدمي الإنترنت عموماً وهي موجهة لهم أكثر من غيرهم. يمكن أن يستفيد منها بالأخص المضغوطين في أعمالهم مثل أصحاب الأعمال الحرة مثل المصممين، المطورين، الكتاب، .. وغيرهم.

أفكار تساعد على الإستفادة من الوقت أكثر

بالنسبة لجدوى هذه الأفكار قد لاتناسب الجميع والكل له رأيه، بالطبع هي من أفكاري يمكن أن تكون صحيحة أو خاطئة ولكن أعتبرها مفيدة بالنسبة لي وأنا أعمل بها إلى الآن.

التركيز على شيء واحد

من الطرق المنطقية للإنجاز هي أن تركز على عمل شيء لفترة أطول دون الإنشغال بغيره بحيث أيضاً تتجنب المهمات المتعددة ومن الصعوبة أن تركز في شيئين في نفس الوقت، وأنا أقصد في هذه الفكرة أن يتم التركيز على المهمة لمدة كافية دون الإنقطاع.

هناك مثال أعتقد أنه قد يمر بالمستخدم يومياً مثلاً أثناء تصفحه على الإنترنت ويكون لديه عمل على الجهاز ويدخل لأكثر من 10 مرات إلى البريد الإلكتروني! حتى تصبح هذه العادة تسير بشكل لا إرادي! بغض النظر عن مميزات البريد الذي يجعلك لا تفارقه عدة مرات مثل Gmail إلا أن الأفضل تأجيل مثل هذه الأشياء إلى ما بعد إنجاز المهمة التي لديك إلا إذا كان هذا الشيء ضروري أو قبل البدأ بمهمة أخرى تقوم بالدخول إلى البريد الإلكتروني أو عمل أشياء الروتينية الغير مهمة.

كذلك إختصار الوقت في الوصول إلى المصادر المتعلقة بالعمل الذي تقوم به إذا كنت تعمل على مشروع معين فهذا يختصر عليك ويجنبك تحويل مجرد البحث عن مشكلة ما في المشروع إلى مهمة أخرى!

التخلص من عدة أشياء

هناك أشياء يجب التخلص منها يمكن أن تعيق عملك، ربما الكثير من الأشياء التي تضيع وقتك تأتي أثناء تصفحك للإنترنت. إذا كنت تتابع مدونات عبر قاريء الخلاصات يمكنك أن تجعل هذه المهمة في آخر اليوم أو بعد إنجاز مهمتك لا تجعلها تأخذ الكثير من وقتك وخاصةً إن كان لديك الكثير من المدونات هذه فرصة للتخلص من المدونات التي لم تتابعها من فترة أو التي لم تستفد منها الكثير.

أيضاً روابط المفضلة المؤقتة، الملفات القديمة التي لم تستخدمها من فترة (ما لم تكن مهمة بالطبع) تخلص منها! كذلك التطبيقات المعقدة التي تأخذ من وقتك الكثير يفضل أن تجد بدائل بسيطة لها .

إهتم بالتنفيذ أكثر من التخطيط لأن التخطيط سهل جداً والذي يفترض ألا يأخذ الكثير من وقتك، وتجنب التأجيل أيضاً لكي لا تتراكم عليك المهمات دائماً.

إستخدام قائمة المهمات – To Do List

الطريقة الأسهل والأسرع في التخطيط هي كتابة قائمة بالمهمات التي تريد أن تنفذها أو ما يسمى To-do list، أبسط تنفيذ لها أن تكتب مهامك اليومية على ورقة وخاصة المهام الجديدة عليك أو التي نادراً ما تفعلها والتي تريد تجنب نسيانها. وإلتزم بتفيذ هذه المهام وأشطب المهمة التي أنجزتها وهكذا.

أنصحك بتجنب كتابة المهام الروتينية لأن كتابتها مضيعة للوقت، ما الفائدة من كتابة مهمة تفعلها يومياً دون الحاجة إلى أن تذكر نفسك بها!

هناك الكثير من التطبيقات التي توفر كتابة المهام بهذه الطريقة توفرة كتطبيقات على سطح المكتب أو تطبيقات ويب، تجدها في أسفل الموضوع.

تخصيص مدة معينة لإنجاز المهمات

إن أعطيت شيء من وقتك ستجد نتائجه بالقدر الذي حددته، هذه الفكرة من الصعب تنفيذها لسبب بسيط وهو وجود الموعد النهائي للإنجاز، تذكر أني ذكرت أنها صعبة يعني أنها ليست مستحيلة وهي ممكنة ولكن هذا يعتمد عليك.

المزاج قد يكون متغير حسب الظرف الذي يمر فيه الشخص، هناك فرق بين أن تنفذ مهمة خاصة لك ومهمة خاصة لغيرك مثل عميل الخدمة التي تقدمها، بالطبع الثانية أصعب ومسؤوليتها قد تكون أكبر من الأولى. اما إذا كانت مهامك شخصية أو متعلقة بك مثل مشروع تملكه وتقوم بتنفيذه فهناك عدة فرص للإهمال!

لتفادي المماطلة في تنفيذ المهام وإهمالها هناك عدة نقاط أقترحها عليك:

• عمل تحدي مع النفس لإنجاز عدة مهام خلال فترة معينة أو مهمة واحدة وكبيرة خلال فترة معينة وكافيء نفسك على هذا الإنجاز.
• إيجاد الدافع، المادي و المعنوي أو أحدهما لتحقيق الإنجاز الذي تريده. وذلك لا يتم إلا بوضع الأهداف وتوقع النتيجة.
• تقسيم العمل إلى أجزاء، خاصة عند التعامل مع المشاريع الضخمة ولكن في نفس الوقت يمكنك فعل ذلك مع المشاريع الصغيرة وهذه الطريقة تساعدك على الإنجاز بوقت قصير.
• الكتابة عن المرحلة التي تمر فيها، مثل ممارسة التدوين والكتابة عن الإنجازات والإخفاقات وتلقي تعليقات مقترحة من القراء. (يجب أن تستثني الردود السلبية)
• إنحاز واحد كل شهر، يعني أن تنجز كل شهر هدف معين من الأهداف السنوية التي وضعتها. (إذا كنت تعتمد على نمط الأهداف السنوية)

تغيير طريقة العمل

تغيير طريقة العمل تساعد بشكل كبير في زيادة الإنتاجية وإنجاز المهمات، خاصة إذا زادت المسؤوليات والمهمات أكثر فهنا إذا كانت النتيجة الحالية سيئة يجب تغيير طريقة التعامل معها.

في إدارة الوقت هناك أنظمة أو تقنيات منهجية متوفرة وإستخداماتها مفيدة مثل:

• نظام GTD، إختصار لـ Getting Things Done.
• تقنية Pomodoro، وتعتمد على وقت محدد لكل إنجاز ( مثل 25 دقيقة لكل مهمة و5 دقائق راحة و15 إلى 20 دقيقة راحة لكل  4 مهمات) يمكن تعديل المسار حسب إحتياجاتك.

إستخدام أسلوب التعويض

إقتبست الفكرة من مفهوم التعويض في علم النفس وهو محاولة الفرد النجاح في ميدان لتعويض عجزه في ميدان آخر، وهي فكرة ليست إيجابية بعض الشيء ولكن للتوضيح أكثر نضعها نستخدمها في موضع آخر، مثل المهمة التي تتوقف فجأة وتنتظر فترة من الوقت وربما الوقت يكون مجهول! ولكنك في تقوم بإستغلال الوقت بدلاً من تضييعه في الإنتظار في تنفيذ مهمة أخرى إلى أن تكمل المهمة السابقة وهنا تنجح إستغلال وقتك بشيء مفيد.

أيضاً، تعوض فشلك في مهمة أو مشروع بنجاحك في مشروع آخر، وهذه هي النقطة الرئيسية للفكرة مع أنها قد تكون سلبية في رأي الآخرين.

تلميحات حول الإستفادة من الوقت

هناك عدة تلميحات حول الإستفادة من الوقت بشكل أفضل عند تنفيذ المهام التي تريدها، هذه قائمة ببعض الملاحظات حول ما ذكرت في الموضوع لتوضيح عملية كل واحدة منها:

إستعن بالله في أداء مهامك

التوفيق أولاً وأخيراً بيد الله، فأستعن بالله في كافة أعمالك وتنفيذ مهامك.

إستفد من الأخطاء

مهما عملت بهذه الأفكار أو بأفكار أخرى ستقع على الأقل في خطأ واحد، فكر دائماً كيفية تجنب الأخطاء التي تحصل عند تنفيذ مهامك، وللإستفادة أكثر اكتب قائمة بالأشياء التي تعيق العمل من التخطيط له إلى تنفيذه بالكامل، وتخلص منها بأسرع وقت!

تعامل مع المفاجآت!

في بعض الأحيان تصادف شيء إضطراري يجعلك تترك ما لديك وتذهب لتنفيذه. بالطبع هنا أقصد بالمفاجأت الأعمال/المواعيد/المهام الإضطرارية التي تأتيك (غالباً من أشخاص معينين) ويمكن أن تقطع هذه الأعمال المفاجأة الفترة التي حددتها لإنجاز عمل معين. هذا كانت الأشياء التي تفاجئك غير مهمة فلا تلقي لها بالاً إلا إذا خططت لها مسبقاً أو كنت متفرغ في وقتها.

إيجاد الفرص

بعض الأحيان هناك من الأشخاص من يعانون من فقدان جزء ضروري لتكملة مهمة معينة لهم سواء كان الجزئية المفقودة كبيرة أو صغيرة. هنا يجب أن تجد الفرصة المناسبة لإكمال الجزئية المفقودة وذلك في إيجاد حلول لها أنظر ما الذي متوفر لديك وكيف يمكن أن تستفيد منه في علاج المشكلة إلى أن تصل إلى الجزئية أو المرحلة التي تريدها.

تجاهل المحبطين

بعض الأحيان تمر بأشخاص لا تتدخل بعملهم ولكن تجدهم يتدخلون في شؤونك وسؤون الآخرين إلى درجة أنهم يزعجوك في مرة! وخاصة إذا رأيت شخص يظن أنه يريد مصلحتك ويعتبر ما تفعله شيء تافه أو غير مفيد فهذا أنصحك بتجاهله أو تجاهل كلامه ولا تجعله يفسد عملك.

أدوات تساعدك على تنظيم وقتك والإستفادة منه

أضع هنا أدوات لتنظيم الوقت عبارة عن تطبيقات سطح المكتب وتطبيقات ويب.

• Ta-da-List، أحد خدمات شركة 37signals وهي عبارة عن تطبيق ويب بسيط وواضح لكتابة المهام. ويمكن من خلاله كتابة أكثر من مجموعة قوائم ومشاركة المهام مع الإصدقاء.
• Remember the Milk، وهو تطبيق ويب لإدارة المهام يتيح لك تسجيل مهامك ضمن الأوسمة Tags والألسنة Tabs لتسهيل التصنيف والبحث عن المهام وهنا مزايا أخرى أيضاً.
• Doomi، تطبيق يعتمد على Adobe Air، فكرته كتابة المهمات على شكل To-do list مع تحديد الفترة بشكل بسيط وهو برنامج سهل ورائع.
• Google Tasks، أحد خدمات جوجل وهي مدمجة مع بريد Gmail أيضاً، تستطيع كتابة مهامك على نمط to-do-list بسهولة والتشطيب عليها وتوفر إمكانية إنشاء أكثر من قائمة للمهمات.
• Pomodairo، تطبيق آخر يعتمد على Adobe Air، ويستخدم تقنية Pomodoro في أداء المهام.

هل لديك أفكار أخرى؟ يمكنك عرض أفكارك حول التدوينة بكتابة تعليقك.

• إدارة التدوينات
• إدارة التعليقات
• إدارة الوسائط (الملفات المرفقة)
• إدارة الصفحات
• إدارة الروابط

إذا كان لدى المدونة عضو أو مجموعة أعضاء برتبة محرر يستطيعون إضافة وتحرير وحذف أي محتوى من القائمة السابقة، ماذا لو أن صاحب المدونة يريد إعطاء المحرر تصريح بإدارة جميع التدوينات فقط دون التدخل بالتعليقات والوسائط والصفحات والروابط؟ أو التدوينات والتعليقات فقط؟ أو أي من الإمكانيات التي يريدها للمحرر من إختياره؟ بهذه الإضافة تستطيع عمل تصريحات خاصة للمحررين بإختيار وتعطيل الإمكانيات المتاحة لهم بالشروط التي تختارها أنت كمدير للمدونة.

الإمكانيات المتوفرة التي تستطيع أن تنشيء بها تصريح خاص للمحرر بالطبع هي المذكورة القائمة السابقة، إذا تم تعطيل أي من الإمكانيات أو الإمكانيات المتاحة بالأساس للمحرر يتم إخفائها في القائمة الجانبية إضافةً إلى ذلك يتم منع الوصول إلى روابط قوائم الإمكانيات المعطلة.

إضافة ePermissions متوفرة باللغة العربية والإنجليزية معاً، بحيث إذا كانت نسخة الووردبريس باللغة العربية تكون الإضافة باللغة العربية وذلك ينطبق على اللغة الإنجليزية أيضاً. بالطبع حاولت أن أجعل كتابة الإضافة باللغة العربية والإنجليزية بأفضل صورة لدي إذا هناك أي ملاحظات أو أخطاء في هذا الجانب يمكنك مراسلتي لتجنبها في النسخة القادمة من الإضافة.

مميزات الرئيسية لإضافة ePermissions

هذه المميزات الرئيسية بشكل مختصر:

• إخفاء وإظهار الإمكانيات التي يتم إختيارها للمحرر في القائمة الجانبية.
• منع الوصول إلى روابط قوائم الإمكانيات الموجودة في القائمة الجانبية. (إذا كان لدى التصريح إمكانيات لرتبة المحرر وكانت هذه الإمكانيات معطلة في التصريح بحيث تكون ايضاً ممنوعة الوصول والظهور عبر القائمة الجانبية)
• تستطيع كتابة رسالة خاصة بالتصريح للأعضاء الذين تم توحيه التصريح لهم، والرسالة ستكون موجودة في أعلى صفحات الإدارة. (هذا الحقل إختياري وسأحاول أن أحسن شكل الشكل الحالي لرسالة التصريح)
• تستطيع فتح وإغلاق التصريح، والأعضاء المحررين الذين لديهم تصريح مغلق يستطيعون تصفح كافة الإمكانيات المتوفرة لهم.

صور لإضافة uPermissions

مجموعة صور للإضافة بداخل لوحة تحكم الووردبريس.

جدول التصريحات للمحررين

إضافة تصريح جديد

إختيار تصريح لأحد المحررين

صورة القائمة الجانبية للوحة تحكم أحد الأعضاء المحررين يحمل تصريح إدارة الوسائط والصفحات (يمكنه إدارة الملفات المرفقة وصفحات المدونة فقط)

لمن يريد أن يستعمل الإضافة، أرجو إبلاغي بأي خطأ أو ملاحظات حول الإصدارة الحالية أو إقتراحات لتحسين الإضافة في المستقبل حسب متطلبات أصحاب المدونات الجماعية فيما يتعلق بإمكانيات المحررين.

تحميل الإضافة

عبر صفحة إضافة ePermissions في موقع الووردبريس.

سبق أن طرحت عدة روابط وتوقفت عن نشر الروابط الخارجية، ولكن ستكون هذه الروابط المختارة من تويتر إستعادة لتدوينات الروابط التي كنت أكتبها سابقاَ ولكن بشكل مختلف قليلاً وأن تكون المختارات مفيدة وفريدة.

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

47Amazing CSS3 Animation Demos

يعرض 47 مثال مدهش عن الحركة في CSS3.

Haiti: 360°

شاهد هاييتي بتقنية 360°

Underwater bomb explosion

مشهد عن لانفجار قنبلة تحت الماء، تصفح المشاهد الأخرى الموجودة مع هذا المشهد، فهي رائعة بالفعل.

What to Expect in 2010: UX/UI Design Simplicity

توقعات عام 2010 فيما يخص بساطة التصميم في تجربة المستخدم وواجهة المستخدم أو ما يسمى UX/UI.

كيف توظف المصمم/المطور المناسب

تطبيقات عربية بدأت في اللمعان

ألف وواحد اختراع إسلامي يحيا عليها العالم

دعوة لحضور مراسم دفن IE6

برنامج Trapster لتحديد مواقع الرادارات المرورية للآيفون

في هذا الموضوع سأتحدث عن كيفية عمل التوافق مع متصفحات الويب بإستخدام مكتبة jQuery سواء كان في خصائص CSS أو التأكد من تحديث إصدار المتصفح أو أي شيء آخر، لدينا خاصيتين في هذه المكتبة وسنشرح كل واحدة منها.

• مثال على الدرس
• تحميل المرفقات

خاصية browser

تحتوي خاصية browser على معلومات حول المتصفح الجاري حالياً (المشغل من قبل المستخدم)، والقيمة المرجعه له هي الأعلام المنطقية أو ما يسمى Boolean flags لكل وكيل مستخدم محتمل (متصفح ويب).

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

$.browser

من خلال إستخدام خاصية browser سنتمكن من كشف المتصفح الحالي للمستخدم مع تمرير الأعلام Flags وهي عبارة عن أسماء المتصفحات السائدة لدينا كما ذكرت مثل Opera ،Safari ،Mozilla و Internet Explorer.

طريقة إستخدام الخاصية عبر طرق jQuery أخرى

يمكن إستخدام خاصية browser عبر طرق jQuery أخرى، لو أردنا معرفة المتصفح الحالي للمستخدم بإرجاع إما قيمة true أو false يمكن أن نستخدم طريقة each على سبيل المثال، بهذه الطريقة:

 $(function(){
     jQuery.each(jQuery.browser,function(i, val){
         $("<div>" + i + " : <span>" + val + "</span></div>").appendTo(document.body);
     });
 });

لو كنا نستخدم متصفح Safari أو متصفح آخر يستخدم محرك webkit مثل Google Chrome سنتظهر لدينا النتيجة كما توضح الصورة:

وهذا إستخدام آخر بدالة log بإستخدام متغير console الموجود في إضافة Firebug:

 $(function(){
     console.log('Mozilla: ' + $.browser.mozilla)
     console.log('Safari: ' + $.browser.safari)
     console.log('Opera: ' + $.browser.opera)
     console.log('MEIE: ' + $.browser.msie);
 });

يمكن رؤية النتيجة بإستخدام إضافة Firebug الموجودة في متصفح Firefox.

بإستخدامك خاصية browser يمكن التعامل مع المتصفحات بشكل عام عبر هذه الأعلام التي ستضيفها للخاصية:

• safari
• opera
• msie
• mozilla
• webkit (أضيف في jQuery 1.4)

معرفة رقم الإصدار

يمكنك معرفة إصدار المتصفح بإستخدام خاصية browser عن طريق خاصية version، إستخدام هذه الخاصية يكون بهذه الطريقة:

$.browser.version

مثال: تستطيع إظهار رسالة لمستخدمي متصفح Firefox بأن يحدثوا متصفحهم إذا كانوا يستخدمون الإصدار الأول أو الثاني من متصفح Firefox، عبر هذه الشفرة:

 $(function(){
     if($.browser.mozilla & $.browser.version < '1.9') {
         $('.alert').show().html('<p>You should update your Firefox browser.</p>');
     }
 });

مثال عملي على خاصية browser

مثال عملي بسيط على إستخدام خاصية browser قبل إنهاء الدرس، وهو إظهار رسالة بإسم المتصفح أو المحرك المستخدم إضافة إلى الإصدار الحالي منه، شفرة HTML:

<div id="ie">
 <p>You are using <strong>Internet Explorer</strong> version <strong></strong>.</p>
</div>

<div id="mozilla">
 <p>You are using <strong>Mozille</strong> version <strong></strong>.</p>
</div>

<div id="webkit">
 <p>You are using <strong>Safari</strong> version <strong></strong>.</p>
</div>

<div id="opera">
 <p>You are using <strong>Opera</strong> version <strong></strong>.</p>
</div>

شفرة CSS:

.alert {
     display: none;
     margin: 10px auto;
     width: 90%;
     background-color: #d3d3d3;
}
.alert p {
     padding: 5px;
     font: 14px tahoma;
     color: #5c5d5e;
}

الآن نأتي لشفرة Javascript لكتابة إسم المتصفح والإصدار الحالي عن طريق خاصية browser بإستخدام مكتبة jQuery بالطبع، ستكون الشفرة الأخيرة بهذه الطريقة:

 $(function(){
     if($.browser.mozilla) {
         $('#mozilla').show();
         $('.ver').html($.browser.version);
     }
     else if ($.browser.msie) {
         $('#ie').show();
         $('.ver').html($.browser.version);
     }
     else if ($.browser.webkit) {
         $('#webkit').show();
         $('.ver').html($.browser.version);
     }
     else if ($.browser.opera) {
         $('#opera').show();
         $('.ver').html($.browser.version);
     }
 });

وبعدها تستطيع التأكد من نوع المتصفح وإصداره كما تظهر هذه الصورة للمتصفحات الأربع التي لدي:

جميع الأمثلة المكتوبة موجودة في المرفقات.

• مثال على الدرس
• تحميل المرفقات

لدي بعض المتفرقات السريعة حول المدونة ،منها ما حدث خلال الشهر الجاري حول كتابة المواضيع، أيضاً حول إضافة جديدة سأنتهي منها قبل نهاية الشهر إن شاء الله لأكمل ما خططت له في هذه المدونة خلال هذا شهر فبراير.

مشاركة في مدونات أخرى

شاركت في مدونة قص ولصق في مقال حول تحويل تصميم من PSD إلى HTML، وهي ليست المرة الأولى التي أشارك فيها كمدون ضيف ولكن أتمنى أن يستفيد منها الباحثين عن مثل هذه الدروس وحاولت أشرح فيها تفاصيل أكثر حول عملية التحويل.

كتابة معظم مواضيع سلسلة الأجاكس بسهولة

أكملت معظم المواضيع الخاصة بسلسلة الأجاكس بسهولة (5 مواضيع كتبت حتى الآن)، وخلال الجزء الثاني من السلسلة شرحت التعامل مع الأجاكس في مكتبة jQuery والتعامل مع الأجاكس في مكتبة MooTools و سأرى إن كان هناك إمكانية إكتمال الجزء الثاني أكثر بعرض مكتبات أخرى أو الدخول في الجزء الثالث مباشرة حول مصادر السلسلة.

إضافة ووردبريس جديدة

سأكتب موضوع في الأيام القادمة حول إضافة ووردبريس جديدة أنشأتها وتبقى القليل لإكمالها وهي تساعد مدير أي مدونة جماعية لديه مجموعة أعضاء من رتبة محرر (Editor role) في إمكانية تقسيم قدرات الأعضاء الذين يحملون رتبة المحرر وهي إدارة التدوينات، الصفحات، الروابط، الوسائط والتعليقات بحيث يمكن إتاحة أو تعطيل بعضها للمحرر (إذا أردت مثلاً محرر خاص لإدارة التعليقات فقط بدون إدارة التدوينات والوسائط والصفحات) بإضافة تصريحات عن طريق الإضافة وإختيار التصريحات عبر صفحة العضو.

ولا يمكن تعطيل كافة القدرات لأنه يمكن تعطيلها بإعطاء العضو رتبة أقل مثل ‘مشارك’ أو ‘مساهم’ فلماذا يكون العضو محرر وجميع القدرات معطلة لديه! .. المزيد من التفاصيل ستكون في الموضوع خاص للإضافة مع إمكانية تحميلها.

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

• مثال على الدرس
• تحميل المرفقات

الأجاكس في مكتبة MooTools

في مكتبة MooTools سنتعرف على كتابة الأجاكس عن طريق كائن Request وطرق مختصرة أخرى لإرسال المتغيرات مع طريقة send العامة، قبل ذلك نجهز أساسيات المثال المعد لهذا الدرس ثم ندخل في بقية التفاصيل.

كائن Request

كائن Request في مكتبة MooTools هو المسؤول عن عملية إرسال وإستقبال البيانات من الخادم إلى الصفحة عن طريق الاجاكس، كتابة الكائن تكون بهذه الطريقة:

new Request(options);

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

var myRequest = new Request({
     url: '/reqHandler.php'.
     method: 'get'.
     onSuccess: function(response) {
         alert(response);
     }
});

إستخدمنا حدث onSuccess ويستخدم هذا الحدث عند نجاح العملية وتوجد أحداث كثيرة تستطيع التعامل معها ضمن الكائن Request وأضعها في هذه القائمة:

• onSuccess: هذا الحدث يتم عندما تكون الإستجابة ناجحة لإستقبال البيانات من الخادم.
• onFailure: هذا الحدث يتم عندما تكون الإستجابة غير ناجحة (فاشلة) لإستقبال البيانات من الخادم. (مثل خطا 404)
• onCancel: هذا الحدث يتم عندما تكون الإستجابة الطلب ملغية. (إلغاء العملية)
• onException: هذا الحدث يتم عندما يكون هناك إستثناء عند وضع خيار رأس الكائن XMLHttpResponse.
• onRequest: هذا الحدث يتم عندما يكون في وقت إرسال الطلب لإستقبال البيانات.
• onComplete: هذا الحدث يتم عند حدوث نجاح أو فشل للعملية كاملة (بإستخدام onSuccess أو onFailure) أي بعد إتمام الطلب كامل.

طرق إرسال المتغيرات

بعد أن كتابة كائن Request والأحداث المطلوبة لن ترسل المتغيرات التي كتبتها حتى تُرسل لإستدعاء البيانات من الخادم وذلك عبر طريقة أو دالة send، ومهمتها إرسال الطلب إلى الخادم، طريقة إستخدامها تكون بهذا الشكل:

myRequest.send();

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

myRequest.send('username=mobde3net&email=mobde3net@gmail.com');

myRequest.send({
     username: 'mobde3net',
     email: 'mobde3net@gmail.com'
});

تلاحظ الفرق البسيط في الطريقتين في كتابة المتغيرات، وهذا إختياري إذ يمكنك إرسال المتغيرات ضمن كائن myRequest قبل تنفيذ الطريقة send.

طرق أخرى لإرسال الطلب إلى الخادم

كائن Request يوفر طرق مختصرة لإرسال البيانات مثل طريقة send، وتمثل الطرق أسماء نوع الطلب أو طريقة الطلب مثل get،post،put،delete .. يمكن إرسال الطلب بهذا الشكل إذا إستخدمنا الطرق المذكورة في هذه الفقرة:

// get إرسال الطلب بطريقة
myRequest.get({ username: 'mobde3net' });
// post إرسال الطلب بطريقة
myRequest.post({ username: 'mobde3net' });
// put إرسال الطلب بطريقة
myRequest.put({ username: 'mobde3net' });
// delete إرسال الطلب بطريقة
myRequest.delete({ username: 'mobde3net' });

إرسال المتغيرات عن طريق إعداد العنصر

يمكن إرسال طلب جديد عن طريق عنصر محدد مباشرة دون إنشاء كائن Request، فمكتبة MooTools توفر إختصارات عند التعامل مع العنصر Element وهي خاصة عند التعامل مع حقل input ضمن نموذج HTML، لإرسال طلب مباشرة عن طريق عنصر form مثلاً تكون التركيبة بهذه الطريقة:

$('form').send(url);

في مثال بسيط، إذا أردنا إرسال طلب إلى الخادم عن طريق نموذج HTML، وكان رابط النموذج (قيمة خاصية action في وسم form) موجود يمكن أن نمنع النموذج من المواصلة وبدلاً من الذهاب إلى رابط آخر نقوم بإرسال طلب إلى الخادم بإضافة أو إستدعاء بيانات.

في مكتبة MooTools هناك طرق للتعامل مع العناصر مثل طريقة set أو get وتستخدم الأولى على سبيل المثال في تعديل أو إضافة عدة أشياء مثل تعديل خصائص CSS أو إضافة شفرة HTML مباشرة داخل العنصر أما الثانية لأخذ أشياء أخرى من العنصر كخصائص الوسم (Attributes) وهكذا، يمكن إستعمال المحرف send مع طريقة set وهو يقوم بنفس عمل طريقة send في كائن Request، كما يوضح المثال البسيط التالي:

$('form').set('send', {
     // في حال نجاح إستجابة الطلب
     onSuccess: function(response){
             alert(response);
     }
}).addEvent('submit', function(event){
     event.preventDefault(); // لمنع المتصفح من الإنتقال إلى رابط النموذج
     this.send(); // action إرسال الطلب وأخذ رابط النموذج من خاصية
});

مثال عملي على إستخدام الأجاكس في مكتبة MooTools

سنطبق ما تعلمناه كما في المثال العملي الموجود في الجزء الثالث من كتابة الأجاكس في Javascript وسنستخدم نفس المثال ولكن بإستخدام مكتبة MooTools بدلاً من كتابة الأجاكس من الصفر، يجب تحميل مكتبة MooTools قبل البدأ بتطبيق المثال أو أن تكون لديك مرفقة في الجهاز أو الموقع.

صفحة HTML ستكون مثل ما هي التي كتبناها في المثال العلمي خلال الجزء الثالث من كتابة الأجاكس في Javascript، وهذه شفرة HTML لهذا الدرس ( مع إستخدام لغة PHP لإستدعاء السنوات المسجلة في قاعدة البيانات في الحقل):

<?php
$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db($table, $connect);
if (!$connect) { die('Could not connect: ' . mysql_error()); }
mysql_query("set charset UTF8");
?>

<div id="form">
     <p>تطبيق بسيط يطرح حدث معين مرتبط بالسنة التي يضعها الزائر.</p>
     <form method="GET">
     <p>إختر السنة التي تم فيها الحدث
         <select name="year">
         <option selected="selected">إختر السنة</option>

         <?php
         $result2 = mysql_query("SELECT * FROM events WHERE event_cloned = 'N' ORDER BY event_year DESC");
         while($row = mysql_fetch_array($result2)) {
         echo '<option value="'.$row['event_year'].'">'.$row['event_year'].'</option>';
         }
         ?>

         </select>

     </p>
 </form>
 </div>

<div id="content"> </div>

التغييرات التي سنشاهدها في الصفحة ستكون عن طريق عنصر div الذي يحمل الصنف content# ، نفس الشيء لملف query.php (الملف الذي يستقبل متغيرات الصفحة للتعامل مع قاعدة البيانات في إستدعاء البيانات المطلوبة لصفحة HTML)، ليس هناك تغييرات في ملف PHP:

<?php

// شفرة الإتصال بقاعدة البيانات
$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db('test', $connect);
mysql_query("set charset UTF8");
if (!$connect) { die('لم يتم الإتصال: ' . mysql_error()); }

// تعريف المتغير event_year
// ولإستقبال هذا المتغير في إكمال الإتصال بالأجاكس
if($_GET['year']) {
     $event_year = $_GET['year'];
     $result = mysql_query("SELECT * FROM events WHERE event_year = '$event_year'");

     // عرض المعلومات من قاعدة بيانات بإستخدام التكرار
     // وبواسطة الدالة while
     while($row=mysql_fetch_array($result)) {
         echo '<div><h2>'.$row['event_name'].'</h2>';
         echo '<p>'.$row['event_description'].' <span>(تاريخ '.$row['event_date'].')</span></p>';
         echo '</div>';
     }
}
?>

كتابة الأجاكس في مكتبة MooTools

سأضع شفرة Javascript الخاصة بمكتبة MooTools، التطبيق سيكون بإستخدام كائن Request وشرحناه في الأعلى:

window.addEvent('domready',function(){
    var ajax_load = '<span class="loading">Loading</span>';
    var contentElement = $('content');

    $$('.year').addEvent('change',function(){
        var getCurYear = this.get('value');
        var req = new Request({
            method: 'get',
            url: 'query.php',
            data: { year : getCurYear },
            onRequest: function() {
                contentElement.set('html',ajax_load);
            },
            onComplete: function(response) {
                contentElement.set('html',response).setStyle('opacity', '0');
                var FxElement = new Fx.Tween(contentElement,{property: 'opacity', duration: '900'});
                FxElement.start('0','1');
            }
        }).send();
    });
});

سأشرح ما تم كتابته في الشفرة السابقة على هذه القوائم:

• السطر 1: إضافة حدث domready قبل بداية التعامل مع مكتبة MooTools.
• السطر 2: كتابة متغير خاص لمقطع التحميل (صورة التحميل).
• السطر 3: كتابة متغير خاص بعنصر content#.
• السطر 5: إضافة حدث change للعنصر الذي يحمل الصنف year. (عنصر الإختيارات أو الوسم select)
• السطر 6: كتابة متغير يشير إلى القيمة الحالية لعنصر الإختيارات.
• السطر 7: متغير جديد لكتابة كائن Request.
• السطر 8: إشارة إلى طريقة الطلب أو نوع الطلب، إخترنا الطريقة GET.
• السطر 9: إشارة إلى عنوان الطلب.
• السطر 10: إشارة إلى البيانات، هنا نكتب المتغيرات التي سترسل مع الطلب بواسطة طريقة send.
• السطر 11: حدث onRequest، أي أنه أثناء حدوث الطلب ونضع فيه مقطع التحميل قبل إستدعاء البيانات وهو موجود في السطر 12.
• السطر 14: حدث onComplete، يستخدم كما ذكرنا في حالة إكتمال الطلب ونستخدم عند كتابة الدالة متغير response ويحتوي على البيانات المستدعاه من الخادم.
• السطر 19: إستخدام الطريقة send بعد الطلب لإرساله إلى الخادم.

الآن شرحنا الأجزاء الرئيسية لكتابة الأجاكس، بالنسبة لمحتويات الحدث onComplete فضلت شرحها بشكل منفصل وإستخدمناه فيها كائن Fx الخاص بالمؤثرات في مكتبة MooTools ، هنا شرح بقية السطور:

• السطر 15: وضع محتويات المتغير response ضمن عنصر content#، وإشارة خاصيةopacity فيه إلى الصفر. (قبل عمل التأثير)
• السطر 16: متغير FxElement ونكتب فيه كائن Fx ونستخدم تأثير Tween للمتغير contentElement (عنصر content#) في التحكم بخاصية opacity ومع كتابة مدة التأثير وأشرنا إلى أن التأثير مدته 900 جزء من الألف من الثانية.
• السطر 17: إستخدام طريقة أو دالة start في تحويل القيمة خاصية opacity من 0 إلى 1 وهنا تكون مدة التحويل هي المدة التي حددناها في السطر السابق 900 جزء من الألف من الثانية (duration: 900).

سطور التأثيرات ليس لها دخل في الأجاكس، ولكن أحببنا إستخدامها إضافة عليها فقط.

• مثال على الدرس
• تحميل المرفقات

اليوم سوف نتعرف على كيفية عمل قائمة ألسنة Tabs بإستخدام مكتبة jQuery وتأتي الألسنة بشكل أفقي وتحتها يكون صندوق المحتويات، وبنفس أسلوب درس القوائم المنزلقة سوف أشرح الدرس بإستخدام الصور لطرح فكرة الدرس.

• مثال على الدرس
• تحميل المرفقات

تركيبة القائمة

القوائم التي سأصممها على شكل ألسنة أو Tabs تكون أفقية وفي العادة نجدها إما في القائمة الجانبية لتصفح أجزاء من القائمة الجانبية وإخفاء الباقي كالروابط أو الأقسام أو ما شابه ويمكن أن تكون قائمة التصفح الرئيسية التي تحتوى على الروابط المهمة ويتم تصفح محتويات الموقع عن طريقها بدلاً من تحديث الصفحة دائماً.

هذه الصورة تمثل قائمة الألسنة التي سنبدأ بها وتمثل الشكل الخارجي الرئيسي:

أما هذه الصورة تبين جميع المحتويات التي سوف تظهر بعد الضغط على أحد الألسنة التي فوق هذه المحتويات، وسيتم إخفائها وإظهار أحدها في حال الضغط على أحد الألسنة المرتبطة بأي محتوى من المحتويات المعروضة:

الآن نأتي إلى تشريح القائمة بشكل سريع عن طريق إظهار الأصناف التي سنستخدمها في تقنية CSS، علماً بأن تركيبة HTML ستكون بإستخدام وسم القوائم li للألسنة ووسم div لمحتوى القائمة الواحدة ووسم div آخر يجمع المحتويات كلها لكي يكون ثابت على إرتفاع واحد:

شفرة HTML

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

<div id="tabs">
	<ul id="nav">
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
 	<div id="content">
		<div id="slide-1" style="display: block">
			..
		</div>

		<div id="slide-2">
			..
		</div>

		<div id="slide-3">
			..
		</div>
	</div>
</div>

بعد إضافة الأشياء التي نريدها من قوائم الألسنة ومحتوياتها ستكون محتويات الألسنة مخفية ما عدى واحدة نختارها ستكون مفتوحة في البداية وبعدها يتنقل المستخدم إلى أي قائمة ويختفي المحتوى الخاص بالقائمة أو اللسان السابق السابقة، ونرى كيف سيكون تنسيق الشكل بتقنية CSS بعد ذلك:

<div id="tabs">
    <ul id="nav">
        <li><a id="tab-1" href="#">آخر الأخبار</a></li>
        <li><a id="tab-2" href="#">خلاصات</a></li>
        <li><a id="tab-3" href="#">أشياء أخرى</a></li>
    </ul>
    <div id="content">
        <div id="slide-1" style="display: block">
            <ul>
            <li><a href="http://www.mubde3.net/blog/archives/motafarekat-blog-4">متفرقات حول المدونة #4</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/motafarekat-blog-3">متفرقات حول المدونة #3</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/motafarekat-blog-2">متفرقات حول المدونة #2</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/motafarekat-blog-1">متفرقات حول المدونة #1</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/links-5-4-2009">روابط .. 5 إبريل 2009 ..</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/links-27-3-2009">روابط .. 27 مارس 2009 ..</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/links-21-3-2009">روابط .. 21 مارس 2009 ..</a></li>
            </ul>
        </div>

        <div id="slide-2">
            <ul>
            <li><a href="http://www.mubde3.net/blog/archives/ajax-easily">الأجاكس بسهولة</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/the-best-of-2009-posts-from-several-blogs">أفضل مواضيع لعام 2009 من عدة مدونات</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/5-methods-for-actual-benefiting-from-blogging">5 طرق للإستفادة الفعلية من التدوين</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/principles-of-design">مبادئ التصميم الستة</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/the-future-of-arabic-forums">وضع المنتديات العربية</a></li>
            <li><a href="http://www.mubde3.net/blog/archives/more-details-about-html-forms">تفاصيل أكثر عن نماذج HTML</a></li>
            </ul>
        </div>

        <div id="slide-3">
            <p>مدونة تحتوي على مواضيع متخصصة بالتقنية والأخص في تطوير المواقع والتصميم ومواضيع متفرقة لها علاقة بهذه التخصصات أو قريبة منها.</p>
            <p>نبذه عن <strong>مدونة مبدع</strong> في الفقرة السابقة.</p>
        </div>
    </div>
</div>

شفرة CSS

الصنف الرئيسي الذي سيضم القائمة الرئيسية لكل الألسنة وهو tabs# وسيتم تنسيق جميع الأصناف عن طريق هذا الصنف ويمكنك الإستغناء عنه لأنه غير مهم كثيراً، سأضع الأصناف التي سنستخدمها على شكل قائمة لكي يسهل معرفة فائدة إستخدامها أو غرض إستخدامها:

• nav#، صنف خاص للألسنة التي ستكون على شكل أفقي وستحتوي على وسم القوائم li.
• current.، صنف خاص لتمثيل القائمة الحالية (التي تم الضغط عليها والمختاره من قبل المستخدم) وستكون للقائمة التي تظهر اول مرة عند فتح الصفحة.
• content#، صنف خاص لضم المحتويات الخاصة بالألسنة بحيث هو يكون العنصر الأب لهم.
• tab-slide.، صنف يمثل محتوى كل قائمة سيتم إخفاء القوائم وإظهارها عن طريق هذا الصنف.
• tab-list.، صنف خاص بالوسم ul (للقوائم) وعنصر أب لوسم li.

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

• tab-1#، #tab-2، #tab-3، أرقام الألسنة الحالية المعروضة.
• slide-1# ،#slide-1 ،#slide-1، أرقام المحتويات المخفية أو الظاهرة. (ستكون مربوطة برقم اللسان أو tab لأستخدامها لاحقاً في jQuery كما ذكرنا)

الآن نأتي لعرض شفرة CSS المجهزة:

#tabs {
 width: 250px;
}
#tabs #content  {
 background-color: #e3e3e3;
}
#tabs #nav {
 float: right;
 width: 250px;
 border-bottom: 1px solid #5f5f5f;
}
#tabs #nav li {
 padding: 0;
 float: right;
 margin: 1px 0 -1px 3px;
 background: #e3e3e3 url(top-gra.png) repeat-x top;
}
#tabs #nav li a {
 padding: 7px 10px;
 display: block;
 font: bold 15px arial;
 color: #454545;
 border: 1px solid #5f5f5f;
}
#tabs #nav li a.current {
 border-bottom: 1px solid #e3e3e3;
}
#tabs #content {
 padding: 10px;
 clear: right;
 text-align: right;
 min-height: 240px;
 border: 1px solid #5f5f5f;
 border-top: 0;
 -moz-border-radius-bottomleft: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-radius-bottomleft: 4px;
 -webkit-border-bottom-right-radius: 4px;
 -webkit-border-bottom-left-radius: 4px;
}
#tabs #content .tab-slide { display: none; }
#tabs #content .tab-slide .tab-list li {
 margin: 1px 0;
 padding: 5px 0;
 border-bottom: 1px solid #7c7c7c;
 font: 13px tahoma;
 line-height: 22px;
}
#tabs #content .tab-slide p {
 margin: 0 0 10px;
 padding: 0;
 font: 13px tahoma;
 line-height: 22px;
}
#tabs #content .tab-slide a {
 color: #353433;
}
#tabs #content .tab-slide a:hover {
 color: #000000;
}

إستخدام مكتبة jQuery في عمل تأثيرات على القوائم

نأتي إلى جزء أساسي من درسنا وهو إستخدام مكتبة jQuery في تكملة عمل الشكل، لدينا شكلين أحدهم سريع والثاني بسرعة ملاحظة، المهم هو هو طريقة العمل.

كنت سأضع إثنين من الأشكال ولكن سأكتفي بواحد لأن لا فرق بينهما إلا في ملاحظة سرعة تحول المحتوى إلى محتوى آخر، في البداية ستكون محتويات الألسنة غير ملاحظة وهي عادية كأن تضغط على أحد الألسنة ولا تشاعد سرعة تنقل محتوياته في أسفله،  أي أننا لم نحدد سرعة معينة.

خلال الشفرة التالية ستشاهد تكملة الدرس، وسترى وصف الشفرة بعدها مباشرة:

$(function(){
     $('#tabs #nav li a').click(function(){
         var currentNum = $(this).attr('id').slice(-1);
         $('#tabs #nav li a').removeClass('current');
         $(this).addClass('current');

         $('#tabs #content .tab-slide').hide();
         $('#tabs #content #slide-'+currentNum+'.tab-slide').show();
     });
});

سأضع وصف الشفرة السابقة عبر هذه القائمة:

• السطر 2: تنفيذ أوامر في حال الضغط على رابط أياً من الألسنة الموجودة بإستخدام الحدث click.
• السطر 3: أخذ رقم الرابط الحالي والموجود في خاصية id في الوسم a.
• السطر 4: حذف الصنف current (لإظهار اللسان الحالي) من جميع روابط الألسنة.
• السطر 5: إضافة الصنف current إلى رابط اللسان الخاص بالرابط الحالي (الرابط المضغوط من قبل المستخدم)
• السطر 7: إخفاء جميع محتويات الألسنة.
• السطر 8: إظهار محتوى اللسان الحالي وبإستخدام رقم اللسان الذي تم ضغطه.

عرضنا في شفرة javascript السابقة طريقة إظهار وإخفاء الألسنة ومحتوياتها بإستخدام jQuery، تلاحظ في الشفرة السابقة أن التطبيق يكون بدون سرعة ملاحظة أو إستخدام تأثيرات غير show وhide تستطيع وضع سرعة محددة بإدخال millisecond وهي تساوي جزء من ألف جزء من الثانية لأي تأثير حتى التأثيرات التي إستخدناها show وhide مثل هذا التعديل (تعديل على الشفرة السابقة بظهور وإخفاء ملاحظ):

$('#tabs #content .tab-slide').hide(300);
$('#tabs #content #slide-'+currentNum+'.tab-slide').show(300);

يمكن إستخدام تأثيرات أخرى مثل slideUp و slideDown ، ستجد مثال بإستخدام هذين التأثيرين مع المثال المرفق ويمكنك كتابته مثل أي تأثيرات jQuery أخرى وهذا أيضاً تعديل على الشفرة الرئيسية التي كتبناها وفي السطر 7 و 8 بالتحديد:

$('#tabs #content .tab-slide').slideUp(300);
$('#tabs #content #slide-'+currentNum+'.tab-slide').slideDown(300);

إضافات jQuery

وبالأمكان الإعتماد على إضافات توفر عليك الوقت في عمل مثل هذه القوائم، بالنسبة لشكل الألسنة التي يتم تصفحها بشكل أفقي فتوجد إضافات لذلك وخاصة في المكتبات التي تعتمد على مكتبة jQuery وهي تهدف إلى تحسين واجهة المستخدم وهي التي شرحتها أيضاً في درس القوائم المنزلقة، إنها مكتبة jQuery Tools و jQuery UI.

كلا المكتبتين تحتوي على الأمثلة مع مصادرها بحيث تستطيع معرفة كيفية إستخدامها وعمل مثل هذه الأشكال، إضافةً إلى أكثر من مثال على عمل الأشكال التي شرحناها، بالنسبة لمكتبة jQuery UI ستجد في قسم Widgets مثال للألسنة Tabs خلال تصفحك لوثائق مكتبة jQuery UI.

أما مكتبة jQuery Tools فستجد عدة أمثلة وهي مكتبة رائعة عموماً، من خلال صفحة الأمثلة ستجد أمثلة Tabs بين الأمثلة الأخرى وقسم Tabs به أكثر من 10 أمثلة.

• مثال على الدرس
• تحميل المرفقات

هذا الدرس يشرح كيفية عمل قائمة منزلقة بإستخدام مكتبة jQuery بسهولة وبشكل عمودي وسأستخدم صور سريعة لطرح فكرة الدرس، قبل أيام عرضت عدة مصادر سريعة حول مكتبة jQuery بدلاً من كتابة تفاصيل تجدها بسهولة عند بحثك في جوجل أو حتى طريقة عمل هذا الدرس.

• مثال على الدرس
• تحميل المرفقات

إعتماد الدرس كما ذكرت سيكون على مكتبة jQuery ويمكن أن تكون بداية لكتابة دروس حول هذه المكتبة ولكن بالطرح الذي أراه مناسب للمستفيدين من المدونة.

تركيبة القائمة

القوائم التي سأصممها ستكون أشكالها عمودية وهي عادة نجدها في القائمة الجانبية عند تصفح المواقع، الشكل الذي اعتمدت عليه في تصميم القائمة موضحة الصورة التالية:

وهذه الصورة تبين جميع القوائم مفتوحة قبل أن أشرح تركيبها وهذا سيفيدنا أثناء كتابة شفرة HTML و CSS:

سأضع صورة وهي عبارة عن تصوّر لشكل القائمة وأشرح بها أوسمة HTML وأصناف CSS لتتضح الصورة أكثر بهذا الشكل:

شفرة HTML

نضع شفرة HTML قبل محتويات القائمة للتأكد من التصوّر الذي وضعناه في النقطة السابقة، أي بدون العناوين والنصوص:

 <!-- box-slide -->
 <div id="box-slide">

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

     <!-- box-content -->
     <div class="box-content">
         <div class="title"> .. </div>
         <div class="contain"> .. </div>
     </div>
     <!-- /box-content -->

 </div>
 <!-- /box-slide -->

بعد إضافة العناوين والنصوص، سيكون محتوى الصندوق والذي سيحتوي على النصوص أو القوائم على سبيل المثال مخفي في جميع الأشكال التي سنضعها في الأمثلة وسنبين ذلك عند تنسيق الشكل بتقنية CSS:

 <!-- box-slide -->
 <div id="box-slide">

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الأولى</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الأولى، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الثانية</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الثانية، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الثالثة</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الثالثة، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 <!-- box-content -->
     <div class="box-content">
         <div class="title"><h3><a href="#">القائمة الرابعة</a></h3></div>
         <div class="contain"><p>مكان القائمة أو النصوص الخاصة بالقائمة الرابعة، يمكنك إضافة المزيد.</p></div>
     </div>
 <!-- /box-content -->

 </div>
 <!-- /box-slide -->

تنسيق CSS

الأصناف التي سيتم تنسيقها في شفرة CSS التالية هي box-slide# ويحتوي على جميع القوائم وهو ليس مهم بالدرجة الكبيرة، أما box-content. فيحتوي على مجموعة واحدة من العنوان والمحتوى الدال عليه، وبالنسبة للصنف title. فهو للعنوان و contain. لمحتوى القائمة الواحدة.

بالطبع هناك إضافات خاصة بأشكال القوائم مثل الصنف current. وهو للعنوان الذي تم الضغط عليه (خاص بأحد أشكال القوائم الموجودة في الأسفل) والصنف hide. لإخفاء محتوى القائمة وهو أيضاً أحد الأصناف التي سنستعملها في شكل من الأشكال، هذه الشفرة المجهزة للدرس:

 #box-slide{
     margin: 10px auto;
     width: 250px;
     text-align: right;
 }

 .box-content .title {
     margin: 1px 0 0;
     padding: 1.5px 5px 1px;
     width: 250px;
     height: 26px;
     -moz-border-radius-topleft: 7px;
     -moz-border-radius-topright: 7px;
     -moz-border-radius-bottomleft: 2px;
     -moz-border-radius-bottomright: 2px;
     -webkit-border-top-left-radius: 7px;
     -webkit-border-top-right-radius: 7px;
     -webkit-border-bottom-left-radius: 2px;
     -webkit-border-bottom-right-radius: 2px;
     background: #c5c5c5 url(box-light.png) repeat-x top;
 }
 .box-content .title h3 {
     margin: 0;
     padding: 4px 5px;
     font: bold 15px "Times New Roman";
     color: #353232;
 }
 .box-content .title h3 a {
     padding: 5px 0;
     color: #353232;
 }
 .box-content .title h3 a:hover {
     color: #ffffff;
 }
 .box-content .title.current {
     background-color: #5f5f5f;
 }
 .box-content .title.current h3 a {
     color: #fff;
 }
 .box-content .contain {
     margin: 1px 0 0;
     padding: 5px 5px;
     width: 248px;
     display: none;
     border: 1px solid #5f5f5f;
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
 }
 .box-content .contain p {
     font: 13px tahoma;
     color: #383737;
 }
 #box-slide .box-content .contain {
     border-color: #909090;
 }
 #box-slide .box-content .contain .hide { display: none; }

إستخدام مكتبة jQuery في عمل تأثيرات على القوائم

الآن نأتي لجزء التأثيرات وباستخدام مكتبة jQuery، قسمنا الأمثلة إلى ثلاثة سأشرح كل منها وشفرة Javascript الخاصة بها.

الشكل الأول: بسيط وعادي

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

$(function(){
 $('#box-slide .box-content .title').click(function(){
 $(this).next().slideToggle(0);
 });
});

في الشفرة السابقة كان الإستخدام عادي جداً وسهل أيضاً بحيث يتم الضغط على عنوان القائمة فيظهر محتواها، في السطر الثالث حددنا الصنف الحالي الذي تم ضغطه وهو title. ثم العنصر الذي بعده وهو محتواه بإستخدام الخاصية next وبعد ذلك إستخدمنا تاثير slideToggle وهو للإنزلاق التبادلي مع كل حدث.

الشكل الثاني: ملاحظة الفتح والإغلاق

الشكل الثاني سيكون نفس الشكل السابق ولكن مع ملاحظة تأثير الإنزلاق أي أنه تغيير في السرعة في تأثير slideToggle إلى السرعة التي نريدها سنحدد في هذا الشكل وستكون 300 جزء من ألف جزء من الثانية، الشرح سيكون هو نفسه في الشفرة السابقة ولا داعي لإعادة الشرح.

$(function(){
     $('#box-slide .box-content .title').click(function(){
         $(this).next().slideToggle(300);
     });
});

الشكل الثالث: فتح نافذة واحدة على الأقل

الشكل الثالث ستفتح من خلالها نافدة واحدة وتبقى نافذة واحدة على مفتوحة بعد الضغط بحيث يتيح للمستخدم الضغط على عنوان القائمة وتمييز القائمة المفتوحة عن غيرها وإخفاء بقية محتوى القائمة المفتوح والغير مستخدم تلقائياً، سترى الوصف بعد الشفرة التالية:

$(function(){
     $('#box-slide .box-content .title').click(function(){

         $('#box-slide .box-content .title').removeClass('current');
         $('#box-slide .box-content .contain').addClass('hide');
         $(this).next().removeClass('hide');

         $('#box-slide .box-content .contain.hide').slideUp(300);
         $(this).addClass('current');

         $(this).next().slideDown(300);
     });
});

تستطيع أن ترى وصف ما كتبته في الأعلى على هذه القائمة:

• السطر 2: إنشاء دالة لحدث click (أعني عند الضغط على الصنف title.)
• السطر 4: حدف الصنف current. من جميغ عناوين القوائم التي تحمل الصنف title.
• السطر 5: إضافة الصنف hide. من محتوى القائمة والتي تمثل الصنف contain.
• السطر 6: حذف الصنف .hide من المحتوى القائمة الحالية ( والعملية هي أن يُفتح محتوى القائمة التي ضغطنا على عنوانها ) وتم تحديد محتوى القائمة مباشرة عبر الخاصية next
• السطر 8: إنزلاق جميع المحتويات التي تحمل الصنف hide. إلى الأعلى (أعني إغلاقها)
• السطر 9: إضافة الصنف current. إلى عنوان القائمة الحالية (التي تم ضغطها)
• السطر 11: إنزلاق محتوى القائمة الحالية إلى الأسفل (فتح القائمة)
• السطر 11: تم تحديد سرعة الإنزلاق بـ 300 جزء من ألف جزء من الثانية

تلاحظ أن صنف hide. و current. تم إضافتهم عن طريق الشفرة لأستخدام الأول في إخفاء المحتويات والثاني في تغيير لون عنوان القائمة لكي تدل على أنك ضغطت عليها.

هل تريد إظهار نافذة واحدة مفتوحة عند زيارة الصفحة؟ بدلاً من أن تجد النافذة مغلقة يمكن جعلها مفتوحة عند زيارة الصفحة ثم يقوم المستخدم بإختيار القائمة التي يريدها ويتم إغلاقها، ببساطة أضف صنف current. إلى عنوان القائمة و صنف آخر تضيفه إلى محتوى القائمة التي تريد أن تراها مفتوحة عند فتح الصفحة.

مثلاً، إذا أردنا جعل القائمة الأولى مفتوحة عند فتح الصفحة نضيف صنف current. إلى عنوان القائمة الأولى ونكتب صنف آخر يفتح محتوى القائمة فليكن display. ستكون شفرة القائمة الأولى بهذا الشكل:

<div class="box-content">
	<div class="title current"><h3><a href="#">القائمة الأولى</a></h3></div>
	<div class="contain display">
		<p>مكان القائمة أو النصوص الخاصة بالقائمة الأولى، يمكنك إضافة المزيد.</p>
	</div>
</div>

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

.display {
	display: block;
}

إضافات jQuery

وبالأمكان الإعتماد على إضافات توفر عليك الوقت في عمل مثل هذه القوائم، أضع عدة طرق أخرى لإستخدام هذه الإضافات بعد التعرف على أحد طرق عملها بمكتبة jQuery، بالنسبة لهذا الشكل من القوائم التي يتم تصفحها بشكل عمودي لم أجد إضافة متخصصة لها، أعتقد أنه يوجد ولكن قليل.

ولكن يوجد طريقة عمل لها عبر مكتبة jQuery UI ويمكنك رؤية صفحة المثال الخاص لعمل إنزلاق القوائم في مكتبة jQuery UI وأما عن طريق مكتبة jQuery Tools ستجد طريقة عملها في قسم Tabs بالتحديد لاحظ الأمثلة التالية:

• Making Accordions with the Tabs
• Customizing the Accordion effect

سأكتفي بوضع مثال خاص بمكتبة jQuery Tools، في الرابطين السابقين ستجد بداخل كل صفحة منهما طريقة عمل الشكل، وهو يعتمد على نفس الشكل الذي شرحته هنا، سأعرض مثال على إنزلاق القوائم بإستخدام مكتبة jQuery Tools، الشفرة التي أعددتها للمثال وضعتها بهذا الشكل وتستطيع إختيار أسماء الأصناف مثل ما تريد وإضافتها إلى خاصية tabs الموجودة في الإضافة:

<div id="accordion">

     <h2>القائمة الأولى</h2>
     <div style="display:block"><p>مكان القائمة أو النصوص الخاصة بالقائمة الأولى، يمكنك إضافة المزيد.</p></div>

     <h2>القائمة الثانية</h2>
     <div><p>مكان القائمة أو النصوص الخاصة بالقائمة الثانية، يمكنك إضافة المزيد.</p></div>

     <h2>القائمة الثالثة</h2>
     <div><p>مكان القائمة أو النصوص الخاصة بالقائمة الثالثة، يمكنك إضافة المزيد.</p></div>

</div>

بعد إستدعاء مكتبة jQuery مع مكتبة jQuery Tools يمكنك تنفيذ الإنزلاق، لاحظ أنك تستطيع إستدعاء المكتبة مباشرة عبر الموقع بوضع هذه الشفرة لديك وهو ما سيوفر عليك الوقت:

<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>

أما بالنسبة لعمل الإنزلاق فسيكون عن طريق دالة أو خاصية tabs التابعة لمكتبة jQuery Tools:

$(function(){
     $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
 });

سيكون الشكل الأخير جاهز بسهولة بإستخدام مكتبة jQuery Tools، يمكنك مشاهدة المثال مباشرةً إذا أردت.

• مثال على الدرس
• تحميل المرفقات

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

• مثال على الدرس
• تحميل المرفقات

الأجاكس في مكتبة jQuery

في هذه الجزئية ستعرف على كتابة الأجاكس في مكتبة jQuery، سأشرح ثلاثة طرق للتعامل مع البيانات المستقبلة من طرق الخادم وهي ()ajax.$ و ()post.$ و ()get.$.

الآن، سنطبق ما تعلمناه كما في المثال العملي للدرس الاول وسنستخدم نفس المثال ولكن بإستخدام مكتبة jQuery بدلاً من كتابة الأجاكس من الصفر.

صفحة HTML ستكون مثل ما هي، وهذه شفرة HTML لهذا الدرس ( مع إستخدام لغة PHP لإستدعاء السنوات المسجلة في قاعدة البيانات في الحقل):

<?php
$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db($table, $connect);
if (!$connect) { die('Could not connect: ' . mysql_error()); }
mysql_query("set charset UTF8");
?>

<div id="form">
     <p>تطبيق بسيط يطرح حدث معين مرتبط بالسنة التي يضعها الزائر.</p>
     <form method="GET">
     <p>إختر السنة التي تم فيها الحدث
         <select name="year">
         <option selected="selected">إختر السنة</option>

         <?php
         $result2 = mysql_query("SELECT * FROM events WHERE event_cloned = 'N' ORDER BY event_year DESC");
         while($row = mysql_fetch_array($result2)) {
         echo '<option value="'.$row['event_year'].'">'.$row['event_year'].'</option>';
         }
         ?>

         </select>

     </p>
 </form>
 </div>

<div id="content"> </div>

التغييرات التي سنشاهدها في الصفحة ستكون عن طريق عنصر div الذي يحمل الصنف content# ، نفس الشيء لملف query.php (الملف الذي يستقبل متغيرات الصفحة للتعامل مع قاعدة البيانات في إستدعاء البيانات المطلوبة لصفحة HTML)، ليس هناك تغييرات في ملف PHP:

<?php

// شفرة الإتصال بقاعدة البيانات
$connect = mysql_connect('localhost', 'root', '');
$db_connect = mysql_select_db('test', $connect);
mysql_query("set charset UTF8");
if (!$connect) { die('لم يتم الإتصال: ' . mysql_error()); }

// تعريف المتغير event_year
// ولإستقبال هذا المتغير في إكمال الإتصال بالأجاكس
if($_GET['year']) {
     $event_year = $_GET['year'];
     $result = mysql_query("SELECT * FROM events WHERE event_year = '$event_year'");

     // عرض المعلومات من قاعدة بيانات بإستخدام التكرار
     // وبواسطة الدالة while
     while($row=mysql_fetch_array($result)) {
         echo '<div><h2>'.$row['event_name'].'</h2>';
         echo '<p>'.$row['event_description'].' <span>(تاريخ '.$row['event_date'].')</span></p>';
         echo '</div>';
     }
}
?>

طريقة ()ajax.$

سنتعرف على أول طريقة وهي ()ajax.$ التي تعتبر كتطبيق منخفض المستوى في مكتبة jQuery، كتابة شفرة ()ajax.$ تكون بهذه التركيبة (مع شرح أجزاء الشفرة):

 $.ajax({
     type: METHOD, // الطريقة أو نوع المستخدمة في الإتصال مثل GET, POST
     url: "example.php", // عنوان الإتصال
     data: "var=value", // المتغيرات المرسلة
     success: function(data) {} // الدالة المستخدمة عند نجاح الإتصال
 });
 

الآن نعود إلى تطبيق الدرس، نضع شفرة Javascript التي ستحتوي على إتصال الأجاكس بإستخدام مكتبة jQuery وبطريقة ()ajax.$ (شرح الأوامر موجودة في الشفرة) (لوضع شفرة Javascript في الصفحة تكون الشفرة ضمن العنصر head كما ستشاهدها الآن):

 $(document).ready(function() {
     var ajax_load = '<span>Loading</span>'; // صورة التحميل قبل إستدعاء البيانات من الخادم
     $("select").change(function() { // في حال تغيير إختيارات الحقل select
         var year = "year=" + $(this).val() // نآخذ القيمة المختارة من إختيارات الحقل select
         $("#content").html(ajax_load); // نضع صورة التحميل قبل البدأ بالإتصال
         $.ajax({
             type: "GET", // إستخدام طريقة GET في الإتصال
             url: "query.php", // عنوان الإتصال هو ملف PHP
             data: year, // لدينا متغير واحد وهو السنة أو المتغير year
             success: function(data) { // في حال نجاح الإتصال يتم عرض البيانات
                 $('#content').hide().fadeIn(1000).html(data); // يتم عرض البيانات في العنصر الذي يحمل إسم الصنف #content
             }
         });
     });
});

بالنسبة لهذه لطريقة أو نوع الإتصال ()get.$ أو ()post.$ تستخدم لتخصيص الإتصال بطريقة GET أو POST وهي أفضل كما هو مذكور في وثائق موقع مكتبة jQuery من إستخدام ()ajax.$ إذا لم تدع الحاجة إلى ذلك. وتعتبر كتطبيق عالي المستوى في مكتبة jQuery.

طريقة ()get.$

المثال الآخر هو بإستخدام طريقة ()get.$ ضمن مكتبة jQuery لكتابة الإتصال، الشفرة التالية ستوضح كيفية عمل ذلك:

$.get(url , // عنوان الإتصال
     { variable: value}, // المتغيرات المرسلة
     function(data){ // الدالة المستخدمة عند نجاح الإتصال
         ..
     });

لتطبيق المثال العملي على هذا الدرس بإستخدام هذه الطريقة، كتبت هذه الشفرة لإستدعاء البيانات من القاعدة (إظهار الأحداث بناءاً على السنة التي يختارها المستخدم) وهي بنفس التركيبة التي كتبتها في الشفرة السابقة:

$(document).ready(function() {
     var ajax_load = '<span>Loading</span>'; // صورة التحميل قبل إستدعاء البيانات من الخادم
     $("select").change(function() { // في حال تغيير إختيارات الحقل select
         $("#content").html(ajax_load); // نضع صورة التحميل قبل البدأ بالإتصال
         $.get("query.php", { year: $(this).val() }, function(data) { // الطريقة تحتوي على عنوان الإتصال والمتغيرات المرسلة إضافةً إلى دالة الإتصال
             $('#content').hide().fadeIn(1000).html(data);  // يتم عرض البيانات في العنصر الذي يحمل إسم الصنف #content
         });
     });
 });

طريقة ()post.$

تركيبة هذه الطريقة في مكتبة jQuery لكتابة الإتصال موضحة في الشفرة التالية:

$.post(url , // عنوان الإتصال
     { variable: value}, // المتغيرات المرسلة
     function(data){ // الدالة المستخدمة عند نجاح الإتصال
         ..
     });

بما أننا طبقنا المثال العملي بطريقة ()get.$ فهي لا تختلف في تركيبتها عن طريقة ()post.$ (أقصد في كتابة الشفرة)، أكتفي بتطبيق المثال بإستخدام طريقة ()get.$.

• مثال على الدرس
• تحميل المرفقات