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

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:

<abbr class="timeago" title="1995-09-20T015:04:23Z">September 20, 1995</abbr>

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:

<form id="form_stepy"> 
    <fieldset title="Step1">
        <legend>Description of step 1</legend>
    </fieldset>
    <fieldset title="Step2">
        <legend>Description of step 2</legend>
    </fieldset>
</form>

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:

<p>Date:<input type="text" id="mydatepicker"> </p>

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

It would look :

plugins websites are: timeago stepy datepicker