רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry.
רכיב Widget מסוג חלונית הניתנת לצמצום הוא חלונית היכולה לאחסן תוכן בשטח מצומצם. המשתמש מסתיר או מציג את התוכן המאוחסן בחלונית הניתנת לצמצום בלחיצה על כרטיסיית החלונית. הדוגמה הבאה מציגה רכיב Widget מסוג חלונית הניתנת לצמצום, כשהוא מורחב ומצומצם:
A. מורחב B. מצומצם
קוד HTML לרכיב Widget מסוג חלונית הניתנת לצמצום כולל תג div חיצוני הכולל תג div של התוכן ותג div של מכל הכרטיסייה. קוד HTML לרכיב Widget מסוג חלונית הניתנת לצמצום כולל גם תגי script בכותרת המסמך ולאחר סימן HTML של החלונית הניתנת לצמצום.
להסבר מקיף בנושא אופן הפעולה של רכיבי Widget מסוג חלונית הניתנת לצמצום, כולל ניתוח מפורט של הקוד של רכיב מסוג זה, ראה www.adobe.com/go/learn_dw_sprycollapsiblepanel_il.
ניתן גם להוסיף רכיב Widget מסוג חלונית הניתנת לצמצום בעזרת הקטגוריה Spry בחלונית Insert.
העבר את המצביע לכרטיסיית החלונית כדי לפתוח אותה בתצוגת Design, ולחץ על סמל העין המוצג מימין לכרטיסייה.
בחר רכיב Widget מסוג חלונית הניתנת לצמצום בחלון Document, ובחר Open או Closed מהתפריט הנפתח Display ב-Property inspector (Window > Properties).
ניתן להגדיר את מצב ברירת המחדל (פתוח או סגור) לרכיב Widget מסוג חלונית הניתנת לצמצום כשדף האינטרנט נטען בדפדפן.
כברירת מחדל, כשמפעילים אנימציה לרכיב Widget מסוג חלונית הניתנת לצמצום, החלונית נפתחת ונסגרת בהדרגה ובאופן חלק כשמבקר באתר לוחץ על כרטיסיית החלונית. אם תבטל את האנימציה, החלונית הניתנת לצמצום נפתחת ונסגרת בבת אחת.
למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג חלונית הניתנת לצמצום, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות את כללי CSS של רכיב Widget מסוג חלונית הניתנת לצמצום וליצור חלונית הניתנת לצמצום המעוצבת בסגנון הרצוי.
לקבלת הפניה מהירה למידע על שינוי צבעים של רכיב Widget מסוג חלונית הניתנת לצמצום, ראה מדריך מהיר לעיצוב חלוניות עם כרטיסיות חלוניות, אקורדיונים וחלוניות הניתנות לצמצום של Spry מאת דיוויד פאוורס.
לרשימה מתקדמת של משימות סגנון, ראה www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_il.
כל כללי CSS בנושאים הבאים מתייחסים לכללי ברירת המחדל המאוחסנים בקובץ SpryCollapsiblePanel.css. Dreamweaver שומר את הקובץ SpryCollapsiblePanel.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב Widget של Spry מסוג חלונית הניתנת לצמצום. קובץ זה גם כולל הערות שימושיות לגבי סגנונות שונים החלים על הרכיב.
למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג חלונית הניתנת לצמצום ישירות בקובץ CSS הנלווה, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך סגנון CSS של חלונית הניתנת לצמצום. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.
ניתן לעצב סגנון טקסט של רכיב Widget מסוג חלונית הניתנת לצמצום בעזרת הגדרת מאפיינים לכל המכל של רכיבי Widget מסוג חלונית הניתנת לצמצום, או הגדרת מאפיינים לרכיבי Widget בנפרד.
סגנון לשינוי |
כלל CSS מתאים |
דוגמה של מאפיינים וערכים להוספה או לשינוי |
|---|---|---|
טקסט בכל החלונית הניתנת לצמצום |
.CollapsiblePanel | font: Arial; font-size:medium; |
טקסט בכרטיסיית החלונית בלבד |
.CollapsiblePanelTab | font: bold 0.7em sans-serif; (זהו ערך ברירת המחדל). |
טקסט בחלונית התוכן בלבד |
.CollapsiblePanelContent | font: Arial; font-size:medium; |
צבע לשינוי |
כלל CSS מתאים |
דוגמה של מאפיינים וערכים להוספה או לשינוי |
|---|---|---|
צבע רקע של כרטיסיית החלונית |
.CollapsiblePanelTab | background-color: #DDD; (זהו ערך ברירת המחדל). |
צבע רקע של חלונית התוכן |
.CollapsiblePanelContent | background-color: #DDD; |
צבע רקע של כרטיסיית החלונית כשהחלונית פתוחה |
.CollapsiblePanelOpen .CollapsiblePanelTab | background-color: #EEE; (זהו ערך ברירת המחדל). |
צבע רקע של כרטיסיית החלונית הפתוחה במצב הצבעה |
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover | background-color: #CCC; (זהו ערך ברירת המחדל.) |
כברירת מחדל, רכיב Widget מסוג חלונית הניתנת לצמצום ממלא את השטח הזמין. אך ניתן להגביל את הרוחב של רכיב Widget מסוג חלונית הניתנת לצמצום בעזרת הגדרת מאפיין רוחב למכל החלונית הניתנת לצמצום.
ניתן גם לאתר את הכלל בעזרת בחירה ברכיב Widget מסוג חלונית הניתנת לצמצום וחיפוש בחלונית CSS Styles (Window > CSS). ודא שהחלונית מוגדרת על מצב Current.
כניסה לחשבון