שימוש ברכיבי Widget מסוג אימות קבוצת לחצני אפשרויות‬ של Spry ב-Dreamweaver

חפש
הערה:

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

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

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

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

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

A. הודעות שגיאה של רכיב Widget מסוג אימות קבוצת לחצני אפשרויות B. רכיב Widget מסוג אימות קבוצת לחצני אפשרויות 

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

מצב Initial

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

מצב Valid

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

מצב Required

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

מצב Invalid

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

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

קוד HTML של ברירת המחדל לרכיב Widget מסוג אימות קבוצת לחצני אפשרויות, בדרך כלל בתוך טופס, כולל תג span של המכל המקיף את התג input type="radio"‎ של קבוצת לחצני האפשרויות. קוד HTML לרכיב Widget מסוג אימות קבוצת לחצני אפשרויות כולל גם תגי script בכותרת המסמך ולאחר קוד HTML של הרכיב.

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

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

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

  1. בחר Insert >‏ Spry >‏ Spry Validation Radio Group.
  2. בתיבת הטקסט Name, הזן שם לקבוצת לחצני האפשרויות.
  3. הוסף או הסר לחצני אפשרויות מהקבוצה בלחיצה על הלחצנים פלוס (+) או מינוס (-).
  4. בעמודה Label, לחץ על השם של כל לחצן אפשרויות כדי להפוך את השדה לשדה ניתן לעריכה, והקצה שמות ייחודיים לכל לחצן אפשרויות.
  5. בעמודה Value, לחץ על כל ערך כדי להפוך את השדה לשדה ניתן לעריכה, והקצה ערך ייחודי לכל לחצן אפשרויות.
  6. ‏(אופציונלי) לחץ על לחצן אפשרויות או על הערך שלו כדי לבחור שורה מסוימת, ולאחר מכן לחץ על לחצני החצים למעלה או למטה כדי להזיז את השורה למעלה או למטה.
  7. בחר סוג פריסה לקבוצת לחצני האפשרויות.

    Line breaks

    ממקם כל לחצן אפשרויות בשורה נפרדת בעזרת מעברי שורה (תגי br).

    Table

    ממקם כל לחצן אפשרויות בשורה נפרדת בטבלה (תגי tr).

  8. לחץ על OK.
הערה:

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

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

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

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

    Blur

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

    Change

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

    Submit

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

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

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

שינוי המצב הדרוש של לחצני אפשרויות

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

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

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

ניתן לציין ערך שיירשם כערך ריק או לא חוקי אם המשתמש יבחר לחצן אפשרויות שאחד מערכים אלה שויך לו. אם המשתמש בוחר לחצן אפשרויות עם ערך ריק, הדפדפן מחזיר את הודעת השגיאה Please make a selection. אם המשתמש בוחר לחצן אפשרויות עם ערך לא חוקי, הדפדפן מחזיר את הודעת השגיאה Please select a valid value.

לחצן אפשרויות עם ערך ריק ברכיב Widget מסוג קבוצת לחצני אפשרויות

  1. בחר בלחצן האפשרויות ברכיב Widget מסוג קבוצת לחצני אפשרויות שברצונך להשתמש בו ללחצן האפשרויות הריק או הלא חוקי. בעת קביעת ערכים ריקים או לא חוקיים לרכיב Widget, חייבים להיות לחצני אפשרויות מתאימים שערכים אלה כבר הוקצו להם.
  2. ב-Property inspector של לחצן האפשרויות (Window >‏ Properties), הקצה ללחצן האפשרויות ערך סימון. ליצירת לחצן אפשרויות עם ערך ריק, הקלד none בתיבת הטקסט Checked Value. ליצירת לחצן אפשרויות עם ערך לא חוקי, הקלד invalid בתיבת הטקסט Checked Value.
  3. בחר בכל רכיב Widget של אימות קבוצת לחצני האפשרויות בלחיצה על הכרטיסייה הכחולה של הרכיב.
  4. ב-Property inspector, ציין ערכים ריקים או ערכים לא חוקיים. ליצירת רכיב Widget המציג את הודעת השגיאה לערך ריק Please make a selection, הקלד none בתיבת הטקסט Empty Value. ליצירת רכיב Widget המציג את הודעת השגיאה לערך לא חוקי Please make a valid value, הקלד invalid בתיבת הטקסט Invalid Value.

    זכור כי יש להקצות את הערכים none או invalid גם ללחצן האפשרויות עצמו וגם לרכיב Widget של קבוצת לחצני האפשרויות כדי שהודעות השגיאה יוצגו כהלכה.

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

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

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

הערה:

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

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

  1. פתח את הקובץ SpryValidationRadio.css.

  2. אתר את כלל CSS לשינוי חלק מהרכיב. לדוגמה, לשינוי צבע הרקע של מצב נדרש של רכיב Widget מסוג קבוצת לחצני אפשרויות, ערוך את הכלל radioRequiredState בקובץ SpryValidationRadio.css.

  3. הכנס שינויים בכלל CSS ושמור את הקובץ.

הקובץ SpryValidationRadio.css כולל הערות מפורטות, המסבירות את הקוד ואת המטרה של כללים מסוימים. למידע נוסף, ראה ההערות בקובץ.

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

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

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

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

    כלל CSS מתאים

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

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

    		 .radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg

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

פריטים דומים נוספים

לוגו של Adobe

כניסה לחשבון

קישורים מהירים

צפייה בכל התוכניות שלך נהל את התוכניות שלך

Legal Notices    |    Online Privacy Policy