ملاحظة:

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

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

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

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

A. علامة تبويب اللوحة Accordion B. محتوى اللوحة Accordion C. اللوحة Accordion (فتح) 

يتألف HTML الافتراضي لعنصر واجهة مستخدم Accordion علامة div خارجية تحتوي على كل اللوحات، وعلامة div لكل لوحة، وdiv للرأس وdiv للمحتوى داخل العلامة لكل لوحة. من الممكن أن يتضمن عنصر واجهة مستخدم Accordion أي عدد من اللوحات الفردية. تتضمن HTML لعنصر واجهة مستخدم Accordion أيضًا علامات script أعلى المستند وبعد علامات التغيير في HTML للأكورديون.

للاطلاع على شرح أشمل لكيفية عمل عنصر واجهة مستخدم Accordion، بما في ذلك تحليل كامل للتعليمة البرمجية لعنصر واجهة مستخدم Accordion، راجع www.adobe.com/go/learn_dw_spryaccordion_ae.

للاطلاع على تدريب بشأن العمل باستخدام عنصر واجهة مستخدم Accordion، راجع www.adobe.com/go/vid0167_ae.

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

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

  1. حدد Insert > Spry > Spry Accordion.

ملاحظة:

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

إضافة لوحة إلى عنصر واجهة مستخدم Accordion

  1. حدد عنصر واجهة مستخدم Accordion في النافذة Document.
  2. انقر فوق الزر Panels Plus (+) في عارض الخصائص (Window > Properties).
  3. (اختياري) قم بتغيير اسم اللوحة عن طريق تحديد نص اللوحة في طريقة العرض Design وتبديل النص.

حذف لوحة من عنصر واجهة مستخدم Accordion

  1. حدد عنصر واجهة مستخدم Accordion في النافذة Document.
  2. في القائمة Panels في عارض الخصائص (Window > Properties)، حدد اسم اللوحة لحذفها، وانقر فوق الزر Minus (-).

فتح لوحة لتحريرها

  1. قم بأحد الإجراءات التالية:
    • حرك مؤشر الماوس فوق علامة تبويب اللوحة لفتحها في طريقة العرض Design، ثم انقر فوق رمز العين التي تظهر على يمين علامة التبويب.

    • حدد عنصر واجهة مستخدم Accordion في النافذة Document، ثم انقر فوق اسم اللوحة لتحريرها في القائمة Panels في عارض الخصائص (Window > Properties).

تغيير ترتيب اللوحات

  1. حدد عنصر واجهة مستخدم Accordion في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد اسم اللوحة Accordion التي تريد تحريكها.
  3. انقر فوق السهم لأعلى أو لأسفل لتحريك اللوحة لأعلى أو لأسفل.

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

بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم Accordion، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تغيير قواعد CSS لعنصر واجهة مستخدم Accordion وإنشاء أكورديون مصمم حسب رغبتك.

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

للاطلاع على قائمة أكثر تقدمًا لمهام التصميم، راجع www.adobe.com/go/learn_dw_spryaccordion_custom_ae.

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

ملاحظة:

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

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

يمكنك أيضًا تصميم نص عنصر واجهة مستخدم Accordion‬ عن طريق إعداد خصائص حاوية عنصر واجهة مستخدم Accordion، أو عن طريق إعداد خصائص مكونات عنصر واجهة المستخدم فرديًا.

  1. لتغيير تصميم نص عنصر واجهة مستخدم Accordion، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم أضف قيم وخصائص تصميم نص من اختيارك:

    النص المطلوب تغييره

    قاعدة CSS ذات الصلة

    مثال على الخصائص والقيم المطلوب إضافتها

    النص في الأكورديون بالكامل (يتضمن كلاً من لوحة المحتوى وعلامة التبويب)

    .Accordion أو .AccordionPanel

    font: Arial; font-size:medium;

    النص في علامات تبويب لوحة الأكورديون فقط

    .AccordionPanelTab

    font: Arial; font-size:medium;

    النص في لوحات محتوى الأكورديون فقط

    .AccordionPanelContent

    font: Arial; font-size:medium;

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

  1. لتغيير ألوان خلفية أجزاء مختلفة من عنصر واجهة مستخدم Accordion، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بإضافة أو تغيير قيم وخصائص لون الخلفية:

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

    قاعدة CSS ذات الصلة

    مثال على الخاصية والقيمة المطلوب إضافتها أو تغييرها

    لون خلفية علامات تبويب لوحة الأكورديون

    .AccordionPanelTab

    background-color: #CCCCCC; (هذه هي القيمة الافتراضية.)

    لون خلفية لوحات محتوى الأكورديون

    .AccordionPanelContent

    background-color: #CCCCCC;

    لون خلفية لوحة الأكورديون المفتوحة

    .AccordionPanelOpen .AccordionPanelTab

    background-color: #EEEEEE; (هذه هي القيمة الافتراضية.)

    لون خلفية علامات تبويب اللوحة عند التحويم

    .AccordionPanelTabHover

    color: #555555; (هذه هي القيمة الافتراضية.)

    لون خلفية علامة تبويب اللوحة المفتوحة عند التحويم

    .AccordionPanelOpen .AccordionPanelTabHover

    color: #555555; (هذه هي القيمة الافتراضية.)

تقييد عرض الأكورديون

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

  1. قم بتحديد موقع قاعدة .Accordion CSS بفتح الملف SpryAccordion.css. هذه هي القاعدة المسؤولة عن تحديد خصائص لعنصر الحاوية الرئيسي لعنصر واجهة مستخدم Accordion.

    ملاحظة:

    يمكنك أيضًا تحديد موقع القاعدة بتحديد عنصر واجهة مستخدم Accordion، والبحث في اللوحة CSS Styles (Window > CSS Styles). تأكد من تعيين اللوحة إلى الوضع Current.

  2. إضافة قيمة وخاصية عرض للقاعدة، على سبيل المثال width: 300px;.

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

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