حدد Insert > Spry > Spry Accordion.
تاريخ آخر تحديث
6 مايو 2021
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم 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
ملاحظة:
يمكنك أيضًا إدخال عنصر واجهة مستخدم Accordion باستخدام الفئة Spry في اللوحة Insert.
إضافة لوحة إلى عنصر واجهة مستخدم Accordion
-
حدد عنصر واجهة مستخدم Accordion في النافذة Document.
-
انقر فوق الزر Panels Plus (+) في عارض الخصائص (Window > Properties).
-
(اختياري) قم بتغيير اسم اللوحة عن طريق تحديد نص اللوحة في طريقة العرض Design وتبديل النص.
حذف لوحة من عنصر واجهة مستخدم Accordion
-
حدد عنصر واجهة مستخدم Accordion في النافذة Document.
-
في القائمة Panels في عارض الخصائص (Window > Properties)، حدد اسم اللوحة لحذفها، وانقر فوق الزر Minus (-).
فتح لوحة لتحريرها
-
قم بأحد الإجراءات التالية:
حرك مؤشر الماوس فوق علامة تبويب اللوحة لفتحها في طريقة العرض Design، ثم انقر فوق رمز العين التي تظهر على يمين علامة التبويب.
حدد عنصر واجهة مستخدم Accordion في النافذة Document، ثم انقر فوق اسم اللوحة لتحريرها في القائمة Panels في عارض الخصائص (Window > Properties).
تغيير ترتيب اللوحات
-
حدد عنصر واجهة مستخدم Accordion في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد اسم اللوحة Accordion التي تريد تحريكها.
-
انقر فوق السهم لأعلى أو لأسفل لتحريك اللوحة لأعلى أو لأسفل.
تخصيص عنصر واجهة مستخدم 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، أو عن طريق إعداد خصائص مكونات عنصر واجهة المستخدم فرديًا.
-
لتغيير تصميم نص عنصر واجهة مستخدم Accordion، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم أضف قيم وخصائص تصميم نص من اختيارك:
النص المطلوب تغييره
قاعدة CSS ذات الصلة
مثال على الخصائص والقيم المطلوب إضافتها
النص في الأكورديون بالكامل (يتضمن كلاً من لوحة المحتوى وعلامة التبويب)
.Accordion أو .AccordionPanel font: Arial; font-size:medium;
النص في علامات تبويب لوحة الأكورديون فقط
.AccordionPanelTab font: Arial; font-size:medium;
النص في لوحات محتوى الأكورديون فقط
.AccordionPanelContent font: Arial; font-size:medium;
تغيير ألوان خلفية عنصر واجهة مستخدم Accordion
-
لتغيير ألوان خلفية أجزاء مختلفة من عنصر واجهة مستخدم 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، عن طريق إعداد خاصية عرض لحاوية الأكورديون.
-
قم بتحديد موقع قاعدة .Accordion CSS بفتح الملف SpryAccordion.css. هذه هي القاعدة المسؤولة عن تحديد خصائص لعنصر الحاوية الرئيسي لعنصر واجهة مستخدم Accordion.ملاحظة:
يمكنك أيضًا تحديد موقع القاعدة بتحديد عنصر واجهة مستخدم Accordion، والبحث في اللوحة CSS Styles (Window > CSS Styles). تأكد من تعيين اللوحة إلى الوضع Current.
-
إضافة قيمة وخاصية عرض للقاعدة، على سبيل المثال width: 300px;.
