حدد Insert > Spry > Spry Tabbed Panels.
تاريخ آخر تحديث
6 مايو 2021
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم Tabbed Panels
يعد عنصر واجهة مستخدم 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 وتحريره
إدراج عنصر واجهة مستخدم Tabbed Panels
ملاحظة:
يمكنك أيضًا إدراج عنصر واجهة مستخدم Tabbed Panels باستخدام الفئة Spry في اللوحة Insert.
إضافة لوحة إلى عنصر واجهة مستخدم Tabbed Panels
-
حدد عنصر واجهة مستخدم Tabbed Panels في النافذة Document.
-
انقر فوق زر علامة الزائد بجوار Panels في عارض الخصائص (Window > Properties).
-
(اختياري) قم بتغيير اسم علامة التبويب عن طريق تحديد نص علامة التبويب في طريقة العرض Design وتبديل النص.
حذف لوحة من عنصر واجهة مستخدم Tabbed Panels
-
حدد عنصر واجهة مستخدم Tabbed Panels في النافذة Document.
-
في القائمة Panels في عارض الخصائص (Window > Properties)، وحدد اسم اللوحة التي تريد حذفها، ثم انقر فوق زر علامة الطرح.
فتح لوحة لتحريرها
-
قم بأحد الإجراءات التالية:
حرك مؤشر الماوس فوق علامة تبويب اللوحة التي تريد فتحها في طريقة العرض Design، ثم انقر فوق رمز العين التي تظهر على يمين علامة التبويب.
حدد عنصر واجهة مستخدم Tabbed Panels في النافذة Document، ثم انقر فوق اسم اللوحة التي تريد تحريرها في القائمة Panels في عارض الخصائص (Window > Properties).
تغيير ترتيب اللوحات
-
حدد عنصر واجهة مستخدم Tabbed Panels في النافذة Document.
-
في القائمة Panels الخاصة بعارض الخصائص (Window > Properties)، حدد اسم اللوحة التي تريد تحريكها.
-
انقر فوق السهم لأعلى أو لأسفل لتحريك اللوحة لأعلى أو لأسفل.
تعيين اللوحة الافتراضية المفتوحة
يمكنك تعيين لوحة عنصر واجهة مستخدم Tabbed Panels التي يتم فتحها افتراضيًا عند فتح الصفحة في مستعرض.
-
حدد عنصر واجهة مستخدم Tabbed Panels في النافذة Document.
-
في عارض الخصائص (Window > Properties)، حدد اللوحة التي تريد فتحها افتراضيًا من القائمة المنبثقة Default panel.
تخصيص عنصر واجهة مستخدم 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 عن طريق إعداد خصائص حاوية عنصر واجهة مستخدم 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
-
لتغيير ألوان خلفية أجزاء مختلفة من عنصر واجهة مستخدم 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.
-
إضافة قيمة وخاصية عرض للقاعدة، على سبيل المثال width: 300px;.
