הערה:

רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry‏.

אודות רכיב Widget מסוג אימות בחירה

רכיב Widget של Spry מסוג אימות בחירה הוא תפריט נפתח המציג מצבים חוקיים או לא חוקיים כשהמשתמש מבצע בחירה. לדוגמה, ניתן להוסיף רכיב Widget מסוג אימות בחירה הכולל רשימת מצבים, המקובצים בקבוצות שונות ומופרדים בקווים אופקיים. אם המשתמש בוחר בטעות באחד מהקווים החוצצים ולא באחד מהמצבים, רכיב Widget מסוג אימות בחירה מחזיר הודעה המציינת שהבחירה אינה חוקית.

הדוגמה הבאה מראה רכיב Widget מסוג אימות בחירה כשהוא מורחב, וכן את הצורה המצומצמת של הרכיב במצבים שונים:

רכיב Widget מסוג אימות בחירה
רכיב Widget מסוג אימות בחירה

A. רכיב Widget מסוג אימות בחירה במצב התמקדות B. רכיב Widget מסוג אימות בחירה, מצב חוקי C. רכיב Widget מסוג אימות בחירה, מצב דרוש D. רכיב Widget מסוג אימות בחירה, מצב לא חוקי 

רכיב Widget מסוג אימות בחירה כולל מספר מצבים (לדוגמה, חוקי, לא חוקי, ערך דרוש וכולי). ניתן לשנות את המאפיינים של מצבים אלה ב-Property inspector, בהתאם לתוצאות האימות הרצויות. רכיב Widget מסוג אימות בחירה יכול לבצע אימות במספר מצבים – לדוגמה, כשמשתמש לוחץ מחוץ לרכיב, כשהוא מבצע בחירות, או שהוא מנסה למסור את הטופס.

מצב Initial

מצב רכיב Widget כשהדף נטען בדפדפן, או כשמשתמש מאפס טופס.

מצב Focus

מצב רכיב Widget כשהמשתמש לוחץ עליו.

מצב Valid

מצב רכיב Widget כשמשתמש בחר פריט חוקי וניתן למסור את הטופס.

מצב Invalid

מצב רכיב Widget כשהמשתמש בחר פריט לא חוקי.

מצב Required

מצב רכיב Widget כשהמשתמש לא בחר פריט חוקי.

כל פעם שרכיב Widget מסוג אימות בחירה מזין אחד ממצבים אלה עקב אינטראקציה של המשתמש, הלוגיקה של Spry מחילה מחלקת CSS מוגדרת על מכל HTML של רכיב Widget בזמן הריצה. לדוגמה, אם משתמש מנסה למסור טופס, אך לא בחר פריט מהתפריט, Spry מחיל מחלקה על רכיב Widget זה הגורמת לו להציג את הודעת השגיאה "אנא בחר פריט". הכללים השולטים בסגנון ובתצוגה של הודעות השגיאה קיימים בקובץ CSS הנלווה לרכיב Widget ‏– SpryValidationSelect.css.

קוד HTML של ברירת המחדל לרכיב Widget מסוג אימות בחירה, בדרך כלל בתוך טופס, כולל תג מכל <span> ובתוכו תג <select> של אזור הטקסט. קוד HTML לרכיב Widget מסוג אימות בחירה כולל גם תגי script בכותרת המסמך ולאחר סימן HTML של הרכיב.

להסבר מקיף בנושא אופן הפעולה של רכיבי Widget מסוג אימות בחירה, כולל ניתוח מפורט של הקוד של רכיב מסוג זה, ראה www.adobe.com/go/learn_dw_spryselect_il.

הוספה ועריכה של רכיב Widget מסוג אימות בחירה

הוספת רכיב Widget מסוג אימות בחירה

  1. בחר Insert >‏ Spry >‏ Spry Validation Select.
  2. הגדר את האפשרויות בתיבת הדו-שיח Input Tag Accessibility Attributes ולחץ על OK.
  3. בתצוגת Code, הוסף תגי אפשרויות הכוללים פריטים וערכים בתפריט. Dreamweaver אינו עושה זאת בשבילך אוטומטית. למידע נוסף, ראה הסעיף הקודם.

הערה:

ניתן גם להוסיף רכיב Widget מסוג אימות בחירה בעזרת הקטגוריה Spry בחלונית Insert.

קביעה מתי יתבצע האימות

ניתן להגדיר מתי יתבצע האימות – כשמשתמש לוחץ מחוץ לרכיב Widget, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.

  1. בחר רכיב Widget מסוג אימות בחירה בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties) בחר באפשרות המציינת מתי ברצונך שהאימות יתבצע. ניתן לבחור בכל האפשרויות או באפשרות Submit בלבד.

    Blur

    מבצע אימות בכל פעם שמשתמש לוחץ מחוץ לרכיב Widget.

    Change

    מבצע אימות כשהמשתמש מבצע בחירות.

    Submit

    מבצע אימות כשהמשתמש מנסה למסור את הטופס. אפשרות המסירה נבחרת כברירת מחדל, ולא ניתן לבטל את הבחירה בה.

הצגת מצבי רכיב Widget בתצוגת Design

  1. בחר רכיב Widget מסוג אימות בחירה בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), בחר במצב שברצונך לראות מהתפריט הנפתח Preview States. לדוגמה, אם ברצונך לראות רכיב Widget במצבו החוקי, בחר Valid.

איסור או היתר ערכים ריקים

כברירת מחדל, כל רכיבי Widget מסוג אימות בחירה שתוסיף בעזרת Dreamweaver דורשים שהמשתמש יבחר פריטים בתפריט, שהוקצה להם ערך כשרכיב ה-Widget התפרסם בדף אינטרנט. עם זאת, ניתן לבטל אפשרות זו.

  1. בחר רכיב Widget מסוג אימות בחירה בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), סמן או בטל את הסימון באפשרות Do Not Allow Blank Values, בהתאם להעדפותיך.

קביעת ערך לא חוקי

ניתן לציין ערך שיירשם כערך לא חוקי אם המשתמש יבחר פריט בתפריט שערך זה שויך אליו. לדוגמה, אם תציין -1 כערך לא חוקי, ותקצה את הערך לתג של פריט בתפריט, רכיב Widget יחזיר הודעת שגיאה אם משתמש יבחר בפריט זה בתפריט.

<option value="-1"> ------------------- </option>
  1. בחר רכיב Widget מסוג אימות בחירה בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), הקלד מספר לשימוש כערך לא חוקי בתיבה Invalid Value.

התאמה אישית של רכיב Widget מסוג אימות בחירה

למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג אימות בחירה, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות כלל CSS של רכיב Widget מסוג אימות בחירה כדי ליצור רכיב בסגנון הרצוי.

כל כללי CSS בנושאים הבאים מתייחסים לכללי ברירת המחדל המאוחסנים בקובץ SpryValidationSelect.css. Dreamweaver שומר את הקובץ SpryValidationSelect.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב widget של Spry מסוג אימות בחירה. עיון בקובץ זה יכול להועיל, משום שהוא כולל מידע לגבי סגנונות שונים החלים על רכיב זה.

הערה:

למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג אימות בחירה בקובץ CSS הנלווה, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך את סגנון CSS של הרכיב. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.

סגנון טקסט הודעת שגיאה ברכיב Widget מסוג אימות בחירה

כברירת מחדל, הודעות שגיאה לרכיב Widget מסוג אימות בחירה מופיעות באדום עם גבול בעובי פיקסל אחד מסביב לטקסט.

  1. לשינוי סגנון הטקסט של רכיב Widget מסוג אימות בחירה, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את מאפייני ברירת המחדל, או הוסף מאפייני וערכי סגנון טקסט משלך.

    טקסט לקביעת סגנון

    כלל CSS מתאים

    מאפיינים רלוונטיים לשינוי

    טקסט של הודעת שגיאה

    .selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg

    color: #CC3333; border: 1px solid #CC3333;

שינוי צבעי רקע של רכיב Widget מסוג אימות בחירה

  1. לשינוי צבעי הרקע של רכיב Widget מסוג אימות בחירה במצבים שונים, השתמש בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את ערכי ברירת המחדל של צבע הרקע:

    צבע רקע לשינוי

    כלל CSS מתאים

    מאפיין רלוונטי לשינוי

    צבע רקע של רכיב Widget במצב חוקי

    .selectValidState select, select.selectValidState

    background-color: #B8F5B1;‎

    צבע רקע של רכיב Widget במצב לא חוקי

    select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select

    background-color: #FF9F9F;‎

    צבע רקע של רכיב Widget במצב התמקדות

    .selectFocusState select, select.selectFocusState

    background-color: #FFFFCC;

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת