walid
11-01-2013, بتوقيت غرينيتش 02:22 PM
http://www.dzbatna.com/images/icons/iconrote.gif jQuery UI (http://www.dzbatna.com/t1190084/)
http://www.tech-wd.com/wd/wp-content/uploads/jqui1.gif (http://jqueryui.com/)
ما هي jQuery UI
هي مكتبة Javascript تقوم بتحسين واجهة interface المستخدم في مشروعك الجديد من تطبيق الويب, و UI اختصار لـ User Interface يتم استخدام مكتبة jQuery (http://jquery.com/) منها ليتم استخدام مميزات هذه المكتبة الرائعة.
ماذا يمكنني أن أعمل بـ jQuery
ما يمكنك عمله هو :
(Accordion) قائمة محتوى بعرض كل قائمة بتأثير تدرجي موحد
http://www.tech-wd.com/wd/wp-content/uploads/jqui2.gif
(Datepicker) تقويم لحقول التواريخ
http://www.tech-wd.com/wd/wp-content/uploads/jqui3.gif
(Dialog) صندوق رسالة او تحذير أو أي شيء يظهر بشكل منبثق
http://www.tech-wd.com/wd/wp-content/uploads/jqui4.gif
(Progressbar) صندوق تحميل
http://www.tech-wd.com/wd/wp-content/uploads/jqui5.gif
(Slider) شريط تمرير
http://www.tech-wd.com/wd/wp-content/uploads/jqui6.gif
(Tabs) قائمة أفقية بعرض مباشر للمحتوى
http://www.tech-wd.com/wd/wp-content/uploads/jqui7.gif
وهناك بعض المميزات الأخرى الإضافية الجميلة التي يمكنك عملها في مشروعك مثل ترتيب عناصر او تأثير ظهور بتأثيرات مختلفة.
وكما يمكنك إختيار ستايل styleات كثيراً محدده مثلاً هنا يمكنك مشاهدة لون الستايل style البرتقالي ويمكنك إختيار من قائمة كبيرة الستايل styleات التي تناسبك بألوان مختلفة كالأزرق أو الأسود وغيرها.
وما يميز هذه المكتبة يمكنك تحميل ما تريد منها بالضبط من خلال صفحة التحميل باختيار مثلاً ( تقويم لحقل التاريخ ) فقط ويتم تحميل الدوال المتعلقة بهذا الجزء فقط, أو تحميل جميع الاجزاء واستخدامها جميعها حسب احتياجاتك.
ما هي طريقة الاستخدام؟
لنقل أنه لدينا مشروع معين حالياً, سنقوم بتحميل ملفات هذه المكتبة فيه بالذهاب أولاً إلى صفحة التحميل للـ jQuery UI من هنا (http://jqueryui.com/download) ثم اختيار ما نحتاج منها.
Accordion
في هذا الشرح طريقة سنشرح طريقة طريقة استخدام وتركيب install (Accordion) قائمة محتوى بعرض كل قائمة بتأثير تدرجي موحد.
بسم الله بعد الدخول لصفحة التحميل من الرابط في الأعلى نعمل (Deselect all components) ليتم إزالة التحديد من جميع العناصر ثم نختار UI Core وهو الجزء الأساسي من المكتبة ثم نختار Accordion كما في الصورة التالية :
http://www.tech-wd.com/wd/wp-content/uploads/jqudownload.gif
ثم اختار الثيم المناسب لك من هنا :
http://www.tech-wd.com/wd/wp-content/uploads/jqui8.gif
ثم أضغط على Download.
لمشاهدة جميع ألوان الثيمات الموجودة يمكنك ذالك بالضغط على Themes (http://jqueryui.com/themeroller) من القائمة العلوية واختيار Gallery لمشاهدة الثيمات مثل هذه القائمة ورؤية الإضافات بشكل طبيعي في الصفحة.
http://www.tech-wd.com/wd/wp-content/uploads/jquthemes.gif
بعد تحميل الملف المضغوط وفك ضغطة ستجد هذه الملفات :
http://www.tech-wd.com/wd/wp-content/uploads/jqfiles.gif
يمكنك حذف المجلد development-bundle فهو مجلد يحتوي على demos و docs لا تحتاجها في مشروعك.
وراح تجد الأمثلة لعرض ما تم تحميله في ملف index.html لما تفتحه من المتصفح, ويمكنك فتحه من خلال المحرر لديك لمشاهدة الأكواد التي تم العمل عليها لعرض ما تم عرضه.
سنلاحظ انه أولاً في داخل الـ head تم استدعاء هذه الأسطر
وهي الملفات التي تم تحميلها والتي تحتوي على التنسيق الخاص بها كالألوان والحدود ونوع الخط في ملف custom.css , وكذالك تم استدعاء ملف jQuery الأساسي وملف jQuery UI
الأن ننتقل إلى طريقة عمل (Accordion) , ستجد داخل body عدة أمثلة من ضمنها أيقونات يمكنك استخدامها في مشروعك وكذالك صناديق تحذير وتنبيه لمشروعك, قمت بحذف كل شيء ما عدا الجزء المتعلق بـ Accordion لأنني سوف استخدمه الأن, أما الأجزاء الباقية يمكنني الرجوع لها إذا أردت استخدامها كرسالة التحذير مثلاً لاحقاً في مشروعي.
الأن بعد حذف جميع الأجزاء ما عدا Accordion في الـ body هذا ما سيتبقى لنا داخل body.
Accordion
First (http://www.ahlylove.com/vb/)
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Second (http://www.ahlylove.com/vb/)
Phasellus mattis tincidunt nibh.
Third (http://www.ahlylove.com/vb/)
Nam dui erat, auctor a, dignissim quis.
وهذا الكود code هي القائمة التي سنعملها دائماً مع التحرير والزيادة في القائمه حسب حاجتنا.
بعد حفظها وفتح الصفحه في المتصفح سنجد فقط القائمة المنسدله بالمحتوى كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr1.gif
سنقوم بتحويل الصفحة من اليمين إلى اليسار كالتالي نبحث عن
ونستبدله بـ
بعدها ستكون الصفحة من اليمين إلى اليسار بدون مشاكل كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr2.gif
بعد وجود أكواد عرض القائمة وتحويلها من اليمين إلى اليسار كل ما علينا لجعل القائمه تتحرك هو هذا الكود code :
#accordion هو الآي دي الخاص بالقائمة كما تجدونه في كود code الـ XHTML الخاص بعرض القائمة في الأعلى (السطر الأول) <div id="accordion">
و h3 الذي نجده كذالك بكود code الـ XHTML والذي يمثل عنوان القائمة First (http://www.ahlylove.com/vb/)
ارجوا ان يكون الشرح طريقة واضح, طبعاً هناك أكواد إضافية يمكننا شرح طريقةها كذالك مثلاً تحت الكود code السابق كالتالي
وهو موضح باللون الأحمر, وهذا الكود code فقط لتغيير شكل عنوان القائمة عند مرور الفأرة فقط لا غير.
وستجد كذالك هذا الكود code الخاص بتنسيق الصفحة :
يمكنك حذفه لإنه كود code خاص بتنسيق الصفحه بشكل خاص غير مهم جداً فلو حذفت ستجد التصميم لازال جميل ومتناسق لإنه تم استدعاء custom.css في السابق والذي يحتوي على التنسيق الأساسي للقائمة.
يمكنك الأن الإستفادة من الدرس مفصل لاختيار احد الإضافات ومن ثم فتحها كما تم توضيحه ومسح ما هو غير مهم كرسالة الترحيب ومتابعة جميع الخطوات السابقة للإستفاده من الإضافات بشكل جيد.
لتحميل الملف وفك ضغطه (http://www.tech-wd.com/wd/wp-content/uploads/2014/04/jquery-ui-171custom.rar) | لمشاهدة المثال مباشرة من هنا (http://www.tech-wd.com/wd/wp-content/uploads/jqui/index.html)
http://feeds2.feedburner.com/%7Er/tech-wd/%7E4/AuDW6CAuxsMمنقوووووش بولسطتى من عالم التقنية
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://www.tech-wd.com/wd/wp-content/uploads/jqui1.gif (http://jqueryui.com/)
ما هي jQuery UI
هي مكتبة Javascript تقوم بتحسين واجهة interface المستخدم في مشروعك الجديد من تطبيق الويب, و UI اختصار لـ User Interface يتم استخدام مكتبة jQuery (http://jquery.com/) منها ليتم استخدام مميزات هذه المكتبة الرائعة.
ماذا يمكنني أن أعمل بـ jQuery
ما يمكنك عمله هو :
(Accordion) قائمة محتوى بعرض كل قائمة بتأثير تدرجي موحد
http://www.tech-wd.com/wd/wp-content/uploads/jqui2.gif
(Datepicker) تقويم لحقول التواريخ
http://www.tech-wd.com/wd/wp-content/uploads/jqui3.gif
(Dialog) صندوق رسالة او تحذير أو أي شيء يظهر بشكل منبثق
http://www.tech-wd.com/wd/wp-content/uploads/jqui4.gif
(Progressbar) صندوق تحميل
http://www.tech-wd.com/wd/wp-content/uploads/jqui5.gif
(Slider) شريط تمرير
http://www.tech-wd.com/wd/wp-content/uploads/jqui6.gif
(Tabs) قائمة أفقية بعرض مباشر للمحتوى
http://www.tech-wd.com/wd/wp-content/uploads/jqui7.gif
وهناك بعض المميزات الأخرى الإضافية الجميلة التي يمكنك عملها في مشروعك مثل ترتيب عناصر او تأثير ظهور بتأثيرات مختلفة.
وكما يمكنك إختيار ستايل styleات كثيراً محدده مثلاً هنا يمكنك مشاهدة لون الستايل style البرتقالي ويمكنك إختيار من قائمة كبيرة الستايل styleات التي تناسبك بألوان مختلفة كالأزرق أو الأسود وغيرها.
وما يميز هذه المكتبة يمكنك تحميل ما تريد منها بالضبط من خلال صفحة التحميل باختيار مثلاً ( تقويم لحقل التاريخ ) فقط ويتم تحميل الدوال المتعلقة بهذا الجزء فقط, أو تحميل جميع الاجزاء واستخدامها جميعها حسب احتياجاتك.
ما هي طريقة الاستخدام؟
لنقل أنه لدينا مشروع معين حالياً, سنقوم بتحميل ملفات هذه المكتبة فيه بالذهاب أولاً إلى صفحة التحميل للـ jQuery UI من هنا (http://jqueryui.com/download) ثم اختيار ما نحتاج منها.
Accordion
في هذا الشرح طريقة سنشرح طريقة طريقة استخدام وتركيب install (Accordion) قائمة محتوى بعرض كل قائمة بتأثير تدرجي موحد.
بسم الله بعد الدخول لصفحة التحميل من الرابط في الأعلى نعمل (Deselect all components) ليتم إزالة التحديد من جميع العناصر ثم نختار UI Core وهو الجزء الأساسي من المكتبة ثم نختار Accordion كما في الصورة التالية :
http://www.tech-wd.com/wd/wp-content/uploads/jqudownload.gif
ثم اختار الثيم المناسب لك من هنا :
http://www.tech-wd.com/wd/wp-content/uploads/jqui8.gif
ثم أضغط على Download.
لمشاهدة جميع ألوان الثيمات الموجودة يمكنك ذالك بالضغط على Themes (http://jqueryui.com/themeroller) من القائمة العلوية واختيار Gallery لمشاهدة الثيمات مثل هذه القائمة ورؤية الإضافات بشكل طبيعي في الصفحة.
http://www.tech-wd.com/wd/wp-content/uploads/jquthemes.gif
بعد تحميل الملف المضغوط وفك ضغطة ستجد هذه الملفات :
http://www.tech-wd.com/wd/wp-content/uploads/jqfiles.gif
يمكنك حذف المجلد development-bundle فهو مجلد يحتوي على demos و docs لا تحتاجها في مشروعك.
وراح تجد الأمثلة لعرض ما تم تحميله في ملف index.html لما تفتحه من المتصفح, ويمكنك فتحه من خلال المحرر لديك لمشاهدة الأكواد التي تم العمل عليها لعرض ما تم عرضه.
سنلاحظ انه أولاً في داخل الـ head تم استدعاء هذه الأسطر
وهي الملفات التي تم تحميلها والتي تحتوي على التنسيق الخاص بها كالألوان والحدود ونوع الخط في ملف custom.css , وكذالك تم استدعاء ملف jQuery الأساسي وملف jQuery UI
الأن ننتقل إلى طريقة عمل (Accordion) , ستجد داخل body عدة أمثلة من ضمنها أيقونات يمكنك استخدامها في مشروعك وكذالك صناديق تحذير وتنبيه لمشروعك, قمت بحذف كل شيء ما عدا الجزء المتعلق بـ Accordion لأنني سوف استخدمه الأن, أما الأجزاء الباقية يمكنني الرجوع لها إذا أردت استخدامها كرسالة التحذير مثلاً لاحقاً في مشروعي.
الأن بعد حذف جميع الأجزاء ما عدا Accordion في الـ body هذا ما سيتبقى لنا داخل body.
Accordion
First (http://www.ahlylove.com/vb/)
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Second (http://www.ahlylove.com/vb/)
Phasellus mattis tincidunt nibh.
Third (http://www.ahlylove.com/vb/)
Nam dui erat, auctor a, dignissim quis.
وهذا الكود code هي القائمة التي سنعملها دائماً مع التحرير والزيادة في القائمه حسب حاجتنا.
بعد حفظها وفتح الصفحه في المتصفح سنجد فقط القائمة المنسدله بالمحتوى كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr1.gif
سنقوم بتحويل الصفحة من اليمين إلى اليسار كالتالي نبحث عن
ونستبدله بـ
بعدها ستكون الصفحة من اليمين إلى اليسار بدون مشاكل كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr2.gif
بعد وجود أكواد عرض القائمة وتحويلها من اليمين إلى اليسار كل ما علينا لجعل القائمه تتحرك هو هذا الكود code :
#accordion هو الآي دي الخاص بالقائمة كما تجدونه في كود code الـ XHTML الخاص بعرض القائمة في الأعلى (السطر الأول) <div id="accordion">
و h3 الذي نجده كذالك بكود code الـ XHTML والذي يمثل عنوان القائمة First (http://www.ahlylove.com/vb/)
ارجوا ان يكون الشرح طريقة واضح, طبعاً هناك أكواد إضافية يمكننا شرح طريقةها كذالك مثلاً تحت الكود code السابق كالتالي
وهو موضح باللون الأحمر, وهذا الكود code فقط لتغيير شكل عنوان القائمة عند مرور الفأرة فقط لا غير.
وستجد كذالك هذا الكود code الخاص بتنسيق الصفحة :
يمكنك حذفه لإنه كود code خاص بتنسيق الصفحه بشكل خاص غير مهم جداً فلو حذفت ستجد التصميم لازال جميل ومتناسق لإنه تم استدعاء custom.css في السابق والذي يحتوي على التنسيق الأساسي للقائمة.
يمكنك الأن الإستفادة من الدرس مفصل لاختيار احد الإضافات ومن ثم فتحها كما تم توضيحه ومسح ما هو غير مهم كرسالة الترحيب ومتابعة جميع الخطوات السابقة للإستفاده من الإضافات بشكل جيد.
لتحميل الملف وفك ضغطه (http://www.tech-wd.com/wd/wp-content/uploads/2014/04/jquery-ui-171custom.rar) | لمشاهدة المثال مباشرة من هنا (http://www.tech-wd.com/wd/wp-content/uploads/jqui/index.html)
http://feeds2.feedburner.com/%7Er/tech-wd/%7E4/AuDW6CAuxsMمنقوووووش بولسطتى من عالم التقنية
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
