בחר Insert > Spry > Spry Tabbed Panels.
עודכן לאחרונה בתאריך
20 במאי 2021
הערה:
רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry.
אודות רכיב Widget מסוג כרטיסיות חלוניות
רכיב Widget מסוג כרטיסיות חלוניות הוא קבוצת חלוניות היכולות לאחסן תוכן בשטח מצומצם. המבקרים באתר יכולים להסתיר או להציג את התוכן המאוחסן בכרטיסיות החלוניות בלחיצה על כרטיסיית החלונית הרצויה. חלוניות הרכיב נפתחות כשהמבקר באתר לוחץ על הכרטיסיות השונות. ברכיב Widget מסוג כרטיסיות חלוניות, רק חלונית תוכן אחת נפתחת ברגע נתון. הדוגמה הבאה מציגה רכיב Widget מסוג כרטיסיות חלוניות, כשהחלונית השלישית פתוחה:
A. כרטיסייה B. תוכן C. רכיב Widget מסוג כרטיסיות חלוניות D. כרטיסיית חלונית
קוד HTML לרכיב Widget מסוג כרטיסיות חלוניות כולל תג div חיצוני, הכולל את כל החלוניות, רשימה של הכרטיסיות, תג div הכולל את חלוניות התוכן, ותג div לכל אחת מחלוניות התוכן. קוד HTML לרכיב Widget מסוג כרטיסיות חלוניות כולל גם תגי script בכותרת המסמך ולאחר סימן HTML של רכיב Widget מסוג כרטיסיות חלוניות.
להסבר מקיף בנושא אופן הפעולה של רכיבי Widget מסוג כרטיסיות חלוניות, כולל ניתוח מפורט של הקוד של רכיב מסוג זה, ראה www.adobe.com/go/learn_dw_sprytabbedpanels_il.
הוספה ועריכה של רכיב Widget מסוג כרטיסיית חלונית
הוספת רכיב Widget מסוג כרטיסיות חלוניות
הערה:
ניתן גם להוסיף רכיב Widget מסוג כרטיסיות חלוניות בעזרת הקטגוריה Spry בחלונית Insert.
הוספת חלונית לרכיב Widget מסוג כרטיסיות חלוניות
-
בחר רכיב Widget מסוג כרטיסיות חלוניות בחלון Document.
-
לחץ על הלחצן להוספת חלוניות ב-Property inspector (Window > Properties).
-
(אופציונלי) שנה את שם הכרטיסייה בעזרת בחירת הטקסט של הכרטיסייה בתצוגת Design ושינוי הטקסט.
מחיקת חלונית מרכיב Widget מסוג כרטיסיות חלוניות
-
בחר רכיב Widget מסוג כרטיסיות חלוניות בחלון Document.
-
בתפריט Panels ב-Property inspector (Window > Properties), בחר בשם החלונית שברצונך למחוק ולחץ על הלחצן מינוס (-).
פתיחת חלונית לעריכה
-
בצע אחת מהפעולות הבאות:
העבר את המצביע לכרטיסיית החלונית שברצונך לפתוח בתצוגת Design, ולחץ על סמל העין המוצג מימין לכרטיסייה.
בחר רכיב Widget מסוג כרטיסיות חלוניות בחלון Document, ולחץ על שם החלונית שברצונך לערוך בתפריט Panels ב-Property inspector (Window > Properties).
שינוי סדר החלוניות
-
בחר רכיב Widget מסוג כרטיסיות חלוניות בחלון Document.
-
בתפריט Panels של מפקח המאפיינים (Window > Properties), בחר בשם החלונית שברצונך להזיז.
-
לחץ על החצים למעלה או למטה כדי להזיז את החלונית למעלה או למטה.
הגדרת החלונית הפתוחה כברירת מחדל
ניתן להגדיר איזו חלונית מתוך רכיב Widget מסוג כרטיסיות חלוניות תיפתח כברירת מחדל כשהדף נפתח בדפדפן.
-
בחר רכיב Widget מסוג כרטיסיות חלוניות בחלון Document.
-
ב-Property inspector (Window > Properties), בחר בחלונית שברצונך לפתוח כברירת מחדל מהתפריט הנפתח Default.
התאמה אישית של רכיב Widget מסוג כרטיסיות חלוניות
למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג כרטיסיות חלוניות, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות את כללי CSS של רכיב Widget מסוג כרטיסיות חלוניות וליצור רכיב המעוצב בסגנון הרצוי.
לקבלת הפניה מהירה למידע על שינוי צבעים של רכיב Widget מסוג כרטיסיות חלוניות, ראה מדריך מהיר לעיצוב חלוניות עם כרטיסיות חלוניות, אקורדיונים וחלוניות הניתנות לצמצום של Spry מאת דיוויד פאוורס.
לרשימה מתקדמת של משימות עיצוב סגנונות, ראה www.adobe.com/go/learn_dw_sprytabbedpanels_custom_il.
כל כללי CSS בנושאים הבאים מתייחסים לכללי ברירת המחדל המאוחסנים בקובץ SpryTabbedPanels.css. Dreamweaver שומר את הקובץ SpryTabbedPanels.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב Widget של Spry מסוג כרטיסיות חלוניות. קובץ זה גם כולל הערות שימושיות לגבי סגנונות שונים החלים על הרכיב.
הערה:
למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג כרטיסיות חלוניות ישירות בקובץ CSS, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך את סגנון CSS של הרכיב. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.
סגנון טקסט של רכיב Widget מסוג כרטיסיות חלוניות
ניתן לעצב סגנון טקסט של רכיב Widget מסוג כרטיסיות חלוניות בעזרת הגדרת מאפיינים לכל המכל של רכיבי Widget מסוג כרטיסיות חלוניות, או הגדרת מאפיינים לרכיבי Widget בנפרד.
-
לשינוי סגנון הטקסט של רכיב Widget מסוג כרטיסיות חלוניות, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, והוסף מאפייני וערכי סגנון טקסט משלך.
טקסט לשינוי
כלל CSS מתאים
דוגמה של מאפיינים וערכים להוספה
טקסט בכל רכיב Widget
.TabbedPanels font: Arial; font-size:medium;
טקסט בכרטיסיות החלוניות בלבד
.TabbedPanelsTabGroup או .TabbedPanelsTab font: Arial; font-size:medium;
טקסט בחלוניות תוכן בלבד
.TabbedPanelsContentGroup או .TabbedPanelsContent font: Arial; font-size:medium;
שינוי צבעי רקע של רכיב Widget מסוג כרטיסיות חלוניות
-
לשינוי צבעי הרקע של חלקים שונים ברכיב Widget מסוג כרטיסיות חלוניות, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, והוסף או שנה מאפייני וערכי צבע רקע:
צבע לשינוי
כלל CSS מתאים
דוגמה של מאפיינים וערכים להוספה או לשינוי
צבע רקע של כרטיסיות החלוניות
.TabbedPanelsTabGroup או .TabbedPanelsTab background-color: #DDD; (זהו ערך ברירת המחדל).
צבע רקע של חלוניות התוכן
.Tabbed PanelsContentGroup או .TabbedPanelsContent background-color: #EEE; (זהו ערך ברירת המחדל).
צבע רקע של כרטיסיה שנבחרה
.TabbedPanelsTabSelected background-color: #EEE; (זהו ערך ברירת המחדל).
צבע רקע של כרטיסיות החלוניות במצב הצבעה
.TabbedPanelsTabHover background-color: #CCC; (זהו ערך ברירת המחדל.)
הגבלת הרוחב של כרטיסיות חלוניות
כברירת מחדל, רכיב Widget מסוג כרטיסיות חלוניות ממלא את השטח הזמין. אך ניתן להגביל את הרוחב של רכיב Widget מסוג כרטיסיות חלוניות בעזרת הגדרת מאפיין רוחב למכל של הרכיב.
-
אתר את כלל .TabbedPanels CSS בעזרת פתיחת הקובץ SpryTabbedPanels.css. כלל זה מגדיר מאפיינים לרכיב המכל הראשי של רכיב Widget מסוג כרטיסיות חלוניות.הערה:
ניתן גם לאתר את הכלל בערת בחירה ברכיב Widget מסוג כרטיסיות חלוניות וחיפוש בחלונית CSS Styles (Window > CSS). ודא שהחלונית מוגדרת על מצב Current.
-
הוסף מאפיין רוחב לכלל, לדוגמה width: 300px;.
