HTML 5: You must know the Data property

Original: All need to Know about the HTML5 Data Attribute

You must know the Data property of HTML 5

Translator: Dwqs

The Data property of HTML 5 allows you to customize the information for the element. This article is about thinking about how to better use the Data property.

Introduction

Before HTML 5, we had to rely on the class and REL attributes to store the pieces of data that needed to be used in the site, which sometimes created a conflict between the appearance and usefulness of the site. The existence of the HTML 5 Data property can be very satisfying.

As the website itself becomes more and more data, some specific elements start to keep the data. For example, to create an audio app, the code looks like this:

<Audio controls= "Controls"><source src= "Track1.mp3 " type=" Audio/mpeg " /></audio>   

The above code is completely acceptable, but sometimes we need to save time, speed, and author more information about the audio itself, rather than the source of the audio. This requires the Data property, as shown in the following example:

<Audio controls= "Controls"><source src= "Track1.mp3 " type=" Audio/mpeg " data-duration=" 1min5secs " Data-tempo  = "125bpm" data-artist= "The Beatles" /></  Audio>   

These custom data properties enable you to perform actions such as searching, filtering, and grouping audio.

How to use the Data property

The name of the custom data property must begin with data-, and at least one character that conforms to the HTML specification should be followed by a hyphen. (HTML naming convention.)

The data properties are described in the following document:

Custom data attributes is intended to store custom data private to the page or application, for which there is no more a Ppropriate attributes or elements.

This also means that we can only use data from within the application, and should not present it to the user. More importantly, you can customize any number of data properties to the element and give any meaningful value.

when do I need to use the Data property?

Through the above, you already know how to use the Data property. But to better understand this attribute, look at a few more examples.

The tuts+ webdesign plate already has a good example of using the Data property. One of the tuts, applying the data property to the style, gives the menu a "bubble" notification effect. In this example, the Data property is used for values that only want bubble notifications.

<  a   href  = "#"  Span style= "COLOR: #ff0000" >class  = "Pink"   data-bubble  = "2"  >  Profile</ a  >  

          Another example: Quick Tip, The Data property is used as a cue message for the

of the prompt box.

<  a   href  = "#"  Span style= "COLOR: #ff0000" >class  = "tooltip"  data-tip  = "This is the tip!"  >  This is the Link</ a  >   

When should I not use the Data property? The Data property should not be used when an element has been established or is more appropriate. It is not appropriate to use data in the following example:

< span  data-time= "20:00">8pm<span> 

Because in an element that represents time, there is already a DateTime attribute:

<  time   datetime  = "20:00"  >  8pm</ time  >   

At the same time, the data property should not be used as an alternative metadata or micro-format. The micro-format is primarily designed for humans to introduce contextual information. For example, if you have a vcard about an individual or an organization's contact information, you should give a class attribute called a vcard to let the machine know that it contains some contact information.

The code using the micro-format is as follows:

<Div class= "vcard"><span class= "FN" > Aaron Lumsden</span></div>     

Instead, the code using the Data property is as follows:

<Div class= "vcard"><span data-name= "Aaron Lumsden " >Aaron Lumsden</span></Div  >     

Learn more about micro-formats: mircorformats.org.

using the Data property in CSS

Now that the Data property is implemented in HTML markup, you can also use this property in CSS. Note: Although it is more appropriate to use the Data property directly in some cases, it should not be used directly with any style rule. Simple to use as follows:

[data-role= "page"] {/  * Styles */}

using the Data property in jquery

How do you use the Data property in jquery? jquery provides a number of ways to get data from elements. For example, like this:

<a href= "http://www.google.com" class= "button" data-info= "the Worlds most popular search engine ">Google</a> 

If you have an anchor text tag similar to the one above, there is a data property named Data-info, and you can get any one of the properties, including Data-info, using the following method.

$ ('. Button '). Click (function(e) {   e.preventdefault ();   Thisdata = $ (this). attr (' data-info ');   Console.log (Thisdata); });

Original starting: http://www.ido321.com/1304.html

Next: Large-scale Web Site System Architecture Evolution Road

HTML 5: You must know the Data property