Social Networks

An introduction to HTML5 Custom Data Attributes – Believe me HTML5 is going to be the feature of the web technology. Combination of HTML5 and JQuery can be used to create so many custom data attributes for best results.

 

What are HTML5 Custom Data Attributes?

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

These attributes are not intended for use by software that is independent of the site that uses the attributes.

Every HTML element may have any number of custom data attributes specified, with any value.

W3C Specification

They are attributes that you create for an HTML element that starts with “data-“.

Here’s an example:

<asp:TextBox
ID="TextBox1"
CssClass="TextEntry"
data-entryType="Date"
runat="server">
</asp:TextBox>

 

data-entryType="Date" is a Custom Data Attribute. Note that asp:TextBox will render as an input element in the browser.

What is incredibly useful is that jQuery can select elements by Custom Data Attributes. This is better than using CSS class names because CSS is for visual appearance and the CSS classes may be applied to elements you do not want to select with jQuery.

In the following example, there are three text boxes for entering data. They all share the same CSS class. Two of the textboxes are marked with a Custom Data Attribute to specify a date type of input.

 Download the Source Code/ Script

Download HTML5 JQuery Examples

Download HTML5 JQuery Examples

Page Includes

<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.15.custom/development-bundle/ui/jquery-ui-1.8.15.custom.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui-1.8.15.custom/css/smoothness/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css" />

 

CSS

.TextEntry
{
background-color: Cyan;
}

jQuery

<script type=”text/javascript”>

$(document).ready(DocReady);

function DocReady()
{
$(“input[data-entryType = ‘Date’]”).datepicker();
}

HTML

<table>
<tr>
<td>
Company Name:
</td>
<td>
<asp:TextBox ID="TextBoxCompanyName"
CssClass="TextEntry" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Start Date:
</td>
<td>
<asp:TextBox ID="TextBoxStartDate" CssClass="TextEntry"
data-entryType="Date" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
End Date:
</td>
<td>
<asp:TextBox ID="TextBoxEndDate" CssClass="TextEntry"
data-entryType="Date" runat="server"></asp:TextBox>
</td>
</tr>
</table>

With this code, the jQuery DatePicker is effortlessly (in a manner of speaking) attached to the correct HTML elements.

Html5 jQuery Custom Data Attributes

Other HTML5 Tutorials –

Find Geo Location with HTML5 and JQuery
HTML5 snake game online

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>