Template command
Reduce repetition and load times of your page with our little templating engine.
Basic Usage (HTML)
data-jkit="[template:action=set;name=mytemplatename]"
Advanced Init (JavaScript)
$('#myelement').jKit('template', { 'action': 'set', 'name': 'mytemplatename' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| action | “set” or “apply” | set | Do you want to set (define) a new or apply an old template? |
| name | String | template | The name of the template |
| dynamic | “yes” or “no” | no | Is the template dynamic or static? |
| addhtml | HTML | + | The HTML for the add button in case the template is dynamic |
Events
| Event | Description |
|---|---|
| added | Triggered when a tab new entry is added on a dynamic template |
Examples
Static template:
A normal static template (view the source comments to get an idea how templates work):
-
List Entry 1
250 character jKit lorem
-
List Entry 2
350 character jKit lorem
-
List Entry 3
150 character jKit lorem
-
List Entry 4
2 paragraph jKit lorem
-
List Entry 5
Without text (removed paragraph) …
Source:
<!-- this whole div is our template --> <div data-jkit="[template:action=set;name=mylist;vars=heading,text,info]" style="display:none"> <div class="mylist"> <!-- only show if first entry (class: if-entry-first) --> <span class="if-entry-first entrynumber">First entry:</span> <!-- only show if 3rd entry (class: if-entry-3) --> <span class="if-entry-3 entrynumber"> ... 3rd entry ...</span> <!-- only show if last entry (class: if-entry-last) --> <span class="if-entry-last entrynumber"> ... last entry.</span> <h3> <!-- "info" is in the option vars, content will be replaced --> <div><span class="info">Info Text</span></div> <!-- "heading" is in the option vars, content will be replaced --> Title: "<span class="heading">Heading Text</span>" </h3> <!-- only show this block if text var isn't empty (class: if-text) --> <p class="if-text"> <strong>Description:</strong> <!-- "text" is in the option vars, content will be replaced --> <span class="text">Text ...</span> </p> <!-- only show this block if text var isn't empty (class: if-text) --> <div class="if-text"> </div> </div> </div> <!-- every li content will be replaced with the template --> <!-- the template vars heading, info and text are defined by the classes with the same name --> <ul class="myul" data-jkit="[template:action=apply;children=li;name=mylist]"> <li> <h3 class="heading">List Entry 1</h3> <p class="info">250 character jKit lorem</p> <p class="text"><span data-jkit="[lorem:length=250]"></span></p> </li> <li> <h3 class="heading">List Entry 2</h3> <p class="info">350 character jKit lorem</p> <p class="text"><span data-jkit="[lorem:length=350]"></span></p> </li> <li> <h3 class="heading">List Entry 3</h3> <p class="info">150 character jKit lorem</p> <p class="text"><span data-jkit="[lorem:length=150]"></span></p> </li> <li> <h3 class="heading">List Entry 4</h3> <p class="info">2 paragraph jKit lorem</p> <p class="text"><span data-jkit="[lorem:paragraphs=2]"></span></p> </li> <li> <h3 class="heading">List Entry 5</h3> <p class="info">Without text (removed paragraph) ...</p> </li> </ul>
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]