כיצד לבנות UX טוב יותר עם HTML5 נתונים * תכונות

האם אי פעם רצית להוסיף נתונים מותאמים אישית לאלמנט HTML מסוים כדי לגשת אליו מאוחר יותר עם JavaScript? לפני HTML5 הופיע בשוק, אחסון נתונים מותאמים אישית הקשורים DOM היה מהומה אמיתית, ומפתחים נאלצו להשתמש בכל מיני פריצות מגעיל, כגון הצגת תכונות לא סטנדרטיות או באמצעות שיטה מיושנת setUserData () כדי לעקוף את הבעיה.

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

תמיכה בדפדפן של התכונות הגלובליות החדשות טובה יחסית, שכן הן נתמכות על ידי כל הדפדפנים המודרניים (IE8-10 תומך בהם באופן חלקי).

תחביר של נתונים-* תכונות

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

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

 
 
 פלוני אלמוני 
 
 ג 'יין דו 
 

המותאם אישית נתונים-* תכונות גלובליות, בדיוק כמו מעמד ו id תכונות, כך שתוכל להשתמש בהם בכל אלמנט HTML. ניתן גם להוסיף רבים נתונים-* תכונות לתג HTML כרצונך. בדוגמה שלמעלה, לדוגמה, ניתן להציג תכונה מותאמת אישית חדשה שנקראת משתמש בנתונים כדי לאחסן שמות משתמש של עובדים.

 
 
 פלוני אלמוני 
 
 ג 'יין דו 
 

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

מתי להשתמש ומתי לא להשתמש בתכונות מותאמות אישית

W3C מגדיר מנהג נתונים-* תכונות כמו:

“תכונות נתונים מותאמות אישית מיועדות לאחסן נתונים מותאמים אישית באופן פרטי לדף או ליישום, שעבורם אין תכונות מתאימות יותר או אלמנטים.”

כדאי לשקול להשתמש נתונים-* תכונות כאשר לא ניתן למצוא תכונות סמנטיות אחרות עבור הנתונים שברצונך לאחסן.

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

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

המותאם אישית נתונים-* תכונות משמשות באופן נרחב על ידי מסגרות Frontend, כגון Bootstrap ו Zurb Foundation, גם כן. החדשות הטובות הן שאתה לא בהכרח צריך לדעת איך לכתוב JavaScript אם אתה רוצה להשתמש בתכונות קידומת נתונים כחלק במסגרת, כפי שאתה רק צריך להוסיף אותם קוד HTML כדי להפעיל פונקציונליות של תוסף.

קטע הקוד להלן מוסיף הסבר קצר בצד שמאל ללחצן ב Bootstrap על ידי שימוש ב- נתונים לעבור וה מיקום נתונים תכונות מותאמות אישית והקצאת ערכים מתאימים להם.

  הסבר קצר בצד ימין 

יעד נתונים-* תכונות עם CSS

למרות שזה לא מומלץ להשתמש נתונים-* תכונות רק למטרות עיצוב, אתה יכול לבחור את רכיבי HTML הם שייכים בעזרת בוררים תכונה כללית. אם ברצונך לבחור בכל רכיב שיש לו מאפיין מסוים בעל קידומת נתונים, השתמש בתחביר זה ב- CSS שלך:

 li [data-user] color: כחול; 

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

 li [data-department = "IT"] border: solid blue 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", department: "IT" 

 var jane = document.getElementById ("jane"); // janedoe

 ("מחלקה"), התראה (מחלקה););

 var city = $ ("# jane") נתונים ("עיר", "ניו יורק");