הערה:
רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry.
רכיב Widget מסוג אקורדיון הוא קבוצת חלוניות הניתנות לצמצום, היכולות לאחסן כמות רבה של תוכן בשטח מצומצם. המבקרים באתר יכולים להסתיר או להציג את התוכן המאוחסן בתפריט האקורדיון בלחיצה על כרטיסיית החלונית. חלוניות האקורדיון מתרחבות או מצטמצמות כשהמבקר באתר לוחץ על הכרטיסיות השונות. בתפריט אקורדיון, רק חלונית תוכן אחת פתוחה ומוצגת ברגע נתון. הדוגמה הבאה מציגה רכיב Widget מסוג תפריט אקורדיון, כשהחלונית הראשונה מורחבת:
A. פריט בחלונית אקורדיון B. תוכן בחלונית אקורדיון C. חלונית אקורדיון (פתוחה)
קוד HTML של ברירת המחדל לרכיב Widget מסוג אקורדיון כולל תג div חיצוני הכולל את כל החלוניות, תג div לכל חלונית, תג div של כותרת ותג div של תוכן בתוך התג של כל חלונית. רכיב Widget מסוג אקורדיון יכול לכלול מספר לא מוגבל של חלוניות. קוד HTML לרכיב Widget מסוג אקורדיון כולל גם תגי script בכותרת המסמך ולאחר סימן HTML של תפריט האקורדיון.
להסבר מקיף בנושא אופן הפעולה של רכיבי Widget מסוג אקורדיון, כולל ניתוח מפורט של הקוד של רכיב מסוג זה, ראה www.adobe.com/go/learn_dw_spryaccordion_il.
לסרטון וידאו בנושא רכיב Widget מסוג אקורדיון, ראה www.adobe.com/go/vid0167_il.
הערה:
ניתן גם להוסיף רכיב Widget מסוג אקורדיון בעזרת הקטגוריה Spry בחלונית Insert.
למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג אקורדיון, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות את כללי CSS של רכיב Widget מסוג אקורדיון וליצור תפריט אקורדיון המעוצב בסגנון הרצוי.
לקבלת הפניה מהירה למידע על שינוי צבעים של רכיב Widget מסוג אקורדיון, ראה מדריך מהיר לעיצוב חלוניות עם כרטיסיות חלוניות, אקורדיונים וחלוניות הניתנות לצמצום של Spry מאת דיוויד פאוורס.
לרשימה מתקדמת של משימות סגנון, ראה www.adobe.com/go/learn_dw_spryaccordion_custom_il.
כל כללי CSS בנושאים הבאים מתייחסים לכללי ברירת המחדל המאוחסנים בקובץ SpryAccordion.css. Dreamweaver שומר את הקובץ SpryAccordion.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב widget של Spry מסוג אקורדיון. קובץ זה כולל נתונים עם הערות לגבי סגנונות שונים שניתן להחיל על רכיב Widget, כך שייתכן שיועיל לך אם תעיין בו.
הערה:
למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג אקורדיון ישירות בקובץ CSS, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך סגנון CSS לתפריט אקורדיון. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.
ניתן לעצב סגנון טקסט של רכיב Widget מסוג אקורדיון בעזרת הגדרת מאפיינים לכל המכל של רכיבי Widget מסוג אקורדיון, או הגדרת מאפיינים לרכיבי Widget בנפרד.
-
לשינוי סגנון הטקסט של רכיב Widget מסוג אקורדיון, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, והוסף מאפייני וערכי סגנון טקסט משלך.
טקסט לשינוי
כלל CSS מתאים
דוגמה של מאפיינים וערכים להוספה
טקסט בכל תפריט האקורדיון (כולל גם את הפריט וגם את חלונית התוכן)
.Accordion או .AccordionPanel font: Arial; font-size:medium;
טקסט בכרטיסיות בלבד של תפריט אקורדיון
.AccordionPanelTab font: Arial; font-size:medium;
טקסט בחלוניות תוכן בלבד בתפריט אקורדיון
.AccordionPanelContent font: Arial; font-size:medium;
-
לשינוי צבעי הרקע של חלקים שונים ברכיב Widget מסוג אקורדיון, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, והוסף או שנה מאפייני וערכי צבע רקע:
חלק מרכיב Widget לשינוי
כלל CSS מתאים
דוגמה של מאפיינים וערכים להוספה או לשינוי
צבע רקע של כרטיסיות בתפריט אקורדיון
.AccordionPanelTab background-color: #CCCCCC; (זהו ערך ברירת המחדל).
צבע רקע של חלוניות תוכן בתפריט אקורדיון
.AccordionPanelContent background-color: #CCCCCC;
צבע רקע של חלונית אקורדיון פתוחה
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE; (זהו ערך ברירת המחדל).
צבע רקע של כרטיסי חלונית בעת הצבעה
.AccordionPanelTabHover color: #555555; (זהו ערך ברירת המחדל).
צבע רקע של פריטי חלונית פתוחים בהצבעה
.AccordionPanelOpen .AccordionPanelTabHover color: #555555; (זהו ערך ברירת המחדל).
כברירת מחדל, רכיב Widget מסוג אקורדיון ממלא את השטח הזמין. אך ניתן להגביל את הרוחב של רכיב Widget מסוג אקורדיון בעזרת הגדרת מאפיין רוחב למכל של תפריט האקורדיון.
הודעות המתפרסמות ב- Twitter™ ו- Facebook אינן מכוסות בתנאי Creative Commons.