كيفية بناء أفضل UX مع سمات HTML5 البيانات *

هل سبق لك أن أردت إضافة بيانات مخصصة إلى عنصر HTML معين للوصول إليها لاحقًا باستخدام JavaScript؟ قبل ظهور HTML5 في السوق ، كان تخزين البيانات المخصصة المرتبطة بـ DOM يمثل مشكلة حقيقية ، وكان على المطورين استخدام جميع أنواع الاختراقات السيئة ، مثل تقديم سمات غير قياسية أو استخدام طريقة setUserData () القديمة للتغلب على المشكلة..

لحسن الحظ ، لم تعد مضطرًا إلى القيام بذلك ، حيث أن HTML5 قد أدخل عالميًا جديدًا البيانات-* السمات التي تجعل من الممكن تضمين معلومات إضافية على أي عناصر HTML. الجديد البيانات-* سمات جعل HTML أكثر الموسعة, وبالتالي تمكنك من بناء تطبيقات أكثر تعقيدا, وإنشاء تجربة مستخدم أكثر تطوراً دون الحاجة إلى استخدام تقنيات كثيفة الاستخدام للموارد مثل استدعاءات Ajax أو استعلامات قاعدة البيانات من جانب الخادم.

يعد دعم المستعرض للسمات العالمية الجديدة جيدًا نسبيًا ، حيث يدعمه جميع المتصفحات الحديثة (IE8-10 يدعمها جزئيًا).

بناء الجملة من البيانات-* سمات

بناء جملة الجديد البيانات-* السمات تشبه تلك الخاصة بسمات aria-prefixed. يمكنك إدراج أي سلسلة صغيرة بدلاً من * إشارة. تحتاج أيضًا إلى تعيين قيمة لكل سمة في شكل سلسلة.

دعنا نقول أنك تريد إنشاء معلومات عنا صفحة ، وتخزين اسم القسم حيث يعمل كل موظف. ليس عليك أن تفعل أي شيء آخر بصرف النظر عن إضافة ، قسم البيانات السمة المخصصة لعنصر HTML المناسب بالطريقة التالية:

 
 
 فلان الفلاني 
 
 جين دو 
 

العادة البيانات-* سمات عالمية ، تماما مثل صف دراسي و هوية شخصية السمات ، حتى تتمكن من استخدامها على كل عنصر HTML. يمكنك أيضا إضافة أكبر عدد ممكن البيانات-* سمات لعلامة HTML كما تريد. في المثال أعلاه ، على سبيل المثال ، يمكنك تقديم سمة مخصصة جديدة تسمى المستخدم البيانات لتخزين أسماء المستخدمين الموظفين.

 
 
 فلان الفلاني 
 
 جين دو 
 

كقاعدة عامة ، إذا كنت تريد إضافة السمة المخصصة الخاصة بك إلى عنصر HTML ، فيجب عليك دائمًا أن تسبقها بـ البيانات- خيط. وبالمثل ، عندما ترى سمة مسبوقة للبيانات في رمز شخص آخر ، يمكنك التأكد من أنها سمة مخصصة مقدمة من قبل المؤلف.

متى يجب استخدام ومتى لا تستخدم سمات مخصصة

يحدد W3C العرف البيانات-* سمات مثل ذلك:

“تهدف البيانات المخصصة إلى تخزين البيانات المخصصة الخاصة بالصفحة أو التطبيق ، والتي لا توجد بها سمات أو عناصر مناسبة.”

الأمر يستحق النظر في استخدام البيانات-* سمات عندما لا يمكنك العثور على أي سمات دلالات أخرى للبيانات التي تريد تخزينها.

إنها ليست أفضل فكرة لاستخدامها فقط لأغراض التصميم ، حيث يمكنك الاختيار من بينها صف دراسي و ال قلم المدقة الصفات. إذا كنت ترغب في تخزين نوع بيانات له HTML5 له سمة الدلالية ، مثل التاريخ والوقت سمة ل العنصر ، استخدم ذلك بدلاً من سمة بادئة البيانات.

من المهم أن نلاحظ ذلك البيانات-* سمات عقد البيانات هذا خاص بالصفحة أو التطبيق, مما يعني أنه سيتم تجاهلها من قبل وكلاء المستخدم ، مثل روبوتات محرك البحث والتطبيقات الخارجية. يمكن الوصول إلى سمات بادئة البيانات فقط عن طريق الشفرة التي تعمل على الموقع الذي يستضيف HTML.

العادة البيانات-* يتم استخدام السمات على نطاق واسع بواسطة أطر عمل الواجهة الأمامية ، مثل Bootstrap و Zurb Foundation ، أيضًا. والخبر السار هو أنك لا تحتاج بالضرورة إلى معرفة كيفية كتابة JavaScript إذا كنت تريد استخدام سمات سابقة للبيانات كجزء من إطار عمل ، حيث إنك تحتاج فقط إلى إضافتها إلى رمز HTML لبدء تشغيل وظيفة جافا سكريبت البرنامج المساعد.

يضيف مقتطف الشفرة أدناه تلميح أدوات على اليسار إلى زر في Bootstrap من خلال الاستفادة من بيانات تبديل و ال التنسيب البيانات السمات المخصصة ، وتعيين القيم المناسبة لهم.

  تلميح الأدوات على اليسار 

استهداف البيانات-* سمات مع CSS

على الرغم من أنه لا ينصح للاستخدام البيانات-* السمات فقط لأغراض التصميم ، يمكنك تحديد عناصر HTML التي ينتمون إليها بمساعدة محددات السمات العامة. إذا كنت ترغب في تحديد كل عنصر يحتوي على سمة محددة بادئة للبيانات ، استخدم بناء الجملة هذا في CSS الخاص بك:

 li [بيانات المستخدم] color: blue؛ 

لاحظ أنه لن يتم عرض أسماء المستخدمين باللون الأزرق في مقتطف الشفرة أعلاه - بعد أن تكون جميع البيانات المخزنة في السمات المخصصة غير مرئية - ولكن أسماء الموظفين الموجودة في

 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") ؛ console.log (jane.dataset.user) // janedoe

 $ ("# jane"). hover (function () var department = $ ("# jane"). data ("department")؛ alert (department)؛)؛

 var town = $ ("# jane"). data ("town"، "New York")؛