I need to modify an existing HTML5 and Jquery web page.
I see there are attributes like data-role=page, data-theme, data-header in the page. they are also not coming in the intellisence when I tried to edit in VS2010.
These are HTML5 dynamic data attributes, which can be added to any element to store additional data that will be unseen by the user. Their main benefit is that they allow you to write valid HTML5 markup while at the same time embedded data that you can use
within your application.
You will not gain any Intellisense functionality from within your IDE as the attributes can be dynamically created and are valid as long as they begin with data-*:
For example, if you had a <b> element within your page and it was referring to a Dog, you could use data-attributes in the following way :
<b class='dog' data-color='Brown' data-breed='Bloodhound' data-gender='Female' data-age='12'>Bessie the Bloodhound</b>
This grants you the flexibility to include large amounts of data that can be used any way that you please in a valid format. So if you wanted to wire up a Click event for when any elements with the class 'dog' were clicked and generate a JSON object based on the fields available you could use the jQuery .data() method :
$('.dog').click(function(){
//Creates a "Dog" JSON object
var dogProperties = $(this).data() //{color: Brown, breed: 'Bloodhound', gender: 'Female', age: 12}
});
There is a great deal of information regarding data attributes and some of the things that you can leverage them for. Check out some of the following links to learn more :
OnlyOneK
Member
12 Points
63 Posts
Jquery data-*=" " attribute
Jan 18, 2013 08:57 PM|LINK
Hello,
I am new to Jquery.
I need to modify an existing HTML5 and Jquery web page.
I see there are attributes like data-role=page, data-theme, data-header in the page. they are also not coming in the intellisence when I tried to edit in VS2010.
Can any one tell me what are those attributes?
How can I use them?
From where they are getting properties?
Thanks
Rion William...
All-Star
27196 Points
4515 Posts
Re: Jquery data-*=" " attribute
Jan 18, 2013 09:06 PM|LINK
These are HTML5 dynamic data attributes, which can be added to any element to store additional data that will be unseen by the user. Their main benefit is that they allow you to write valid HTML5 markup while at the same time embedded data that you can use within your application.
You will not gain any Intellisense functionality from within your IDE as the attributes can be dynamically created and are valid as long as they begin with data-*:
For example, if you had a <b> element within your page and it was referring to a Dog, you could use data-attributes in the following way :
This grants you the flexibility to include large amounts of data that can be used any way that you please in a valid format. So if you wanted to wire up a Click event for when any elements with the class 'dog' were clicked and generate a JSON object based on the fields available you could use the jQuery .data() method :
$('.dog').click(function(){ //Creates a "Dog" JSON object var dogProperties = $(this).data() //{color: Brown, breed: 'Bloodhound', gender: 'Female', age: 12} });There is a great deal of information regarding data attributes and some of the things that you can leverage them for. Check out some of the following links to learn more :
HTML5 Data-Attributes and How To Use Them
Using jQuery to Leverage HTML5 Data Attributes
HTML5 Attributes
Everything You Need To Know About HTML5 Data Attributes
OnlyOneK
Member
12 Points
63 Posts
Re: Jquery data-*=" " attribute
Jan 18, 2013 09:12 PM|LINK
Hello Rion,
What kind of data will be there in these dynamic attributes?
How can they be accessed?
How can we know the name of the attributes( for ex page, header, subpage etc)?
Thanks
Rion William...
All-Star
27196 Points
4515 Posts
Re: Jquery data-*=" " attribute
Jan 18, 2013 09:37 PM|LINK
I updated the previous answer with an example, which should help you out some.
What Kind of Data
You can basically store any type of text-based data within it, such any strings, numbers, urls, etc.
Accessing The Data
The data can be accessed through Javascript (using .getAttribute() and jQuery (using .data() , .attr() and .prop()) quite easily.
Getting the Attribute Names
As mentioned before you can use jQuery's .data() method, which will generate an object that contains all of the data properties. This discussion goes over other methods of accessing all of the data-attribute names.
OnlyOneK
Member
12 Points
63 Posts
Re: Jquery data-*=" " attribute
Jan 18, 2013 09:46 PM|LINK
Rion,
Thanks for your reply.
I got a div tag <div data-role="page" id="home">
I got a script tag <script src="js/jquery/jquery-1.8.2.min.js"></script>
Can I know how both these are linked?(data-role------>script)
Thanks
Rion William...
All-Star
27196 Points
4515 Posts
Re: Jquery data-*=" " attribute
Jan 18, 2013 10:03 PM|LINK
I would check for any references within any Javascript and search for either of the following :
It might point you in the right direction and help you figure out how those are being used.
OnlyOneK
Member
12 Points
63 Posts
Re: Jquery data-*=" " attribute
Jan 18, 2013 10:07 PM|LINK
Rion,
Thanks for you help.