Icontem

jQuery Toolkit: Create widgets reading options from CSS classes

Recommend this page to a friend!
  Info   View files View files (38)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2015-02-28 (1 year ago) RSS 2.0 feedNot enough user ratingsTotal: 213 All time: 210 This week: 39Up
Version Licenses JavaScript version Categories
jquery-toolkit 1.0.1GNU General Publi...1.0HTML, jQuery
Description Author

This package can be used to create widgets reading options from CSS classes.

It can create jQuery widgets that expect certain values for options.

The toolkit parses the CSS class attribute of the matching HTML page elements to extract the widget name to create and any options it make take as parameters.

Innovation Award
JavaScript Programming Innovation award nominee
February 2014
Number 5
jQuery is a very popular library to build Web based user interfaces.

This object can be used setup Web page widgets using jQuery, taking widget configuration parameters from the page elements class attributes.

Manuel Lemos
Picture of Jonathan Gotti
  Performance   Level  
Name: Jonathan Gotti <contact>
Classes: 8 packages by
Country: France France
Innovation award
Innovation award
Nominee: 5x

Winner: 3x

Details
# JqueryToolkit Basic documentation
### Creating a new plugin:

```javascript
$.toolkit('namespace.pluginName',{..protoype..});
```

creating your plugin with toolkit like describe above you now may instantiate
your plugin by doing:

```javascript
$('selector').pluginName({options});
```

access any plugin method that don't start with an _ doing

```javascript
$('selector').pluginName('methodName'[,arg1,arg2...,argn]);
```

if the method name start with 'get' then the method is considered as a getter
so the method returned values are return as an Array instead of a jQuery object. 
any element on which the plugin is applied will be ensured to have a className
namespace-pluginName applied on them if not already applied in the original markup.


properties of the plugin (used as options) may be accessed by

```javascript
$('selector').pluginName('get_optionName') // return an array of optionName for each elements in the set
$('selector').pluginName('get1_optionName') // return optionName value of the first elment in the matching set
```
### reading options directly from class element attribute.
jQueryToolkit plugins will most of the time allow you to set some options
directly inside the class attribute of the element.
For example let's imagine we have a plugin named "resizer" that set image width
and height attribute to 3 predefined size. It will have  a size option that can
take small|normal|big as values and a zoomHover options that can take values
true|false

if in our original markup we have this:
```
<img src="myimage.png" class="tk-resizer" />
```
we will instanciate the plugin like this
```javascript
$('.tk-resizer').resizer({size:'small',zoomHover:true});
```

If we've previously declared a property '_classNameOptions' in our plugin
prototype just like this:
```javascript
$.toolkit('tk.resizer',{
  _classNameOptions:{
    size:'small|normal|big',
    zoomHover:'|zoom', //-- starting our expression with a '|' make it optional
  },
  _init:function(){
    // initialize your plugin
    // this.elmt is the binded element
    // this.options contains options values
  }
  ... rest of the plugin prototype ...
});
```
now we can achieve the same as before doing this:
```html
<img src="myimage.png" class="tk-resizer-small-zoom" />
```
```javascript
$('.tk-resizer').resizer();
```
(this suppose our plugin to understand that zoom as a value for zoomHover has to
be considered as true)
  Files folder image Files  
File Role Description
Files folder imagesrc (3 files, 1 directory)
Accessible without login Plain text file jquery.toolkit.sto....userDataFrame.html Data Auxiliary data
Accessible without login Plain text file readme.md Doc. Documentation

  Files folder image Files  /  src  
File Role Description
Files folder imageplugins (13 directories)
  Accessible without login Plain text file jquery.toolkit.css Data Sample output
  Plain text file jquery.toolkit.js Class Class source
  Plain text file jquery.toolkit.storage.js Class Class source

  Files folder image Files  /  src  /  plugins  
File Role Description
Files folder imagedialogbox (2 files)
Files folder imagekeypad (2 files)
Files folder imagemeasure (3 files)
Files folder imagenotify (3 files)
Files folder imageplaceholder (1 file)
Files folder imageposition (5 files)
Files folder imageshortcuts (1 file)
Files folder imagesplitpane (3 files)
Files folder imagetabbed (3 files)
Files folder imagetooltip (3 files)
Files folder imagetreemap (2 files)
Files folder imagevalidable (3 files)
Files folder imagexcss (2 files)

  Files folder image Files  /  src  /  plugins  /  dialogbox  
File Role Description
  Accessible without login Plain text file jquery.tk.dialogbox.css Data Sample output
  Plain text file jquery.tk.dialogbox.js Class Class source

  Files folder image Files  /  src  /  plugins  /  keypad  
File Role Description
  Accessible without login Plain text file jquery.tk.keypad.css Data Sample output
  Plain text file jquery.tk.keypad.js Class Class source

  Files folder image Files  /  src  /  plugins  /  measure  
File Role Description
  Accessible without login Plain text file demo.html Example Documentation
  Accessible without login Plain text file jquery.tk.measure.css Data Sample output
  Plain text file jquery.tk.measure.js Class Class source

  Files folder image Files  /  src  /  plugins  /  notify  
File Role Description
  Accessible without login Plain text file demo.html Example Documentation
  Accessible without login Plain text file jquery.tk.notify.css Data Sample output
  Plain text file jquery.tk.notify.js Class Class source

  Files folder image Files  /  src  /  plugins  /  placeholder  
File Role Description
  Plain text file jquery.tk.placeholder.js Class Class source

  Files folder image Files  /  src  /  plugins  /  position  
File Role Description
  Accessible without login Image file cross.gif Output Sample output
  Accessible without login Plain text file demo-positionable.html Example Documentation
  Accessible without login Plain text file demo-positionRelative.html Example Documentation
  Accessible without login Plain text file demo.html Example Documentation
  Plain text file jquery.tk.position.js Class Class source

  Files folder image Files  /  src  /  plugins  /  shortcuts  
File Role Description
  Plain text file jquery.tk.shortcuts.js Class Class source

  Files folder image Files  /  src  /  plugins  /  splitpane  
File Role Description
  Accessible without login Plain text file demo.html Example Documentation
  Accessible without login Plain text file jquery.tk.splitpane.css Data Sample output
  Plain text file jquery.tk.splitpane.js Class Class source

  Files folder image Files  /  src  /  plugins  /  tabbed  
File Role Description
  Accessible without login Plain text file demo.html Example Documentation
  Accessible without login Plain text file jquery.tk.tabbed.css Data Sample output
  Plain text file jquery.tk.tabbed.js Class Class source

  Files folder image Files  /  src  /  plugins  /  tooltip  
File Role Description
  Accessible without login Plain text file demo-tooltip.html Data Documentation
  Accessible without login Plain text file jquery.tk.tooltip.css Data Sample output
  Plain text file jquery.tk.tooltip.js Class Class source

  Files folder image Files  /  src  /  plugins  /  treemap  
File Role Description
  Accessible without login Plain text file jquery.tk.treemap.css Data Auxiliary data
  Plain text file jquery.tk.treemap.js Class Class source

  Files folder image Files  /  src  /  plugins  /  validable  
File Role Description
  Accessible without login Plain text file demo.html Example Documentation
  Accessible without login Plain text file jquery.tk.validable.css Data Sample output
  Plain text file jquery.tk.validable.js Class Class source

  Files folder image Files  /  src  /  plugins  /  xcss  
File Role Description
  Accessible without login Plain text file demo.html Example Documentation
  Plain text file jquery.tk.xcss.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:213
This week:0
All time:210
This week:39Up