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

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

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

على سبيل المثال، يمكن استخدام عنصر الواجهة Tabs في تكرار ميزة علامة التبويب لمربعات الحوار في تطبيقات سطح المكتب.

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

إدراج عنصر واجهة jQuery

عند إدراج عنصر واجهة jQuery، تتم إضافة ما يلي تلقائيًا إلى التعليمات البرمجية:

  • إحالات إلى كل الملفات المستقلة
  • علامة برامج نصية تتضمن واجهة برمجة التطبيقات لعنصر الواجهة. تتم إضافة عناصر واجهة إضافية إلى نفس علامة البرامج النصية.

لمزيد من المعلومات حول عناصر واجهة jQuery، راجع http://jqueryui.com/demos/

ملاحظة:

بالنسبة إلى تأثيرات jQuery، لا تتم إضافة الإحالة الخارجية إلى jquery-1.8.24.min.js نظرًا لأنه يتم تضمين هذا الملف تلقائيًا عند إضافة تأثير.

  1. تأكد من أن المؤشر في الموقع الذي تريد إدراج عنصر الواجهة فيه على الصفحة.

  2. حدد Insert > jQuery UI واختر عنصر الواجهة المطلوب إدراجه.

    إذا كنت تريد استخدام اللوحة Insert تكون عناصر الواجهة في القسم jQuery UI من اللوحة Insert.

عند تحديد عنصر واجهة jQuery، يتم عرض خصائصه في اللوحة Properties.

يمكنك معاينة عناصر واجهة jQuery في العرض Live أو في المستعرض الذي يدعم عناصر واجهة jQuery.

تعديل عناصر واجهة مستخدم jQuery

  1. حدد عنصر الواجهة المطلوب تعديله.

  2. في اللوحة Properties، قم بتعديل الخصائص.

    على سبيل المثال، أضف علامة تبويب إضافية في عنصر الواجهة Tabs، وحدد عنصر الواجهة وانقر فوق "+" في اللوحة Properties .

إدراج عناصر واجهة مستخدم jQuery للجوال

  1. قبل أن يمكنك استخدام أيّ من عناصر واجهة مستخدم jQuery للجوال، يجب عليك أولاً تعريف صفحة jQuery Mobile من خلال تحديد Insert > jQuery Mobile > Page.

    يتم فتح مربع حوار jQuery Mobile Files.

    مربع حوار jQuery Mobile Files
    مربع حوار jQuery Mobile Files

  2. قم بتغيير الإعدادات الافتراضية في مربع حوار jQuery Mobile أو اتركها معينة للمسارات الافتراضية، ثم انقر فوق OK.

  3. في مربع حوار Page الذي يفتح، اكتب اسمًا في حقل ID، وحدد أو ألغ تحديد مربعات الاختيار بجوار Header and Footer استنادًا إلى ما إذا كنت تريد أقسام الرأس والتذييل في صفحة الويب لديك أم لا.

    مربع حوار الصفحة
    مربع حوار الصفحة

  4. في الصفحة التي يتم فتحها في Dreamweaver، استبدل نص Header وContent وFooter بالنص والصور والعناصر الأخرى التي تريدها في صفحة الجوال لديك.

    ملاحظة:

    أبق النص قصيرًا والصور صغيرة لعرضها على شاشات جوال صغيرة.

  5. أضف عناصر واجهة مستخدم jQuery Mobile الأخرى عند الحاجة.

  6. معاينة الصفحة على جهاز.

    لمزيد من المعلومات، راجع معاينة صفحات Dreamweaver على الويب على العديد من الأجهزة.

  7. احفظ صفحة jQuery mobile وجميع الملفات المرتبطة.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت