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) {
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



{{shape}}
{{color}}


Example: main part












Shape Color


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

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.
Example:
September 20, 1995

jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});

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.
Example:



Description of step 1


Description of step 2



jQuery(document).ready(function() {
$('#form_stepy').stepy({
block: true,
titleClick: true
});
});

It would look :

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

Date:



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

It would look :

plugins websites are: timeago stepy datepicker