حدد Insert > Spry > Spry Collapsible Panel.
تاريخ آخر تحديث
6 مايو 2021
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم Spry Collapsible Panel
يعد عنصر واجهة مستخدم Collapsible Panel لوحة يمكنها التخزين في مساحة مضغوطة. يمكن للمستخدمين إخفاء المحتوى أو كشفه في Collapsible Panel عن طريق النقر فوق علامة تبويب عنصر واجهة المستخدم. يبيّن المثال التالي عنصر واجهة مستخدم Collapsible Panel، موسعًا ومطويًا:
A. موسع B. مطوي
تتضمن HTML لعنصر واجهة مستخدم Collapsible Panel علامة div خارجية تحتوي على علامة div للمحتوى والعلامة div لحاوية علامة التبويب. وتتضمن HTML لعنصر واجهة مستخدم Collapsible Panel أيضًا علامات برامج نصية أعلى المستند وبعد علامات التغيير في HTML لـCollapsible Panel.
للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Collapsible Panel، بما في ذلك تحليل كامل للتعليمة البرمجية لعنصر واجهة مستخدم Collapsible Panel، راجع www.adobe.com/go/learn_dw_sprycollapsiblepanel_ae.
إدراج عنصر واجهة مستخدم Collapsible Panel وتحريره
إدراج عنصر واجهة مستخدم Collapsible Panel
ملاحظة:
يمكنك أيضًا إدراج عنصر واجهة مستخدم Collapsible Panel باستخدام الفئة Spry في اللوحة Insert.
فتح Collapsible Panel أو إغلاقها في طريقة العرض Design
-
قم بأحد الإجراءات التالية:
حرك مؤشر الماوس فوق علامة تبويب اللوحة في طريقة العرض Design، ثم انقر فوق رمز العين التي تظهر على يمين علامة التبويب.
حدد عنصر واجهة مستخدم Collapsible Panel في النافذة Document، ثم حدد Open أو Closed من القائمة المنبثقة Display في عارض الخصائص (Window > Properties).
تعيين الحالة الافتراضية لعنصر واجهة مستخدم Collapsible Panel
يمكنك تعيين الحالة الافتراضية (مفتوح أو مغلق) لعنصر واجهة مستخدم Collapsible Panel عند تحميل صفحة الويب في مستعرض.
-
حدد عنصر واجهة مستخدم Collapsible Panel في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد Open أو Closed من القائمة المنبثقة Default state.
تمكين أو تعطيل الرسم المتحرك لعنصر واجهة مستخدم Collapsible Panel
بشكل افتراضي، عند تمكين الرسم المتحرك لعنصر واجهة مستخدم Collapsible Panel، يتم فتح اللوحة أو إغلاقها بشكل تدريجي وسلس عندما ينقر زائر الموقع فوق علامة تبويب اللوحة. في حالة تعطيل الرسم المتحرك، يتم فتح وإغلاق اللوحة القابلة للطي بسرعة وعلى نحو مفاجئ.
-
حدد عنصر واجهة مستخدم Collapsible Panel في النافذة Document.
-
في عارض الخصائص (Window > Properties)، قم بتحديد Enable Animation أو إلغاء تحديده.
تخصيص عنصر واجهة مستخدم Collapsible Panel
بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم Collapsible Panel، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تغيير CSS لعنصر واجهة مستخدم Collapsible Panel وإنشاء لوحة قابلة للطي مصممة حسب رغبتك.
للاطلاع على مرجع سريع عن تغيير ألوان عنصر واجهة مستخدم Collapsible Panel، راجع موقع دافيد باورس الدليل السريع لتصميم لوحات Spry المبوبة، والأكورديونات، واللوحات المطوية.
للاطلاع على قائمة أكثر تقدمًا لمهام التصميم، راجع www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_ae.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryCollapsiblePanel.css. يقوم Dreamweaver بحفظ الملف SpryCollapsiblePanel.css في المجلد SpryAssets الخاص بموقعك عند إنشاء عنصر واجهة مستخدم Spry Collapsible Panel. يحتوي هذا الملف أيضًا على معلومات مفيدة معلق عليها وهذه المعلومات عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
ملاحظة:
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Collapsible Panel بسهولة مباشرةً في الملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS للوحة القابلة للطي. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
تصميم نص عنصر واجهة مستخدم Collapsible Panel
يمكنك أيضًا تصميم نص عنصر واجهة مستخدم Collapsible Panel عن طريق إعداد خصائص حاوية عنصر واجهة مستخدم Collapsible Panel، أو عن طريق إعداد خصائص مكونات عنصر واجهة المستخدم فرديًا.
-
لتغيير تنسيق نص عنصر واجهة مستخدم Collapsible Panel، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم أضف قيم وخصائص تصميم نص من اختيارك:
النمط المطلوب تغييره
قاعدة CSS ذات الصلة
مثال على الخصائص والقيم المطلوب إضافتها أو تغييرها
النص في اللوحة القابلة للطي بالكامل
.CollapsiblePanel font: Arial; font-size:medium;
النص في علامة تبويب اللوحة فقط
.CollapsiblePanelTab font: bold 0.7em sans-serif; (هذه هي القيمة الافتراضية.)
النص في لوحة المحتوى فقط
.CollapsiblePanelContent font: Arial; font-size:medium;
تغيير ألوان خلفية عنصر واجهة المستخدم Collapsible Panel
-
لتغيير ألوان خلفية أجزاء مختلفة من عنصر واجهة مستخدم Collapsible Panel، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بإضافة أو تغيير قيم وخصائص لون الخلفية لإجراء عملية الربط الخاصة بك:
اللون المطلوب تغييره
قاعدة CSS ذات الصلة
مثال على الخاصية والقيمة المطلوب إضافتها أو تغييرها
لون خلفية علامة تبويب اللوحة
.CollapsiblePanelTab background-color: #DDD; (هذه هي القيمة الافتراضية)
لون خلفية لوحة المحتوى
.CollapsiblePanelContent background-color: #DDD;
لون خلفية علامة التبويب عندما تكون اللوحة مفتوحة
.CollapsiblePanelOpen .CollapsiblePanelTab background-color: #EEE; (هذه هي القيمة الافتراضية)
لون الخلفية لعلامة تبويب اللوحة المفتوحة عند تحرك مؤشر الماوس فوقها
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover background-color: #CCC; (هذه هي القيمة الافتراضية.)
تقييد عرض اللوحة القابلة للطي
بشكل افتراضي، يتمدد عنصر واجهة مستخدم Collapsible Panel ليملأ المساحة المتاحة. ومع ذلك، يمكنك تقييد عرض واجهة عنصر مستخدم Collapsible Panel، عن طريق إعداد خاصية عرض لحاوية اللوحة القابلة للطي.
-
قم بتحديد موقع قاعدة .CollapsiblePanel CSS بفتح الملف SpryCollapsible Panel.css. هذه هي القاعدة المسؤولة عن تحديد خصائص لعنصر الحاوية الرئيسي لعنصر واجهة مستخدم Collapsible Panel.ملاحظة:
يمكنك أيضًا تحديد موقع القاعدة بتحديد عنصر واجهة مستخدم Collapsible Panel، والبحث في اللوحة CSS Styles (Window > CSS Styles). تأكد من تعيين اللوحة إلى الوضع Current.
-
إضافة قيمة وخاصية عرض للقاعدة، على سبيل المثال width: 300px;.
