مقدمة في الجي كويري - واجهة المستخدم ( jQuery UI )

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

الفهرس

1. نبذة عن الجي كويري - واجهة المستخدم .
2. مكونات المكتبة .
3. تحميل المكتبة و إستخدامها .

---

نبذة عن الجي كويري - واجهة المستخدم .

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

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

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

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

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

و نعم ، كل هذا و عجلة التطور لم تتوقف أبدا . قام مطوروا لغة الجي كويري بإنشاء مكتبة قوية أخرى أسموها jQuery User Interface أي جي كويري - واجهة المستخدم ، هذه المكتبة ليست واسعة الإستخدام مثل الجي كويري العادية ، لأنها تحتوي على دوال قليلة مقارنة بها ، فهي تحتوي فقط على ما يحتاجه مطوروا المواقع بكثرة ، لكن الدوال التي تحتوي عليها مكتبة الجي كويري - واجهة المستخدم قوية للغاية ، حيث نستطيع و بسطر واحد من الجي كويري فقط إنشاء سلايد شو متكامل لمواقنعنا ، أو إنشاء نظام من فقاعات المعلومات ( bubble Info ) و العديد من التأثيرات الجميلة و الأدوات الذكية .

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

---

مكونات المكتبة

تتكون مكتبة جي كويري - واجهة المستخدم من 3 حزم أساسية تتكون كل حزمة من عدد من الإضافات و هي تتوزع كالتالي :

التفاعلات : بعض التقنيات التي تجعل الصفحات أكثر دينامية .

• draggable : تجعل مكونات الصفحة قابلة للإزاحة في جميع الإتجاهات باستخدام مؤشر الفأرة .
• droppable : تضيف تأثيرات إلى العناصر التي تتم الإزاحة فوقها .
• resizable : تسمح بتغيير أبعاد العناصر .
• selectable : تضيف تأثيرات جميلة للعناصر التي تحددها باستخدام مؤشر الفأرة .
• storable : تنظم قائمة الصناديق بحيث عند إزاحة صندوق من مكانه تنتضم الصناديق الأخرى لتحافظ على صفها .

الأدوات : 

• accordion : قائمة عمودية بتأثيرات التحريك السلس .
• autocomplete : التكميل التلقائي للكلمات .
• button : أزرار ذات شكل جميل .
• Datepicker : صندوق التواريخ .
• Dialog : صندوق المحاذثة بشكل جميل .
• Progressbar : عود التقدم .
• Slider : الزالقة .
• Tabs : علامات التبويب .

التأثيرات :

• Color Animation : تأثير التحريك السلس + تغيير الألوان .
• Toggle Class : إضافة ثأثير التحريك السلس عند إضافة و إزالة قيم التعريف بالكلاس .
• Add Class : إضافة ثأثير التحريك السلس عند إضافة قيم التعريف بالكلاس فقط .
• Remove Class :  إضافة ثأثير التحريك السلس عند إزالة قيم التعريف بالكلاس فقط .
• Switch Class :  إضافة ثأثير التحريك السلس عند تغيير قيم التعريف بالكلاس .
• Effect : مجموعة من تأثيرات التحريك الجميلة .
• Toggle : مجموعة من تأثيرات الإخفاء و الإضهار .
• Hide :  مجموعة من تأثيرات الإخفاء فقط .
• Show : مجموعة من تأثيرات الإضهار فقط .

الثيمات :
جميع إضافات الجي كويري - واجهة المستخدم مصممة بشكل يسمح لها بتغيير خصائصها حسب ثيمات نختارها حسب رغبتنا ، فهذه الثيمات تغير من شكل العناوين ، خلفيات الصناديق ، ألوان النصوص ، بحيث تجعل منها متناسقة و ذلك كله يتم فقط بربط صفحات الوب بملف CSS بسيط مُنجَزٌ مسبقا من طرف مطوري الجي كويري - واجهة المستخدم ، يمكننا معاينة و تحميل أي ثيم من الصفحة jqueryui.com/themeroller/#themeGallery

---

تحميل المكتبة و إستخدامها

مكتبة الجي كويري - واجهة المستخدم كبيرة للغاية ، لذلك تم تقسيمها لكي نتمكن من تحميل فقط ما سنحتاجه في تصميماتنا ، و لتحميل المكتبة نتوجه إلى الصفحة jqueryui.com/download حيث سنجد قائمة إختيارات طويلة نحدد من خلالها ما الذي نريد تحميله .

بالنسبة للـUI Core فالأحسن تحميل كل مكوناتها لأنها تحتوي على جميع الوظائف و الدوال الأساسية .
في ما يليها سنجد قوائم إختيار مقسمة تحت Interaction ( التفاعلات ) ، ثم Widgets ( الأدوات ) و بعدها Effects ( التأثيرات ) ، مثل التقسيم في الفقرة السابقة من المقال .

فمن خلال تلك الإختيارات يمكننا تحديد السكربتات التي سنحتاجها في تصميم مواقعنا

و لتكميل التحميل يجب إخيار ثيم من صندوق الإختيارات جانبه ، و في الأخير الضغط على Download .
سنحصل على مجموعة واسعة من ملفات الجافاسكربت و الـCSS و الـHTML ، تحتوي على أمثلة للإستخدام حيث يمكننا التعرف على كيفية إدخال سكربتات الجي كويري - واجهة المستخدم .

عندما نذهب إلى jQuery User Interface → development-bundle → demos ، سنجد جميع التفاعلات و الأدوات و التأثيرات التي إخترناها أثناء التحميل ، مع أمثلة بسيطة و سهلة لكي نعرف كيف نقوم بإنشاء تلك السكربتات بأنفسنا . 

كل ما يلزمنا هو عرض المثال على المتصفح و جلب الكود المصدري الذي من خلاله يتوضح لنا السكربت الخاص بكل إضافة .

أما ملفات الجافاسكربت التي يجب أن نربط بها صفحاتنا فهي في
 jQuery User Interface → development-bundle → UI .

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

<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="رابط الإضافة"></script>
<script>
     سكربت الإضافة بالجي كويري
</script>

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