تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
يعد عنصر واجهة مستخدم Tabbed Panels مجموعة من اللوحات المطوية التي تخزن كمية كبيرة من المحتوى في مساحة مضغوطة. يقوم عارضو الموقع بإخفاء المحتوى أو كشفه في Tabbed Panels عن طريق النقر فوق علامة تبويب اللوحة التي يريدون الوصول إليها. يتم فتح لوحات عنصر واجهة المستخدم وفقًا لنقر الزائر فوق علامات التبويب المختلفة. في عنصر واجهة مستخدم Tabbed Panels، تكون لوحة محتوى واحدة فقط مفتوحة في وقت معين. يوضح المثال التالي عنصر واجهة مستخدم Tabbed Panels، مع فتح اللوحة الثالثة:
A. Tab B. المحتوى C. عنصر واجهة مستخدم Spry Tabbed Panels D. اللوحة المبوبة
تتضمن تعليمة HTML البرمجية لعنصر واجهة مستخدم Tabbed Panels علامة div خارجية تحتوي على كل اللوحات، وهي قائمة تضم كل علامات التبويب، والعلامة div لتضمين لوحات المحتوى، وdiv لكل لوحة من لوحات المحتوى. كما تتضمن HTML لعنصر واجهة مستخدم Tabbed Panels أيضًا علامات برامج نصية أعلى المستند وبعد علامات التغيير في HTML لعنصر واجهة مستخدم Tabbed Panel.
للاطلاع على شرح أشمل لكيفية عمل عنصر واجهة مستخدم Tabbed Panels، بما في ذلك تحليل كامل للتعليمة البرمجية لعنصر واجهة المستخدم، راجع www.adobe.com/go/learn_dw_sprytabbedpanels_ae.
يمكنك أيضًا إدراج عنصر واجهة مستخدم Tabbed Panels باستخدام الفئة Spry في اللوحة Insert.
حرك مؤشر الماوس فوق علامة تبويب اللوحة التي تريد فتحها في طريقة العرض Design، ثم انقر فوق رمز العين التي تظهر على يمين علامة التبويب.
حدد عنصر واجهة مستخدم Tabbed Panels في النافذة Document، ثم انقر فوق اسم اللوحة التي تريد تحريرها في القائمة Panels في عارض الخصائص (Window > Properties).
يمكنك تعيين لوحة عنصر واجهة مستخدم Tabbed Panels التي يتم فتحها افتراضيًا عند فتح الصفحة في مستعرض.
بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم Tabbed Panels، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تغيير قواعد CSS لعنصر واجهة مستخدم Tabbed Panels وإنشاء عنصر واجهة مستخدم مصمم حسب رغبتك.
للاطلاع على مرجع سريع عن تغيير ألوان عنصر واجهة مستخدم Tabbed Panels، راجع موقع دافيد باورس الدليل السريع لتصميم لوحات Spry المبوبة، والأكورديونات، واللوحات المطوية.
للاطلاع على قائمة أكثر تقدمًا لمهام التصميم، راجع www.adobe.com/go/learn_dw_sprytabbedpanels_custom_ae.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryTabbedPanels.css. يقوم Dreamweaver بحفظ الملف SpryTabbedPanels.css في المجلد SpryAssets الخاص بموقعك عند إنشاء عنصر واجهة مستخدم Spry Tabbed Panels. يحتوي هذا الملف أيضًا على معلومات مفيدة معلق عليها وهذه المعلومات عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Tabbed Panels بسهولة مباشرةً في الملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS لعنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
يمكنك أيضًا تصميم نص عنصر واجهة مستخدم Tabbed Panels عن طريق إعداد خصائص حاوية عنصر واجهة مستخدم Tabbed Panels، أو عن طريق إعداد خصائص مكونات عنصر واجهة المستخدم فرديًا.
النص المطلوب تغييره |
قاعدة CSS ذات الصلة |
مثال على الخصائص والقيم المطلوب إضافتها |
---|---|---|
النص في عنصر واجهة المستخدم بالكامل |
.TabbedPanels | font: Arial; font-size:medium; |
النص في علامات تبويب اللوحة فقط |
.TabbedPanelsTabGroup أو .TabbedPanelsTab | font: Arial; font-size:medium; |
النص في لوحات المحتوى فقط |
.TabbedPanelsContentGroup أو .TabbedPanelsContent | font: Arial; font-size:medium; |
اللون المطلوب تغييره |
قاعدة CSS ذات الصلة |
مثال على الخاصية والقيمة المطلوب إضافتها أو تغييرها |
---|---|---|
لون خلفية علامات تبويب اللوحة |
.TabbedPanelsTabGroup أو .TabbedPanelsTab | background-color: #DDD; (هذه هي القيمة الافتراضية) |
لون خلفية لوحات المحتوى |
.Tabbed PanelsContentGroup أو .TabbedPanelsContent | background-color: #EEE; (هذه هي القيمة الافتراضية) |
لون خلفية علامة التبويب المحددة |
.TabbedPanelsTabSelected | background-color: #EEE; (هذه هي القيمة الافتراضية) |
لون خلفية علامات تبويب اللوحة عند تحرك مؤشر الماوس فوقها |
.TabbedPanelsTabHover | background-color: #CCC; (هذه هي القيمة الافتراضية.) |
بشكل افتراضي، يتمدد عنصر واجهة مستخدم Tabbed Panels ليملأ المساحة المتاحة. ومع ذلك، يمكنك تقييد عرض واجهة عنصر مستخدم Tabbed Panels، عن طريق إعداد خاصية عرض لحاوية الأكورديون.
يمكنك أيضًا تحديد موقع القاعدة بتحديد عنصر واجهة مستخدم Tabbed Panels، والبحث في اللوحة CSS Styles (Window > CSS Styles). تأكد من تعيين اللوحة إلى الوضع Current.
تسجيل الدخول إلى حسابك