تأكد من أن المؤشر في الموقع الذي تريد إدراج عنصر الواجهة فيه على الصفحة.
تاريخ آخر تحديث
30 أبريل 2026
تعرف على كيفية إضافة وظائف مثل التطبيقات لمشاريع ويب Dreamweaver الخاصة بك باستخدام عناصر واجهة مستخدم jQuery UI والجوال. قم بإدراج الأكورديونات وعلامات التبويب، وأشرطة التمرير، ومربعات الإكمال التلقائي بدون كتابة أي تعليمة برمجية.
تُعد عناصر الواجهة تطبيقات ويب صغيرة مكتوبة بلغات مثل DHTML وJavaScript يمكن إدراجها وتنفيذها في صفحات الويب. وضمن أمور أخرى، تساعد عناصر واجهة الويب هذه في تكرار تجارب سطح المكتب على صفحات الويب.
وتوفر عناصر واجهة مستخدم jQuery مثل الأكورديون وعلامات التبويب وملتقط التاريخ وشريط التمرير والإكمال التلقائي تجربة سطح المكتب على الويب.
على سبيل المثال، يمكن استخدام عنصر الواجهة Tabs في تكرار ميزة علامة التبويب لمربعات الحوار في تطبيقات سطح المكتب.
يحتوي Dreamweaver أيضًا على مجموعة من عناصر واجهة مستخدم jQuery للجوال التي يمكنك استخدامها للإنشاء من العناصر والميزات الأخرى المستخدمة بشكل عام في تطبيقات الويب الخاصة بالجوال. على سبيل المثال، يمكنك استخدام أداة jQuery Mobile لإضافة عناصر نماذج متوافقة مع الأجهزة المحمولة، مثل مناطق النص ومربعات الاختيار.
إدراج عنصر واجهة jQuery
عند إدراج عنصر واجهة jQuery، تتم إضافة ما يلي تلقائيًا إلى التعليمات البرمجية:
- إحالات إلى كل الملفات المستقلة
- علامة برامج نصية تتضمن واجهة برمجة التطبيقات لعنصر الواجهة. تُضاف أدوات إضافية إلى نفس وسم البرنامج النصي.
لمزيد من المعلومات حول أدوات jQuery، راجع http://jqueryui.com/demos/
ملاحظة
بالنسبة إلى تأثيرات jQuery، لا تتم إضافة الإحالة الخارجية إلى jquery-1.8.24.min.js نظرًا لأنه يتم تضمين هذا الملف تلقائيًا عند إضافة تأثير.
حدد Insert > jQuery UI واختر عنصر الواجهة المطلوب إدراجه.
إذا كنت تريد استخدام اللوحة Insert تكون عناصر الواجهة في القسم jQuery UI من اللوحة Insert.
عند تحديد عنصر واجهة jQuery، يتم عرض خصائصه في اللوحة Properties.
يمكنك معاينة عناصر واجهة jQuery في العرض Live أو في المستعرض الذي يدعم عناصر واجهة jQuery.
تعديل أدوات jQuery
حدد عنصر الواجهة المطلوب تعديله.
في اللوحة Properties، قم بتعديل الخصائص.
على سبيل المثال، أضف علامة تبويب إضافية في عنصر الواجهة Tabs، وحدد عنصر الواجهة وانقر فوق "+" في اللوحة Properties .
إدراج أدوات jQuery mobile
قبل أن تتمكن من استخدام أي من أدوات jQuery Mobile، يجب أولاً تعريف صفحة jQuery Mobile من خلال اختيار Insert > jQuery Mobile > Page.
يفتح مربع الحوار jQuery Mobile Files.
غيّر الإعدادات الافتراضية في مربع حوار ملفات jQuery Mobile أو اتركها مضبوطة على المسارات الافتراضية، وانقر OK.
في مربع حوار الصفحة الذي يفتح، اكتب اسماً في حقل المعرف، وحدد أو ألغِ تحديد مربعات الاختيار بجوار Header وFooter بناءً على ما إذا كنت تريد أقسام رأس وتذييل في صفحة mobile الخاصة بك.
في الصفحة التي تفتح في Dreamweaver، استبدل نص Header وContent وFooter بالنص والصور والعناصر الأخرى التي تريدها في صفحة mobile الخاصة بك.
ملاحظة
اجعل النص قصيراً والصور صغيرة للعرض على screens mobile الصغيرة.
أضف أدوات jQuery Mobile أخرى حسب الحاجة.
قم بمعاينة الصفحة على جهاز.
لمزيد من المعلومات، راجع معاينة صفحات الويب في Dreamweaver على أجهزة متعددة.
احفظ صفحة jQuery Mobile وجميع الملفات ذات الصلة.
لا تُطبَّق سمات jQuery Mobile مع إصدارات jQuery الأحدث
المشكلة
لا يتم تطبيق سمات jQuery Mobile، بما في ذلك عينات الألوان واللوحات، عند استخدام إصدارات أحدث من jQuery، مثل jQuery 3.7.1. نتيجة لذلك، قد لا يتم عرض سمات jquery بشكل صحيح أو تتصرف كما هو متوقع.
السبب
لم يعد jQuery Mobile معتمَدًا ولم يعد يتم صيانته بنشاط. لا يدعم إصدارات jQuery 3.x، مما يؤدي إلى مشاكل التوافق مع الإصدارات الأحدث.
الدقة/الحل البديل
لمتابعة استخدام ميزات jQuery Mobile (السمات وعينات الألوان واللوحات)، استخدم إصداراً أقدم متوافقاً من jQuery.
الإصدار الموصى به: jQuery 1.11.1 (أو إصدارات 1.x المدعومة الأخرى)
مثال
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
أضف إصدارًا مدعومًا من jQuery. على سبيل المثال، 1.11.1.
تأكد من تحميل مكتبة jQuery Mobile بعد نص jQuery البرمجي.
أعد تحميل الصفحة وتحقق من أن السمات وعينات الألوان واللوحات تُعرض بشكل صحيح.
ملاحظة
نظرًا لأن jQuery Mobile مهجور ولم يعد يتم تحديثه، استمر في استخدام إصدار jQuery قديم متوافق لمشاريع jQuery Mobile الحالية.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
