jQuery CardView Plugin

Creates a genericized Grid to display a list of items based on a schema of Ajax calls or javascript items - and displays them according to a template.

HTML

<div class="grid-container">12312</div>

CSS

.x-grid-container {
    display: block;
    border: 1px solid #eee;
    padding: 1px;
}
.x-grid-head {
    background-color: #6699CC;
    display: block;
    height: 20px;
}

.item-template {
    border: 1px solid #eee;
    display: block;
    margin: 1px;
    padding: 5px;
}
.item-template>label>span {
    font-weight: bold;
    display: inline-block;
    width: 100px;
}
.item-template>span {
    margin-left: 100px;
}

JavaScript

(function($) {

    var defaults = {
        items: [],
        cardTpl: "",
        
        containerCls: 'x-grid-container',
        headCls: 'x-grid-header',
        bodyCls: 'x-grid-body',
        footCls: 'x-grid-footer'
    };

    $.fn.XGrid = function(settings) {
        var options = $.extend(true, {}, defaults, settings);

        var $container = this.addClass(options.containerCls);
        
        var $head = $('<div />')
            .addClass(options.headCls)
            .appendTo($container)
            .html('&nbsp;');

        var $body = $('<div />')
            .addClass(options.bodyCls)
            .appendTo($container);
        
        var $foot = $('<div />')
            .addClass(options.footCls)
            .appendTo($container);

        for (var i = 0; i < options.items.length; i++) {
            var $item = $(options.cardTpl.template(options.items[i]));
            $body.append($item);
        }
    };

    String.prototype.template = function(obj) {
        var tpl = this; // Copy current String value
        var matches = tpl.match(/\{([a-zA-Z0-9_0]+?)\}/gi);

        // Loop through each match
        for (var i = 0; i < matches.length; i++) {
            var match = matches[i];
            var prop = match.substring(1, match.length - 1); // Remove { & }
            // For each {value} entry, if the item has a property of the 
            // same name, insert it's value into the template.
            if (obj instanceof jQuery && typeof obj[0] != 'undefined' && typeof obj[0][prop] != 'undefined') {
                // jQuery object being used which has the property
                tpl = tpl.replace(match, obj[0][prop]);
            } else if (typeof obj[prop] != 'undefined') {
                // Non-jQuery object being used which has the property
                tpl = tpl.replace(match, obj[prop]);
            }
        }

        return tpl;
    }

    $('div.grid-container').XGrid({
        items: [{
            id: 0,
           ...