ملاحظة:
تم استبدال عناصر واجهة 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.
بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم 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، أو عن طريق إعداد خصائص مكونات عنصر واجهة المستخدم فرديًا.
-
لتغيير تصميم نص عنصر واجهة مستخدم Tabbed Panels، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم أضف قيم وخصائص تصميم نص من اختيارك:
النص المطلوب تغييره
قاعدة CSS ذات الصلة
مثال على الخصائص والقيم المطلوب إضافتها
النص في عنصر واجهة المستخدم بالكامل
.TabbedPanels font: Arial; font-size:medium;
النص في علامات تبويب اللوحة فقط
.TabbedPanelsTabGroup أو .TabbedPanelsTab font: Arial; font-size:medium;
النص في لوحات المحتوى فقط
.TabbedPanelsContentGroup أو .TabbedPanelsContent font: Arial; font-size:medium;
-
لتغيير ألوان خلفية أجزاء مختلفة من عنصر واجهة مستخدم Tabbed Panels، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بإضافة أو تغيير قيم وخصائص لون الخلفية لإجراء عملية الربط الخاصة بك:
اللون المطلوب تغييره
قاعدة CSS ذات الصلة
مثال على الخاصية والقيمة المطلوب إضافتها أو تغييرها
لون خلفية علامات تبويب اللوحة
.TabbedPanelsTabGroup أو .TabbedPanelsTab background-color: #DDD; (هذه هي القيمة الافتراضية)
لون خلفية لوحات المحتوى
.Tabbed PanelsContentGroup أو .TabbedPanelsContent background-color: #EEE; (هذه هي القيمة الافتراضية)
لون خلفية علامة التبويب المحددة
.TabbedPanelsTabSelected background-color: #EEE; (هذه هي القيمة الافتراضية)
لون خلفية علامات تبويب اللوحة عند تحرك مؤشر الماوس فوقها
.TabbedPanelsTabHover background-color: #CCC; (هذه هي القيمة الافتراضية.)
بشكل افتراضي، يتمدد عنصر واجهة مستخدم Tabbed Panels ليملأ المساحة المتاحة. ومع ذلك، يمكنك تقييد عرض واجهة عنصر مستخدم Tabbed Panels، عن طريق إعداد خاصية عرض لحاوية الأكورديون.
-
قم بتحديد موقع القاعدة .TabbedPanels CSS بفتح الملف SpryTabbedPanels.css. هذه هي القاعدة المسؤولة عن تحديد خصائص لعنصر الحاوية الرئيسي لعنصر واجهة مستخدم Tabbed Panels.
ملاحظة:
يمكنك أيضًا تحديد موقع القاعدة بتحديد عنصر واجهة مستخدم Tabbed Panels، والبحث في اللوحة CSS Styles (Window > CSS Styles). تأكد من تعيين اللوحة إلى الوضع Current.
إن بنود Creative Commons لا تشمل منشورات Twitter™ وFacebook.