مبرمج
04-25-2009, 12:53 PM
<div>http://www.tech-wd.com/wd/wp-content/uploads/jqui1.gif (http://jqueryui.com/)
ما هي jQuery UI
هي مكتبة Javascript تقوم بتحسين واجهة المستخدم في مشروعك الجديد من تطبيق الويب, و 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
وهناك بعض المميزات الأخرى الإضافية الجميلة التي يمكنك عملها في مشروعك مثل ترتيب عناصر او تأثير ظهور بتأثيرات مختلفة.
وكما يمكنك إختيار ستايلات كثيراً محدده مثلاً هنا يمكنك مشاهدة لون الستايل البرتقالي ويمكنك إختيار من قائمة كبيرة الستايلات التي تناسبك بألوان مختلفة كالأزرق أو الأسود وغيرها.
وما يميز هذه المكتبة يمكنك تحميل ما تريد منها بالضبط من خلال صفحة التحميل باختيار مثلاً ( تقويم لحقل التاريخ ) فقط ويتم تحميل الدوال المتعلقة بهذا الجزء فقط, أو تحميل جميع الاجزاء واستخدامها جميعها حسب احتياجاتك.
ما هي طريقة الاستخدام؟
لنقل أنه لدينا مشروع معين حالياً, سنقوم بتحميل ملفات هذه المكتبة فيه بالذهاب أولاً إلى صفحة التحميل للـ jQuery UI من هنا (http://jqueryui.com/download) ثم اختيار ما نحتاج منها.
Accordion
في هذا الشرح سنشرح طريقة استخدام وتركيب (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.
وهذا الكود هي القائمة التي سنعملها دائماً مع التحرير والزيادة في القائمه حسب حاجتنا.
بعد حفظها وفتح الصفحه في المتصفح سنجد فقط القائمة المنسدله بالمحتوى كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr1.gif
سنقوم بتحويل الصفحة من اليمين إلى اليسار كالتالي نبحث عن
ونستبدله بـ
بعدها ستكون الصفحة من اليمين إلى اليسار بدون مشاكل كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr2.gif
بعد وجود أكواد عرض القائمة وتحويلها من اليمين إلى اليسار كل ما علينا لجعل القائمه تتحرك هو هذا الكود :
#accordion هو الآي دي الخاص بالقائمة كما تجدونه في كود الـ XHTML الخاص بعرض القائمة في الأعلى (السطر الأول)
و h3 الذي نجده كذالك بكود الـ XHTML والذي يمثل عنوان القائمة First (http://www.ahlylove.com/vb/)
ارجوا ان يكون الشرح واضح, طبعاً هناك أكواد إضافية يمكننا شرحها كذالك مثلاً تحت الكود السابق كالتالي
وهو موضح باللون الأحمر, وهذا الكود فقط لتغيير شكل عنوان القائمة عند مرور الفأرة فقط لا غير.
وستجد كذالك هذا الكود الخاص بتنسيق الصفحة :
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
يمكنك حذفه لإنه كود خاص بتنسيق الصفحه بشكل خاص غير مهم جداً فلو حذفت ستجد التصميم لازال جميل ومتناسق لإنه تم استدعاء custom.css في السابق والذي يحتوي على التنسيق الأساسي للقائمة.
يمكنك الأن الإستفادة من الدرس لاختيار احد الإضافات ومن ثم فتحها كما تم توضيحه ومسح ما هو غير مهم كرسالة الترحيب ومتابعة جميع الخطوات السابقة للإستفاده من الإضافات بشكل جيد.
لتحميل الملف وفك ضغطه (http://www.tech-wd.com/wd/wp-content/uploads/2009/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منقوووووش بولسطتى من عالم التقنية
ما هي jQuery UI
هي مكتبة Javascript تقوم بتحسين واجهة المستخدم في مشروعك الجديد من تطبيق الويب, و 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
وهناك بعض المميزات الأخرى الإضافية الجميلة التي يمكنك عملها في مشروعك مثل ترتيب عناصر او تأثير ظهور بتأثيرات مختلفة.
وكما يمكنك إختيار ستايلات كثيراً محدده مثلاً هنا يمكنك مشاهدة لون الستايل البرتقالي ويمكنك إختيار من قائمة كبيرة الستايلات التي تناسبك بألوان مختلفة كالأزرق أو الأسود وغيرها.
وما يميز هذه المكتبة يمكنك تحميل ما تريد منها بالضبط من خلال صفحة التحميل باختيار مثلاً ( تقويم لحقل التاريخ ) فقط ويتم تحميل الدوال المتعلقة بهذا الجزء فقط, أو تحميل جميع الاجزاء واستخدامها جميعها حسب احتياجاتك.
ما هي طريقة الاستخدام؟
لنقل أنه لدينا مشروع معين حالياً, سنقوم بتحميل ملفات هذه المكتبة فيه بالذهاب أولاً إلى صفحة التحميل للـ jQuery UI من هنا (http://jqueryui.com/download) ثم اختيار ما نحتاج منها.
Accordion
في هذا الشرح سنشرح طريقة استخدام وتركيب (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.
وهذا الكود هي القائمة التي سنعملها دائماً مع التحرير والزيادة في القائمه حسب حاجتنا.
بعد حفظها وفتح الصفحه في المتصفح سنجد فقط القائمة المنسدله بالمحتوى كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr1.gif
سنقوم بتحويل الصفحة من اليمين إلى اليسار كالتالي نبحث عن
ونستبدله بـ
بعدها ستكون الصفحة من اليمين إلى اليسار بدون مشاكل كالتالي :
http://www.tech-wd.com/wd/wp-content/uploads/jqpr2.gif
بعد وجود أكواد عرض القائمة وتحويلها من اليمين إلى اليسار كل ما علينا لجعل القائمه تتحرك هو هذا الكود :
#accordion هو الآي دي الخاص بالقائمة كما تجدونه في كود الـ XHTML الخاص بعرض القائمة في الأعلى (السطر الأول)
و h3 الذي نجده كذالك بكود الـ XHTML والذي يمثل عنوان القائمة First (http://www.ahlylove.com/vb/)
ارجوا ان يكون الشرح واضح, طبعاً هناك أكواد إضافية يمكننا شرحها كذالك مثلاً تحت الكود السابق كالتالي
وهو موضح باللون الأحمر, وهذا الكود فقط لتغيير شكل عنوان القائمة عند مرور الفأرة فقط لا غير.
وستجد كذالك هذا الكود الخاص بتنسيق الصفحة :
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
يمكنك حذفه لإنه كود خاص بتنسيق الصفحه بشكل خاص غير مهم جداً فلو حذفت ستجد التصميم لازال جميل ومتناسق لإنه تم استدعاء custom.css في السابق والذي يحتوي على التنسيق الأساسي للقائمة.
يمكنك الأن الإستفادة من الدرس لاختيار احد الإضافات ومن ثم فتحها كما تم توضيحه ومسح ما هو غير مهم كرسالة الترحيب ومتابعة جميع الخطوات السابقة للإستفاده من الإضافات بشكل جيد.
لتحميل الملف وفك ضغطه (http://www.tech-wd.com/wd/wp-content/uploads/2009/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منقوووووش بولسطتى من عالم التقنية