--- layout: default title: The Manual ---

NWT

Usage

Include the script. By default we namespace window.nwt and window.n as entrypoints.

{% highlight html %} {% endhighlight %}

Node Methods (DOM methods)

Accessing dom elements is easy and can be done with n.one() or n.all() for a collection.

{% highlight js %} var el = n.one('#someid .someclass'); el.setHtml('Hello Nodo'); // Alerts 'Hello Nodo' alert(el.getHtml()); {% endhighlight %}

A few useful methods

{% highlight js %} // Accesses the parent node el.parent(); // Access an ancestor node by selector el.ancestor('.someclass'); // Gets the previous node el.previous(); // Gets the next node el.next(); // Next and previous may take an optional selector or filtering function el.next('.selector'); el.previous(function(el) { return el.hasClass('bbq') }); // Returns a single element that is a child of this node based on selector el.one('#selector'); // Returns a collection of elements based on selector el.all('.selector'); // Checks if the el has a class el.hasClass('someclass'); // Adds a class el.addClass('someclass'); // Removes a class el.removeClass('someclass'); // Swaps a class el.swapClass('oldclass', 'newclass'); // Sets a style el.setStyle('top', 0); // Removes a style el.removeStyle('top') // Sets several styles el.setStyles({top:0, left:0}); // Removes several styles el.removeStyles(['top', 'left']); // Gets the value of a style el.getStyle('top') // The region() function returns sizing information // The return object has the following properties: top, right, bottom, left, width, height el.region() // Tests that a node intersects with node el.intersects(otherEl); // Gets a data attribute. The following would receive the "data-bbq" attribute el.data('bbq'); // Sets a data attribute el.setData('id', 12345); // Gets the nodes value. Passthru to node.get('value') el.val(); {% endhighlight %}

Creating new node instances is easy using n.node.create().

{% highlight js %} var el = n.node.create('
Some HTML
'); alert(el.hasClass('boringexample')); // Alerts true // Appending nodes as a child n.one('body').append(el); n.one('body').prepend(el); // It's possible to create a node and append it to a selector, or node instance // We can continue to chain methods after appending on the child node. n.node.create('
Content
').appendTo(myNode); n.node.create('
Content
').appendTo('#someSelector'); // Can also use insert (before or after) n.one('.container').insert(el, 'before'); n.one('.container').insert(el, 'after'); // Alternatively you can use insertTo n.node.create('
Content
').inserTo(newSibling, 'after'); {% endhighlight %}

Node Collections

Node Collections are useful when dealing with multiple nodes at once.

{% highlight js %} // Creating a new collection var els = n.all('#mymenu li'); // Iterate over each item in the collection // Receives each element as an argument els.each(function(el){ console.log(el); }); // Chaining from a single node is useful if you already have a node object var mynode = n.one('#mymenu'); mynode.all('li').removeClass('active'); // Removes the 'active' class from all nodes in this collection // Other iterated functions include: addClass, removeStyle(s), setStyle(s) {% endhighlight %}

IO (ajax)

Using n.io it's easy to create ajax calls.

{% highlight js %} // Get an io object with n.io var req = n.io('/backend'); // Setup any handlers req.success(fn); // Send the request req.post(); // Or chain everything together: var req = n.io('/backend').success(fn).post(); // Abort if you want req.abort(); // It's possible to make RESTFUL requests n.io('/backend?key=val').get(); n.io('/backend').put(); n.io('/backend').post(); n.io('/backend').delete(); // The put, delete, and post methods can take data to send to the backend // This data can come in the form of a string or node to serialize n.io('/backend').post('mypet=cat&name=snickers'); n.io('/backend').post(n.one('form#theform')); {% endhighlight %}

IO callbacks receive a specially wrapped IO object. You can either use this object as a JSON response via the o.obj property, or static text. The original request object is available in the request key of the object.

{% highlight js %} // The server here responds with the following JSON: {"foo": "bar"} n.io('/test').success(function(o) { // Alerts the string: {"foo": "bar"} alert(o); // Alerts the string: bar alert(o.obj.foo); }).post(); // The server here responds with: Hello NWT n.io('/test').success(function(o) { // Sets the content of an element to the response text n.one('#myid').setHtml(o); // In this case o.obj is undefined because we are not able to parse the JSON }).post(); {% endhighlight %}

Anim (animation)

The anim utility provides a wrapper for easy CSS3 transitions.

{% highlight js %} // Animate #cat for 2 seconds n.one('#cat').anim({top:100, left:100}, 2); // The following easing functions are available: // linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); n.one('#cat').anim({top:100, left:100}, 2, 'ease-in'); {% endhighlight %}

It's possible to animate most positioning and formating CSS attributes.

{% highlight js %} // Animates the color to red n.one('#mydiv').anim({color:'#FF0000'}); // Hides an element by removing opacity n.one('#mydiv').anim({opacity:0}); // Animates the background color and opacity n.one('#mydiv').anim({background:'#00FF00', opacity:1}); {% endhighlight %}

Chaining with Node

Most node objects can be chained.

{% highlight js %} // Set the class and content of the node n.one('#cat').addClass('lolcat').setHtml('cheezburger'); {% endhighlight %} Using the wait method, you can set delays in chained methods. This is useful for performing multiple animations, starting one after the other, or removing an element after an animation. {% highlight js %} // Update the content after animation n.one('#cat').anim({left:100}).wait(2).setHtml('cheezburger'); // Update the content after animation, then remove it n.one('#cat').anim({left:100}).wait(2).setHtml('cheezburger').wait(4).remove(); {% endhighlight %}

Events

It's possible to chain most events off of the node instance using node.on, or node.once.

{% highlight js %} // Node.on fires an event every time that event happens n.one('#myid').on('click', function (e) { // Assert: this == n.one('#myid') }); n.one('#myid').once('click', function (e) { // Will only be called once // Detaches the event listener after firing once }); // Use off to remove events n.one('#myid').on('click', fn); n.one('#myid').off('click', fn); // Listener removed // You can also use purge to remove multiple events at once el.purge('click', callback, true); // True to recursively remove events from children el.purge(); // Removes all events on the node (does not recurse) {% endhighlight %}

Event callbacks receive a special NWTEventInstance object.

{% highlight js %} n.one('#myid').on('click', function (e) { // Prevents the event from bubbling up the dom e.noBubble(); // Prevents the event from performing the default action e.noDefault(); // Calls both e.noBubble and e.noDefault e.stop(); }); {% endhighlight %}

Additional Information

Browser support

NWT works well in the latest version of all modern browsers (Firefox, Safari, Chrome, IE10). For full IE support, we recommend a conditional tag inclusion.

{% highlight html %} {% endhighlight %}

Ender support

It's possible to package this library with ender using:

ender add nwt

This will still create the global window.nwt variable and does not yet use the Ender bridge.

Filesize

Due to the fact that we only support modern browsers by default, we're able to keep the filesize extremely slim. IE users will not be as fast due to the conditional include.

Framework Minified Size Min + Gzipped Size
jQuery 1.74 93 33
MooTools 1.44 89 25
nwt 13.5 4.82