ملاحظة:

تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.

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

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

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

مقطع تعليمة HTML البرمجية الذي يحدد التركيب البنيوي لعنصر واجهة المستخدم.

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

JavaScript الذي يتحكم في كيفية استجابة عنصر واجهة المستخدم للأحداث التي قام بها المستخدم.

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

CSS الذي يحدد مظهر عنصر واجهة المستخدم.

يدعم إطار عمل Spry مجموعة من عناصر واجهة المستخدم القابلة لإعادة الاستخدام والمكتوبة في JavaScript، وCSS، وHTML قياسية. يمكنك إدخال عناصر واجهة المستخدم هذه بسهولة—التعليمة البرمجية هي HTML وCSS بأبسط صورة—ثم قم بتصميم عنصر واجهة المستخدم. تشتمل السلوكيات الموجودة داخل إطار العمل على الوظائف التي تتيح للمستخدمين إمكانية إظهار المحتوى أو إخفائه في الصفحة، وتغيير مظهر الصفحة (مثل اللون)، والتفاعل مع عناصر القائمة، والمزيد.

كل عنصر واجهة مستخدم في إطار عمل Spry مرتبط بملفات CSS وJavaScript فريدة. يتضمن ملف CSS كل ما هو ضروري لتصميم عنصر واجهة المستخدم، ويوفر له ملف JavaScript وظائفه. عند إدخال عنصر واجهة مستخدم عن طريق استخدام واجهة Dreamweaver، يقوم Dreamweaver تلقائيًا بربط هذه الملفات بصفحتك بحيث يتضمن عنصر واجهة المستخدم الوظائف والأنماط.

تتم تسمية ملفات CSS، وJavaScript المرتبطة بعنصر واجهة مستخدم معين على اسم العنصر، ولهذا يكون من السهل عليك معرفة الملفات المتصلة بعناصر واجهة المستخدم. (على سبيل المثال، الملفات المرتبطة بعنصر واجهة المستخدم Accordion تسمى SpryAccordion.css وSpryAccordion.js). إذا أدخلت عنصر واجهة مستخدم في صفحة محفوظة، يقوم Dreamweaver بإنشاء دليل SpryAssets في موقعك، ويحفظ ملفات JavaScript وCSS المرادفة في هذا الموقع.

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

توفر الموارد المتصلة التالية مزيدًا من المعلومات عن تخصيص عناصر واجهة مستخدم Spry.

نماذج عناصر واجهة مستخدم Spry

تخصيص أشرطة قوائم Spry في Dreamweaver

عناصر واجهة المستخدم Spry Validation (تدريب بالفيديو)

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

  1. حدد Insert > Spry، ثم اختر عنصر واجهة المستخدم لإدخاله.

إذا قمت بإدخال عنصر واجهة مستخدم، يقوم Dreamweaver بتضمين ملفات Spry JavaScript وCSS الضرورية في موقعك عند حفظ الصفحة.

ملاحظة:

يمكنك أيضًا إدخال عناصر واجهة مستخدم Spry باستخدام الفئة Spry في اللوحة Insert.

تحديد عنصر واجهة مستخدم Spry

  1. واصل احتجاز مؤشر الماوس فوق عنصر واجهة المستخدم إلى أن ترى المخطط التفصيلي المبوب الأزرق لعنصر واجهة المستخدم.
  2. انقر فوق علامة تبويب عنصر واجهة المستخدم الموجودة في الزاوية العلوية اليسرى لعنصر واجهة المستخدم.

تحرير عنصر واجهة مستخدم Spry

  1. حدد عنصر واجهة المستخدم لتحرير عارض الخصائص وإجراء تغييراتك عليه (Window > Properties).

للاطلاع على التفاصيل عن إجراء التغييرات على عناصر واجهة مستخدم معينة، راجع الأقسام المناسبة لكل عنصر واجهة مستخدم.

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

  1. قم بتحديد موضع ملف CSS المناسب لعنصر واجهة المستخدم في المجلد SpryAssets الموجود بموقعك، وتحرير CSS وفقًا لتفضيلاتك.

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

ملاحظة:

يمكنك أيضًا تنسيق عنصر واجهة مستخدم Spry عن طريق تحرير التصميمات في اللوحة CSS، كما تريد لأي عنصر مصمَّم آخر في الصفحة.

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

تتوفر عناصر واجهة مستخدم الويب أكثر من عناصر واجهة مستخدم Spry التي يتم تثبيتها مع Dreamweaver. يوفر Adobe Exchange عناصر واجهة مستخدم ويب قام بتطويرها محترفون مبدعون.

  1. اختر مستعرضًا لعناصر واجهة مستخدم الويب من القائمة Extend Dreamweaver  في الشريط Application.

للاطلاع على نظرة عامة على فيديو من فريق هندسة Dreamweaver عن العمل باستخدام عناصر واجهة المستخدم، راجع www.adobe.com/go/dw10widgets_ae.

تغيير المجلد الافتراضي لأصول Spry

عند إدخال عنصر واجهة مستخدم Spry، أو مجموعة بيانات، أو تأثير في صفحة محفوظة، يقوم Dreamweaver بإنشاء دليل SpryAssets في موقعك، ويحفظ ملفات JavaScript وCSS المرادفة في ذلك الموقع. يمكنك تغيير الموقع الافتراضي الذي يحفظ Dreamweaver فيه أصول Spry، إذا كنت تفضل حفظها في أي مكان آخر.

  1. حدد Sites > Manage Sites.
  2. حدد موقعك في مربع الحوار Manage Sites، ثم انقر فوق Edit.
  3. في مربع الحوار Site Setup، قم بتوسيع Advanced Settings وحدد الفئة Spry.
  4. أدخل مسارًا للمجلد الذي تريد استخدامه لأصول Spry، ثم انقر فوق OK. يمكنك أيضًا النقر فوق رمز المجلد للاستعراض إلى موقع.

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

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