Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

templates


ICanHaz.js -- Simple Client-side Templating Solution using jQuery and Mustache.js

Submitted by Henrik Joreteg on July 13, 2010 - 9:14am

A simple approach for doing client-side templating with jQuery and Mustache.js.

So, this is how I'm now doing client-side templating for my projects at &yet. A solution inspired by jQuery's own @jeresig's microtemplating. I figured I'd share it, in case someone else finds it useful.

Block Manager

Submitted by wdsn on August 30, 2009 - 1:32am

Add and delete form fields with buttons add and delete
usage:

    <script src="./js/jquery-1.3.2.min.js"></script>
    <script src="./js/jquery.tmpl.js"></script>
    <script src="./js/jquery.blockmanager.js"></script>
<script language="JavaScript">
$(document).ready(function() {

    $blockEdu = $('#tableBottomRowEdu').blockmanager({
        names: {
            name: "text",
            specialnost: "select"
        },
        fieldsName: "user[edu]",
        templateItem: "#templateItemEdu",
        templatePrefix: "eduTr",
        itemId: "user_id",
        buttonAddId: "eduAdd"
    });

    // add empty fields
    $blockEdu.addItem("", {});

    // add block with values
    $blockEdu.addItem('2', {
        name: "Jhon Connor",
        specialnost: "2"
    });
});
</script>

jQuery HTML Templates

Submitted by DanielSchaffer on August 23, 2009 - 12:23am

Dynamically add HTML into your page's DOM without generating HTML in your JavaScript code.

Templater Easy Templating System

Submitted by PoweredByJAM on August 4, 2009 - 12:00pm

This is a very simple plugin to assist with handling repeating blocks of html in a somewhat more sane matter.

All you do is the following:

HTML:

<div id="template_container">
<a href="__LINK__" title="__TITLE__">__TITLE__</a>
</div>

Script:

var params = {link:'http://www.example.com',title:'some title'};
var link_html = $('#template_container').templater(params);

And you're good to go!

XClone

Submitted by nbubna on April 25, 2009 - 1:05am

This plugin depends upon the Values plugin to provide an enhanced clone method.
This "xclone" method will store the element it is called on as a template
of sorts, and then create sibling clones that have the specified values
automatically set and are also automatically inserted below (or, optionally,
above) where the original prototype was located. In essence, this enhances
the template-ish abilities of the Values plugin in a fashion similar to what
the jsRepeater plugin does, but with only standard XML/HTML syntax.

This is particulary useful for AJAX applications, allowing the initial document
to contain just an "empty" element set that serves as a location marker and template for clones which are filled with model data loaded/generated on the client side.

The demo (and its source) are probably the best documentation thus far.

QueryTemplates Light for JavaScript

Submitted by Tobiasz Cudnik on February 26, 2009 - 6:26pm

DOM and CSS oriented template engine using pure HTML as template's source.

Light version for JavaScript supports:

  • data injections
  • iterations (loops)
  • form filling
  • form generation

Example

$('ul > li:has(ul)')
  .valuesToLoopFirst(data, function(row) {
    this
      .valuesToSelector(row.User, 'span.%k')
      .find('> ul > li')
        .valuesToLoopFirst(row.Tags, function(tag) {
          this.valuesToSelector(tag);
        });
  });
}

See live examples on the demo page.