एचटीएमएल 5 डेटा के साथ बेहतर यूएक्स का निर्माण कैसे करें- * गुण

क्या आपने कभी जावास्क्रिप्ट के साथ बाद में उपयोग करने के लिए किसी विशेष HTML तत्व में कस्टम डेटा जोड़ना चाहते हैं? HTML5 के बाज़ार में आने से पहले, DOM से जुड़े कस्टम डेटा को संग्रहीत करना एक वास्तविक उपद्रव था, और डेवलपर्स को सभी प्रकार के नॉटी हैक्स का उपयोग करना पड़ता था, जैसे कि गैर-मानक विशेषताओं को शुरू करना या समस्या के चारों ओर काम करने के लिए अप्रचलित setUserData () विधि का उपयोग करना।.

सौभाग्य से आपको ऐसा करने की कोई आवश्यकता नहीं है, क्योंकि HTML5 ने नई वैश्विक शुरुआत की है डेटा-* वे विशेषताएँ जो किसी भी HTML तत्वों पर अतिरिक्त जानकारी एम्बेड करना संभव बनाती हैं। नया डेटा-* गुण HTML को और अधिक एक्सटेंसिबल बनाएं, इसलिये आप अधिक जटिल एप्लिकेशन बनाने में सक्षम हैं, और संसाधन-गहन तकनीकों जैसे कि अजाक्स-कॉल, या सर्वर-साइड डेटाबेस प्रश्नों का उपयोग किए बिना अधिक परिष्कृत उपयोगकर्ता अनुभव बनाएं.

नई वैश्विक विशेषताओं का ब्राउज़र समर्थन अपेक्षाकृत अच्छा है, क्योंकि वे सभी आधुनिक ब्राउज़रों द्वारा समर्थित हैं (IE8-10 आंशिक रूप से उनका समर्थन करता है).

का सिंटेक्स डेटा-* गुण

नए का वाक्य विन्यास डेटा-* विशेषताएँ aria-prefixed विशेषताओं के समान हैं। आप के स्थान पर किसी भी लोअरकेस स्ट्रिंग सम्मिलित कर सकते हैं * संकेत। आपको स्ट्रिंग के रूप में प्रत्येक विशेषता के लिए एक मान निर्दिष्ट करने की आवश्यकता है.

मान लीजिए कि आप एक बनाना चाहते हैं हमारे बारे में पृष्ठ, और उस विभाग के नाम को संग्रहीत करें जहां प्रत्येक कर्मचारी काम करता है। आपको जोड़ने के अलावा और कुछ करने की आवश्यकता नहीं है डेटा-विभाग निम्न तरीके से उपयुक्त HTML तत्व के लिए कस्टम विशेषता:

 
 
 जॉन डो 
 
 जेन डोए 
 

रिवाज डेटा-* विशेषताएँ वैश्विक हैं, ठीक उसी तरह जैसे कक्षा तथा आईडी विशेषताएँ, ताकि आप उन्हें हर HTML तत्व पर उपयोग कर सकें। आप जितने भी जोड़ सकते हैं डेटा-* जैसा आप चाहते हैं वैसा ही एक HTML टैग की विशेषताएँ। ऊपर दिए गए उदाहरण में, उदाहरण के लिए आप एक नई कस्टम विशेषता का परिचय दे सकते हैं डेटा-उपयोगकर्ता कर्मचारी उपयोगकर्ता नाम स्टोर करने के लिए.

 
 
 जॉन डो 
 
 जेन डोए 
 

एक सामान्य नियम के रूप में, यदि आप अपनी स्वयं की कस्टम विशेषता को HTML तत्व में जोड़ना चाहते हैं, तो आपको हमेशा इसे पहले से उपसर्ग करना होगा डेटा- स्ट्रिंग। इसी तरह, जब आप किसी और के कोड में डेटा-प्रीफ़िक्सड विशेषता देखते हैं, तो आप यह सुनिश्चित कर सकते हैं कि यह लेखक के लिए एक कस्टम विशेषता है.

कब इस्तेमाल करें और कब कस्टम अटैचमेंट का उपयोग न करें

W3C कस्टम को परिभाषित करता है डेटा-* गुण जैसे:

“कस्टम डेटा विशेषताओं का उद्देश्य कस्टम डेटा को पेज या एप्लिकेशन पर निजी रूप से संग्रहीत करना है, जिसके लिए अधिक उपयुक्त विशेषताएँ या तत्व नहीं हैं.”

यह उपयोग करने पर विचार करने के लिए लायक है डेटा-* गुण जब आप उस डेटा को संग्रहीत करने के लिए कोई अन्य शब्दार्थ गुण नहीं पा सकते हैं.

यह पूरी तरह से स्टाइल के प्रयोजनों के लिए उपयोग करने के लिए सबसे अच्छा विचार नहीं है, क्योंकि आप इसके लिए चुन सकते हैं कक्षा और यह अंदाज जिम्मेदार बताते हैं। यदि आप एक डेटा प्रकार संग्रहीत करना चाहते हैं जिसके लिए एचटीएमएल 5 में एक अर्थ विशेषता है, जैसे कि दिनांक समय के लिए विशेषता तत्व, डेटा उपसर्ग विशेषता के बजाय का उपयोग करें.

यह नोट करना महत्वपूर्ण है डेटा-* विशेषताएँ डेटा रखती हैं पेज या एप्लिकेशन के लिए निजी, जिसका अर्थ है कि उन्हें उपयोगकर्ता एजेंटों द्वारा अनदेखा किया जाएगा, जैसे कि खोज इंजन बॉट और बाहरी अनुप्रयोग। HTML को होस्ट करने वाली साइट पर चल रहे कोड द्वारा डेटा-प्रीफ़िक्सड विशेषताओं को पूरी तरह से एक्सेस किया जा सकता है.

रिवाज डेटा-* विशेषताएँ बड़े पैमाने पर फ्रंटएंड फ्रेमवर्क द्वारा उपयोग की जाती हैं, जैसे बूटस्ट्रैप और ज़र्ब फाउंडेशन, साथ ही। अच्छी खबर यह है कि आपको यह जानने की जरूरत नहीं है कि यदि आप किसी रूपरेखा के एक भाग के रूप में डेटा-उपसर्गित विशेषताओं का उपयोग करना चाहते हैं, तो आपको जावास्क्रिप्ट लिखने की आवश्यकता नहीं है, क्योंकि आपको केवल कार्यक्षमता बढ़ाने के लिए उन्हें HTML कोड में जोड़ना होगा। पूर्वनिर्धारित जावास्क्रिप्ट प्लगइन.

नीचे का कोड स्निपेट बूटस्ट्रैप में बाईं ओर एक टूलटिप जोड़ता है जिसका उपयोग करके बनाया गया है डेटा-टॉगल और यह डेटा-प्लेसमेंट कस्टम विशेषताएँ, और उन्हें उपयुक्त मान निर्दिष्ट करना.

  बाईं ओर टूलटिप 

लक्ष्य डेटा-* CSS के साथ विशेषताएँ

हालांकि यह उपयोग करने के लिए अनुशंसित नहीं है डेटा-* केवल स्टाइल के उद्देश्यों के लिए विशेषताएँ, आप उन HTML तत्वों का चयन कर सकते हैं जो वे सामान्य विशेषता चयनकर्ताओं की मदद से संबंधित हैं। यदि आप एक निश्चित डेटा-उपसर्ग विशेषता वाले प्रत्येक तत्व का चयन करना चाहते हैं, तो अपने CSS में इस सिंटैक्स का उपयोग करें:

 ली [डेटा-उपयोगकर्ता] रंग: नीला; 

ध्यान दें कि यह उपर्युक्त कोड स्निपेट में नीले रंग में प्रदर्शित होने वाले उपयोगकर्ता नाम नहीं है - कस्टम विशेषताओं में संग्रहीत सभी डेटा दिखाई नहीं देने के बाद - कर्मचारियों के नाम समाहित नहीं किए गए हैं

 li [डेटा-विभाग = "आईटी"] बॉर्डर: सॉलिड ब्लू 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap उपयोगकर्ता: "जैनेडो", विभाग: "आईटी" 

 var jane = document.getElementById ("jane"); कंसोल.लॉग (jane.dataset.user) // janedoe

 $ ("# jane")। होवर (फंक्शन () var विभाग = $ ("# jane"); डेटा ("विभाग"); अलर्ट (विभाग););

 var टाउन = $ ("# jane")। डेटा ("टाउन", "न्यूयॉर्क");