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.

Foo Check index
Bar Check index

jQuery(document).ready(function() {
$(".to-see").click(function(e) {
var index = $(this).data("row-index");
if (index < 25) {

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


Example: main part

Shape Color

jQuery(document).ready(function() {
var dynamicContentObject = { };
var result;
type: "GET",
dataType: "json",
url: "samplePopulate.php",
success: function( data ) {
result= data;

dynamicContentObject['shape'] = result.shape;
dynamicContentObject['color'] = result.color;

var line = ich.sampleLine(dynamicContentObject);

It would be before clicking Populate button:

After clicking Populate button, it would look like:

icanhaz website is: icanhaz

jQuery plugins: timeago, stepy, datepicker

Here some useful jQuery plugins that I use in my projects.

timeago: timeago jQuery plugin provides convert timestamp values to relative time.
September 20, 1995

jQuery(document).ready(function() {

It would look :

If you want to support timestamps in the future, you can set it like:

$.timeago.settings.allowFuture = true;

Then it would look :

stepy: stepy jQuery plugin provides create custom wizard that based on FormToWizard.

Description of step 1

Description of step 2

jQuery(document).ready(function() {
block: true,
titleClick: true

It would look :

datepicker: datepicker jQuery plugin provides to use a popup calendar input fields.


jQuery(document).ready(function() {
$(function() {
$( "#mydatepicker" ).datepicker();

It would look :

plugins websites are: timeago stepy datepicker