Download Latest Version nano-v1.0.js (25.0 kB)
Email in envelope

Get an email when there's a new version of nano JavaScript framework

Home
Name Modified Size InfoDownloads / Week
plugins 2012-05-04
1 1 weekly downloads
nano 2011-01-23
0
README 2012-05-04 3.2 kB
0
LICENCE 2011-03-06 31.8 kB
0
Totals: 4 Items   35.1 kB 1 
nano JavaScript framework
http://www.nanojs.org

Copyright (c) 2008-2012 James Watts (SOLFENIX)
http://www.solfenix.com

This is FREE software, licensed under the GNU/GPL
http://www.gnu.org/licenses/gpl.html


nano is a light-weight JavaScript framework for building rich UI in 
web applications. Its highly extensible design lets you easily add 
your own functionality to the API with plugins.

To use the nano JavaScript framework on your website include it in 
the HEAD of the document:


 <!DOCTYPE html>
 <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>My Site</title>
     <script type="text/javascript" src="path/to/nano.js"></script>
   </head>
   <body>
		
     <!-- your content here -->
		
   </body>
 </html>


If you're also using plugins with the framework remember that they 
must be included after the core API.

The nano() function is the base of the framework. It allows you to 
implement the core functionalities of the API depending on the type 
of data passed. The function receives a single argument, whcih can 
be any of the following data types:


 id [string] (wraps the element with the specified ID with the API)

 element [node] (wraps the given DOM node with the API)

 parameters [object] (creates a new element using the parameters object)

 onload [function] (registers the function to the document onload event)


To locate an element with the ID "example", just call the nano() 
function with that ID. Once the element is found it is wrapped in 
the API. For example, the following finds the element with the ID 
"example" and adds the class "test" to it:


 nano('example').addClass('test');


If you already have a DOM node and want to wrap it with the API, just 
pass the node object instead of the ID. This will return the same DOM 
node wrapped with the API functionality. When a DOM node is wrapped 
with the API, the reference to the original element can be found in 
the node property.

The nano object is also the global namespace for the API. All the 
general purpose functions of the framework are accessed from this 
object. For example, the following finds all the elements with the 
specified class and hides each one of them:


 nano.find('css', 'test').each(function() {
     this.hide();
 });


To create new elements you need to call the nano() function as a 
constructor, using the new keyword. When called as a constructor, 
the function expects the argument to be an object containing the 
parameters to use.

The following example creates a new DIV element with the content 
"This is an example", and attaches it to the BODY of the document:


 var div = new nano({
     tag   : 'div',
     parent: nano.body(),
     text  : 'This is an example'
 });


Remember, you should only attach new nodes or modify the DOM once the 
document has fully loaded. To do this, always call functions which 
modify the DOM upon page load by passing a function as the argument 
which contains those calls. You can register as many functions to the 
onload of the document as you require.


 nano(function() {
     nano.body().add({
         tag : 'span',
         text: 'I was added!'
     });
 });


Visit http://www.nanojs.org for more information.
Source: README, updated 2012-05-04