إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

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

3 تعليقات

الجي كويري - واجهة المستخدم أو 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>

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

تعليقات بلوجر

  1. السلام عليكم اخي العزيز عاشق النت
    اخي العزيز انا محتاج حاجة منك ولك الاجر انشاء الله
    انا احتاج مثل هذا القالب
    http://shahid.mbc.net/ يعمل على بلوجر انا اريد انشر افلام اسلامية ارجوك ان تقبل اخي العزيز وانشاء الله ادعيلك الى يوم القيامة لم اجد نموذج للمراسلة لكي اراسلك فلهذا وضعتة في التعليقات هذا بريدي الالكتروني
    MOSTAFA.ALWIN@GMAIL.COM
    انتضر ردك السريع اخي العزيز

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة