البرمجةالدروس

jQuery UI

عبدالملك الثاري أرسل بريدا إلكترونيا 25 أبريل 2009آخر تحديث: 26 أبريل 2009
4 دقائق

ما هي jQuery UI

هي مكتبة Javascript تقوم بتحسين واجهة المستخدم في مشروعك الجديد من تطبيق الويب, و UI اختصار لـ User Interface يتم استخدام مكتبة jQuery منها ليتم استخدام مميزات هذه المكتبة الرائعة.

ماذا يمكنني أن أعمل بـ jQuery

ما يمكنك عمله هو :

  • (Accordion) قائمة محتوى بعرض كل قائمة بتأثير تدرجي موحد

  • (Datepicker) تقويم لحقول التواريخ

  • (Dialog) صندوق رسالة او تحذير أو أي شيء يظهر بشكل منبثق

  • (Progressbar) صندوق تحميل

  • (Slider) شريط تمرير

  • (Tabs) قائمة أفقية بعرض مباشر للمحتوى

وهناك بعض المميزات الأخرى الإضافية الجميلة التي يمكنك عملها في مشروعك مثل ترتيب عناصر او تأثير ظهور بتأثيرات مختلفة.

وكما يمكنك إختيار ستايلات كثيراً محدده مثلاً هنا يمكنك مشاهدة لون الستايل البرتقالي ويمكنك إختيار من قائمة كبيرة الستايلات التي تناسبك بألوان مختلفة كالأزرق أو الأسود وغيرها.

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

ما هي  طريقة الاستخدام؟

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

Accordion

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

بسم الله بعد الدخول لصفحة التحميل من الرابط في الأعلى نعمل (Deselect all components) ليتم إزالة التحديد من جميع العناصر ثم نختار UI Core وهو الجزء الأساسي من المكتبة ثم نختار Accordion كما في الصورة التالية :

ثم اختار الثيم المناسب لك من هنا :

ثم أضغط على Download.

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

 بعد تحميل الملف المضغوط وفك ضغطة ستجد هذه الملفات :

يمكنك حذف المجلد development-bundle فهو مجلد يحتوي على demos و docs لا تحتاجها في مشروعك.

وراح تجد الأمثلة لعرض ما تم تحميله في ملف index.html لما تفتحه من المتصفح, ويمكنك فتحه من خلال المحرر لديك لمشاهدة الأكواد التي تم العمل عليها لعرض ما تم عرضه.

سنلاحظ انه أولاً في داخل الـ head تم استدعاء هذه الأسطر

<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />   
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

 وهي الملفات التي تم تحميلها والتي تحتوي على التنسيق الخاص بها كالألوان والحدود ونوع الخط في ملف custom.css , وكذالك تم استدعاء ملف jQuery الأساسي وملف jQuery UI

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

الأن بعد حذف جميع الأجزاء ما عدا Accordion في الـ body هذا ما سيتبقى لنا داخل body.

<!– Accordion –>
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

وهذا الكود هي القائمة التي سنعملها دائماً مع التحرير والزيادة في القائمه حسب حاجتنا.

بعد حفظها وفتح الصفحه في المتصفح سنجد فقط القائمة المنسدله بالمحتوى كالتالي :

سنقوم بتحويل الصفحة من اليمين إلى اليسار كالتالي نبحث عن

<html>

ونستبدله بـ

<html dir="rtl">

بعدها ستكون الصفحة من اليمين إلى اليسار بدون مشاكل كالتالي :

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

<script type="text/javascript">
            $(function(){

                // Accordion
                $("#accordion").accordion({ header: "h3" });
               
            });
</script>

#accordion هو الآي دي الخاص بالقائمة كما تجدونه في كود الـ XHTML الخاص بعرض القائمة في الأعلى (السطر الأول) <div id="accordion">

و h3 الذي نجده كذالك بكود الـ XHTML والذي يمثل عنوان القائمة <h3><a href="#">First</a></h3>

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

<script type="text/javascript">
    $(function(){

        // Accordion
        $("#accordion").accordion({ header: "h3" });
       
        //hover states on the static widgets
        $(‘#dialog_link, ul#icons li’).hover(
            function() { $(this).addClass(‘ui-state-hover’); },
            function() { $(this).removeClass(‘ui-state-hover’); }
        );
       
    });
</script>

 

وهو موضح باللون الأحمر, وهذا الكود فقط لتغيير شكل عنوان القائمة عند مرور الفأرة فقط لا غير.

وستجد كذالك هذا الكود الخاص بتنسيق الصفحة :

<style type="text/css">
    /*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;}
</style>

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

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

لتحميل الملف وفك ضغطه | لمشاهدة المثال مباشرة من هنا

الوسوم
عبدالملك الثاري أرسل بريدا إلكترونيا 25 أبريل 2009آخر تحديث: 26 أبريل 2009
4 دقائق

‫14 تعليقات

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

    المكتبة التي كنت استخدمها سابقا معروفة أيضا ومشهورة وهي
    Prototype
    وهي ممتازة وقد تعودت عليها وعلى استخدام اكوادها ولكن ليست بقدر/مستوى JQuery
    مع اني أواجه صعوبة في الانتقال إلى الجديدة JQ حيث ان اسلوبها البرمجي يختلف نوعا ما.
    ولكن بالممارسة والحاجة يتعلم المرء.

    شكرا لاثارة هذا الموضوع الجميل والمهم.

  5. رائع جدا , جزاكم الله خيرا على توضيحك للـjQuery UI

    بدأت استخدام هذه المكتبة من فترة , شرحك مميز جدا , وسيسهل على المبتدأين خاصة التعامل مع هذه المكتبة من خلال تنزيل هذه الـUI

    جزاكم الله خيرا :)

    أخوك ,

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى