تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
يعد عنصر واجهة مستخدم 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 باستخدام الفئة Spry في اللوحة Insert.
حرك مؤشر الماوس فوق علامة تبويب اللوحة في طريقة العرض Design، ثم انقر فوق رمز العين التي تظهر على يمين علامة التبويب.
حدد عنصر واجهة مستخدم Collapsible Panel في النافذة Document، ثم حدد Open أو Closed من القائمة المنبثقة Display في عارض الخصائص (Window > Properties).
يمكنك تعيين الحالة الافتراضية (مفتوح أو مغلق) لعنصر واجهة مستخدم 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، أو عن طريق إعداد خصائص مكونات عنصر واجهة المستخدم فرديًا.
النمط المطلوب تغييره |
قاعدة CSS ذات الصلة |
مثال على الخصائص والقيم المطلوب إضافتها أو تغييرها |
---|---|---|
النص في اللوحة القابلة للطي بالكامل |
.CollapsiblePanel | font: Arial; font-size:medium; |
النص في علامة تبويب اللوحة فقط |
.CollapsiblePanelTab | font: bold 0.7em sans-serif; (هذه هي القيمة الافتراضية.) |
النص في لوحة المحتوى فقط |
.CollapsiblePanelContent | font: Arial; font-size:medium; |
اللون المطلوب تغييره |
قاعدة CSS ذات الصلة |
مثال على الخاصية والقيمة المطلوب إضافتها أو تغييرها |
---|---|---|
لون خلفية علامة تبويب اللوحة |
.CollapsiblePanelTab | background-color: #DDD; (هذه هي القيمة الافتراضية) |
لون خلفية لوحة المحتوى |
.CollapsiblePanelContent | background-color: #DDD; |
لون خلفية علامة التبويب عندما تكون اللوحة مفتوحة |
.CollapsiblePanelOpen .CollapsiblePanelTab | background-color: #EEE; (هذه هي القيمة الافتراضية) |
لون الخلفية لعلامة تبويب اللوحة المفتوحة عند تحرك مؤشر الماوس فوقها |
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover | background-color: #CCC; (هذه هي القيمة الافتراضية.) |
بشكل افتراضي، يتمدد عنصر واجهة مستخدم Collapsible Panel ليملأ المساحة المتاحة. ومع ذلك، يمكنك تقييد عرض واجهة عنصر مستخدم Collapsible Panel، عن طريق إعداد خاصية عرض لحاوية اللوحة القابلة للطي.
يمكنك أيضًا تحديد موقع القاعدة بتحديد عنصر واجهة مستخدم Collapsible Panel، والبحث في اللوحة CSS Styles (Window > CSS Styles). تأكد من تعيين اللوحة إلى الوضع Current.
تسجيل الدخول إلى حسابك