Thursday, August 23, 2012

HTML5 Data Attributes: data-*

Data attribute provides to define custom data attributes in HTML5. Data attribute format is "data-*" that "*" means desired custom attribute name. This useful data attribute has very simple usage.

Example: If you need row index number of a table.
<table>
  <tr>
    <td>Foo</td>
    <td><a href="#" class="to-see" data-row-index="23"> Check index </a></td>
  </tr>
  <tr>
    <td>Bar</td>
    <td><a href="#" class="to-see" data-row-index="25"> Check index </a></td>
  </tr>
</table>
jQuery(document).ready(function() {   
    $(".to-see").click(function(e) {
        e.preventDefault();
        var index = $(this).data("row-index"); 
        if (index < 25) {
            $(this).hide();
        }
    });
});
It would be before clicking check index:
After clicking check index, it would look like:

No comments:

Post a Comment