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:

jQuery plugins-2: icanhaz

The second part of useful jQuery plugins is icanhaz.

icanhaz: Icanhaz simple and powerful client-side templating.
Example: template part

<script type="text/html" id="sampleLine">
    <tr>
 <td>{{shape}}</td>
 <td>{{color}}</td>
    </tr>
</script>

Example: main part

<input type="button" value="Populate" />
<table id="sampleTable">
    <thead>
        <tr>
     <th>Shape</th>
     <th>Color</th>
 </tr>
    </thead>
    <tbody id="itemContainer">
    </tbody>
</table>

jQuery(document).ready(function() {
    var dynamicContentObject = { };
    var result;
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "samplePopulate.php",
        async:false,
        success: function( data ) {
            result= data;
        } 
    });
 
    dynamicContentObject['shape'] = result.shape;
    dynamicContentObject['color'] = result.color;
  
    var line = ich.sampleLine(dynamicContentObject); 
        $("tbody#itemContainer").append(line); 
});

It would be before clicking Populate button:

After clicking Populate button, it would look like:

icanhaz website is: icanhaz