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.

template


jQuery.appendTemplate

Submitted by bacalao on October 12, 2010 - 9:55am

Appends a template from file onto an element.


Usage:

$(element).appendTemplate(url, args[]);

url: template url
args[]: dynamic list of arguments that goes into the template


Example code:

$.getJSON("data/data.json",
  function(data){
    $.each(data, function(i, item){
      $("#list").appendTemplate("my.template", item.url, item.text);
    });
});



Author:

See my blog for more
http://csharptutorial.blogspot.com/2010/10/jqueryappendtemplateurl-args....

Javascript based simple template engine.

Submitted by ismail-codar on October 1, 2010 - 10:11am

You can use normal javascript in a template.
Very simple and effective solution.
An average speeded engine. But simplest and most powerfull.

rr2jquery (browser detect, DOM Templates, create SWF)

Submitted by vflash on September 30, 2010 - 6:51am

Browser detect - a compact and easy way to determine your browser. feature ideas to use NaN.
DOM Templates - template on the client. The example is a bookmarklet it will simplify the conversion of DOM in js-template.
create SWF - a simple way to insert flash onto the page.

------ RUS -------

Небольшое расширение для jQuery, которое может быть кому-то полезным или дать новые идеи

Browser detect - компактный и простой способ определения браузера. особенность идеи в использовании NaN.
DOM Templates - шаблонизатор на клиенте. в примере есть букмарклет он упростит преобразование DOM в js-шаблон.
create SWF - простой способ вставить flash на страницу.

jQueryLego

Submitted by a.karimzadeh on September 27, 2010 - 9:19am

This is a highly customizable jQuery Framework.

Including:

  • Utilities such as $(selector).toString(), $.isString()
  • Plugins such as window / popup window
  • Form Validation
  • Tabs
  • Bars
  • Templating System

You can merge all things together.

Sample:

var win = $('.panel').window().$();
win.open();

tmp - A jQuery Template Plugin

Submitted by saq on September 11, 2010 - 12:57pm

Links

Online Examples

Code Examples

Load a Template from static Html Javascript String with context data.

$('.s2').tmp({
'html':'<span>Indexed div number <%=index%>...</span>',
'contextData' : {
'index': 1
}
});

Load a Template from jQuery Object.

var _newSpan;

_newSpan = $('<span/>').html('From jQuery Object.');
$('.s3').tmp( _newSpan );

Load a Template from jQuery Object with context data.

_newSpan = $('<span/>').html('Indexed with number <%=index++%> From jQuery Object.');
$('.s4').tmp({
html:_newSpan,
contextData:{index:0}
});

jQuery.tmp Level 2 - External Html Templates with Javascript Event Bindings

Load Templates from external Template.

sample_hover_click.htm

Sweet template

Submitted by markone on June 29, 2010 - 10:27pm

Sweet javascript template

Sweet (Simple WEb front-End Template) is a lightweight javascript template with high performance. It's small, fast, very easy to use, and, most important, extensible. It also has been integrated with jQuery.

See the template html below:

// Not like many other template tools, I use <[...]> as delimiters,
// but you can change delimiters to what you prefer by a little method...
var tpl = '<ul>'
    + '<[foreach ($data as item) { if (item.showMe) { ]>'
    + '<li><[= item.name ]></li>'
    + '<[ } } ]>'   
+ '</ul>';

Now we have a json data:

var data = [{showMe: true, name: "Jerry"}, {showMe: false, name: "Mark"}, {showMe: true, name: "Scotti"},
    {showMe: true, name: "Carol"}, {showMe: false, name: "Tina"}, {showMe: true, name: "Owen"}];

We can do this to get a replaced html:

var html = Sweet(tpl).applyData(data);
html will be:

Visual Studio Item Template for JQuery plugins

Submitted by DanielProbst on May 5, 2010 - 8:51am

Item Template for Visual Studio

Here's a JQuery Plugin Item Template for Visual Studio (2010 but I guess it works with the older versions too - btw upgrade! :-))

1. Download file from above
2. Import template in Visual Studio
2.1 Drink a beer.
2.2 Copy the Zip File to: C:\Users\\Documents\Visual Studio 2010\Templates\ItemTemplates

Have fun.

plus repeater

Submitted by plus on May 4, 2010 - 4:58am

tool for repeat dom object like input form
you can create multiple row of input
and create when last row is focus
easy to use
$(function(){
$.repeater('repeater' ,0);
})
options

  • id of repeat area
  • start number

and use template

  • #no# refer to add number
  • #repeatid# refer to id of new block

jQuery.tpl

Submitted by donnerjack13589 on April 11, 2010 - 12:22am

Impressed by micro-template engine written by John Resig, I've been created this templates variant.

Now you must predefine all variables that you want to use, all others will be available through $args var.

Note: Now comes with block plugin!
Like django style of inheritance?
Try this:

<div>
  <h1>
  {%block 'title'%}
  default title
  {%/block%}
  </h1>
  <div class="body">
  {%block 'body'%}
   body
  {%/block%}
  </div>
</div>

Parent template (name it "parent", $('...').render("parent"). )

{%extends 'parent'%}
{%block 'title'%}
Hello!
{%/block%}
{%block 'body'%}
Do you like this plugin?
{%/block%}

Child template

Note #2: Syntax has been changed in 0.3.13! Now, $.template(...) produce function that returns jQuery object. If you want to get unprocessed source call $.template(...).html().

Few examples:

// Simple
{% for (var i=0;i<100;i++) { %}

{% } %}

// With shorthands

Cliche

Submitted by bjscott on December 27, 2009 - 6:46pm

Cliche takes a model (any basic Javascript object) and a template view (a block of HTML/XML/other text with embedded field names) and produces a view of the model. This lets you use MVC techniques on the client-side to simplify the creation of dynamic web applications.