HuK
huk.js is a library for generating HTML code written in JavaScript. It is an Ender.js module and it uses some basic modules (bonzo, bean). Or you can simply use it with jQuery.
Example
huk function
You pass the selector name (or element) in and at the end you can call .append()
, .prepend()
, .html()
, .before()
, .after()
.
It (hopefully) supports all the existing HTML elements. That means, to create a <div>
element, you can:
.div()
-<div></div>
.div(String)
-<div>String</div>
.div({id: 'foo', class: 'bar', content: 'Content'})
-<div id="foo" class="bar">Content</div>
.img(Url)
-<img src="Url" />
.addTag
You can add new HTML tags:
huk
Events
The events in bean can be written here too.
click
and hover
can be set in the usual way, but other events have to be in the events
object:
If you want to access some data in the event function, you can pass it in the data
field. In the event call the this
will be the particular element:
{}
.list()
This function creates an HTML list (<ul><li></li>...</ul>
) and you can use an array and it creates a list. If you want to refer to the value to the array put there '<<value>>'
in the string (or '<<value.foo.bar>>'
if it is an object). You can refer to the current index with '<<index>>'
.
items
- the items of the list (array or if it is a number it makes that many empty items)itemArgs
- object, here comes the items' argumentsjustItems
- true, or false; if false it makes the list without the<ul>
itemTag
- changes the item's HTML tag
You can access the current value, index of the list and the path in the this variable in the event functions too.
var arr = 'MC' 'Nestea' 'Hero'text
You can make a list from tags other than <li>
:
Nesting
Single element
Chained elements
If you nest multiple elements, you have to call the .val()
function at the end of the chain.
text
Multiple elements
Using Ender
You can use huk.js as an ender module:
ender build huk
And write the code like so:
$