Plugins

The plugins listed here are official extensions to the nano JavaScript framework, created by the nano development team.

Name	Description	Author	Version	Update	Licence	Download
Browser	Client and platform detection	James Watts	1.0	15/01/2010	GPL	Download
Ajax	Ajax library	James Watts	1.0	20/01/2010	GPL	Download
Cookie	Cookie handling	James Watts	1.0	20/01/2010	GPL	Download
Event	Enhanced event controls	James Watts	1.0	15/02/2010	GPL	Download
DragDrop	Drag and Drop events	James Watts	1.0	15/02/2010	GPL	Download
Query	Query the DOM using CSS selectors	James Watts	1.0	01/03/2010	GPL	Download
Validate	Basic input validation	James Watts	1.0	01/03/2010	GPL	Download
FX	Visual effects library	James Watts	1.0	01/10/2010	GPL	Download

How to add a plugin

To add a plugin, simply include the plugin script in the HEAD of your page using a SCRIPT tag. Make sure that the plugin is included after the main framework script.

  <!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>
      <script type="text/javascript" src="path/to/nano.plugin.js"></script>
    </head>
    <body>
		
      <!-- your content here -->
		
    </body>
  </html>

How to create a plugin

Plugins allow you to easily extend the funcionality of the API. As an example, we'll create a plugin that adds a new parameter when creating a DOM node, a new method to the API wrapper, and an object to store our plugin internals. Here's the code:

  if (nano) { // check that nano exists

      nano.plugin({ // defines our methods to add to the API wrapper

          addMyClass: function() { // simple function to add a predefined class

              return this.addClass(nano.myPlugin.someValue);

          }

      },
      function() {

          this.reg({ // defines new parameters to make available when creating a new DOM node

              myParam: function(value) { // "value" contains the value passed from the parameter

                  this.attr('example', value + ' was added!');

              }

          });

          this.myPlugin = { // this object will be available as "nano.myPlugin"

              someValue: 'my-class'

          };

      });

  }

With the previously defined plugin you will be able to do the following:

  // add a new DOM node with an "example" attribute using the new "myParam" parameter

  var foo = new nano({
      parent: nano.body(),
      tag: 'div',
      text: 'Hello World',
      myParam: 'test'
  });

  foo.get('example'); // returns "test was added!"

  foo.addMyClass(); // modify the node using the new "addMyClass" method

The API documentation for nano.plugin() can be found here, and for nano.reg() here.

nano(JavaScript).framework;

Plugins

How to add a plugin

How to create a plugin