Comments: When Using jquery mobile, you may often see the use of data-role and data-theme. These are HTML5 Custom Attributes. This article provides some details. For more information, see.
When using jquery mobile, you may often see the use of data-role and data-theme. For example, you can use the following code to implement the header effect:
The Code is as follows:
<Div data-role = "header">
<H1> I am the title </Div>
Browsing through a mobile phone has the following effect:
Why can I write a data-role = "header" to achieve the effect of black at the bottom and text center display?
This article provides a simple implementation method to give you an intuitive understanding of these usages.
We will write an html page to customize a data-chb = "header" attribute. We hope that the background color of the div region with this attribute will be black, the text will be white, and the text will be displayed in the center; div with custom data-chb attributes not displayed by default. The html code is as follows:
The Code is as follows:
<Body>
<Div data-chb = "header">
<H1> I am a div using a custom property of data-chb </Div>
<Br/>
<Div>
I didn't use data-chb custom attributes, so how can I present them;
</Div>
</Body>
To achieve the "black background color, white text, center display" display effect, we define the following css:
The Code is as follows:
<Style>
. Ui_header {
Background-color: black;
Text-align: center;
Color: white;
Border: 1px solid #000;
}
</Style>
Then, we use the following js method to dynamically add css definitions during page loading to change the display style of the div with the data-chb attribute:
The Code is as follows:
<Script type = "text/javascript">
Window. onload = function (){
Var elems = document. getElementsByTagName ("div ");
If (elems! = Null & elems. length> 0 ){
Var length = elems. length;
// Traverse all DIV controls
For (var I = 0; I <length; I ++ ){
Var elem = elems [I];
// Obtain the custom attributes of the control
Var customAttr = elem. dataset. chb;
// You can also obtain custom attributes as follows:
// Var customAttr = elem. dataset ["chb"];
// If it is a pre-defined header value, it indicates it needs to be processed
If (customAttr = "header "){
// Add a style
Elem. setAttribute ("class", "ui_header ");
}
}
}
}
</Script>
The final page displays the following results:
People always like to add custom attributes to HTML tags to store and operate on data. However, you do not know whether other scripts will reset your custom attributes in the future. In addition, if you do this, the html syntax does not conform to the Html specification, and some other side effects are also caused. This is why a custom data attribute is added to the HTML5 specification, and you can use it to do many useful things.
You can read the detailed HTML5 specifications, but the usage of this custom data attribute is very simple, that is, you can add any attribute starting with "data-" to the HTML Tag, these attribute pages are not displayed. They do not affect the layout and style of your pages, but are readable and writable.
The following code snippet is a valid HTML5 tag:
The Code is as follows:
<Div id = "awesome"
Data-myid = "3e4ae6c4e"> Some awesome data </div>
But how can we read this data? Of course you can traverse the page elements to read the desired attributes, but jquery has built-in methods to operate these attributes. Use jQuery's. data () method to access these "data-*" attributes. One of the methods is. data (obj), which appears after jQuery1.4.3 and can return corresponding data attributes.
For example, you can use the following method to read the data-myid attribute value:
The Code is as follows:
Var myid = jQuery ("# awesome"). data ('myid ');
Console. log (myid); you can also use the json syntax in the "data-*" attribute. For example, if you write the following html:
The Code is as follows:
<Div id = "awesome-json" data-awesome = '{"game": "on"}'> </div>
You can directly access this data through js, and get the corresponding value through the json key value:
The Code is as follows:
Var gameStatus = jQuery ("# awesome-json"). data ('awepartially '). game;
Console. log (gameStatus); you can also use the. data (key, value) method to directly assign values to the "data-*" attribute. One important thing you should pay attention to is that these "data-*" attributes should be related to the elements in which they are stored. do not regard them as storage tools for storing anything.
Supplemented by translators: Although "data-*" is a property that appears in HTML5, jquery is generic. Therefore, you can still use it on non-HTML5 pages or browsers. the data (obj) method is used to operate "data-*" data.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
