ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
يعد عنصر واجهة مستخدم Collapsible Panel لوحة يمكنها التخزين في مساحة مضغوطة. يمكن للمستخدمين إخفاء المحتوى أو كشفه في Collapsible Panel عن طريق النقر فوق علامة تبويب عنصر واجهة المستخدم. يبيّن المثال التالي عنصر واجهة مستخدم Collapsible Panel، موسعًا ومطويًا:
تتضمن 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 باستخدام الفئة Spry في اللوحة Insert.
يمكنك تعيين الحالة الافتراضية (مفتوح أو مغلق) لعنصر واجهة مستخدم Collapsible Panel عند تحميل صفحة الويب في مستعرض.
بشكل افتراضي، عند تمكين الرسم المتحرك لعنصر واجهة مستخدم 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، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم أضف قيم وخصائص تصميم نص من اختيارك:
النمط المطلوب تغييره
قاعدة CSS ذات الصلة
مثال على الخصائص والقيم المطلوب إضافتها أو تغييرها
النص في اللوحة القابلة للطي بالكامل
.CollapsiblePanel font: Arial; font-size:medium;
النص في علامة تبويب اللوحة فقط
.CollapsiblePanelTab font: bold 0.7em sans-serif; (هذه هي القيمة الافتراضية.)
النص في لوحة المحتوى فقط
.CollapsiblePanelContent font: Arial; font-size:medium;
-
لتغيير ألوان خلفية أجزاء مختلفة من عنصر واجهة مستخدم 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.
إن بنود Creative Commons لا تشمل منشورات Twitter™ وFacebook.