Call javascript plugins from data-js attributes in your HTML, using a jQuery-like JSON-based language.
["fn"]- function call["fn", "arg1", ...]- function call with arguments["fn1"], ["fn2"]- multiple function calls, with chaining["fn1 | .target-scope"], ["fn2"]- mutliple calls, no chaining due to selector pipe
By default, the context returned by a given function is preserved for subsequent calls in the chain:
<div data-js='
["html", "this is a bit <em>meta</em>, right?"],
["find", "em"], ["css", "font-size", 100], ["end"],
["css", {"color": "red", "line-height": 2}]
'></div>
The code above appends html to the element, sets the context to the newly added <em> element,
adjusts the font-size using the css function, then returns to the previous context and adjusts additional styles.
This could be expressed more succinctly using a selector pipe:
<div data-js='
["html", "this is a bit <em>meta</em>, right?"],
["css | em", "font-size", 100],
["css", {"color": "red", "line-height": 2}]
'></div>
Temporarily changes scope for a function call, without changing the context for subsequent calls in the data-js chain:
<div data-js='
["remove | span"],
["css", "color", "blue"]
'>Goodbye <span>world!</span></div>
The selector on the right-hand side of the pipe is a temporary context for the function on the left-hand side.
Upon execution, the div above will contain a blue "Goodbye", as the span will be removed by the first call,
and the context will return to the div prior to the call to css.
Associate code with DOM elements:
<div data-js='["show"]' style="display:none">I was once hidden</div>
Traverse the DOM:
<script type="text/x-js" data-js='["next"], ["animate", {"font-size": 30}, 1000]'></script>
<div>I am animated by my sibling</div>
Transform content:
<div data-js='["html | span", "spam"]'>
I am not a fan of <span>span</span>,
of <span>span</span> I am no fan
</div>
Work with jQuery plugins/UI widgets:
<div data-js='["slider", {"value": 25}]'></div>
<input data-js="datepicker">
Call the js() plugin on a DOM element to run any data-js chains contained within it:
$(document.body).js();