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.
