Recommend this page to a friend! |
Download .zip |
Info | View files (38) | Download .zip | Reputation | Support forum | Blog | Links |
Last Updated | Ratings | Unique User Downloads | Download Rankings | |||||
2015-02-28 (1 year ago) | Not enough user ratings | Total: 213 | All time: 210 This week: 39 |
Version | Licenses | JavaScript version | Categories | |||
jquery-toolkit 1.0.1 | GNU General Publi... | 1.0 | HTML, jQuery |
Description | Author | |
This package can be used to create widgets reading options from CSS classes. Innovation Award
|
# 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 |
File | Role | Description | ||
---|---|---|---|---|
src (3 files, 1 directory) | ||||
jquery.toolkit.sto....userDataFrame.html | Data | Auxiliary data | ||
readme.md | Doc. | Documentation |
Files | / | src |
File | Role | Description | ||
---|---|---|---|---|
plugins (13 directories) | ||||
jquery.toolkit.css | Data | Sample output | ||
jquery.toolkit.js | Class | Class source | ||
jquery.toolkit.storage.js | Class | Class source |
Files | / | src | / | plugins | / | dialogbox |
File | Role | Description |
---|---|---|
jquery.tk.dialogbox.css | Data | Sample output |
jquery.tk.dialogbox.js | Class | Class source |
Files | / | src | / | plugins | / | keypad |
File | Role | Description |
---|---|---|
jquery.tk.keypad.css | Data | Sample output |
jquery.tk.keypad.js | Class | Class source |
Files | / | src | / | plugins | / | measure |
File | Role | Description |
---|---|---|
demo.html | Example | Documentation |
jquery.tk.measure.css | Data | Sample output |
jquery.tk.measure.js | Class | Class source |
Files | / | src | / | plugins | / | notify |
File | Role | Description |
---|---|---|
demo.html | Example | Documentation |
jquery.tk.notify.css | Data | Sample output |
jquery.tk.notify.js | Class | Class source |
Files | / | src | / | plugins | / | placeholder |
File | Role | Description |
---|---|---|
jquery.tk.placeholder.js | Class | Class source |
Files | / | src | / | plugins | / | position |
File | Role | Description |
---|---|---|
cross.gif | Output | Sample output |
demo-positionable.html | Example | Documentation |
demo-positionRelative.html | Example | Documentation |
demo.html | Example | Documentation |
jquery.tk.position.js | Class | Class source |
Files | / | src | / | plugins | / | splitpane |
File | Role | Description |
---|---|---|
demo.html | Example | Documentation |
jquery.tk.splitpane.css | Data | Sample output |
jquery.tk.splitpane.js | Class | Class source |
Files | / | src | / | plugins | / | tabbed |
File | Role | Description |
---|---|---|
demo.html | Example | Documentation |
jquery.tk.tabbed.css | Data | Sample output |
jquery.tk.tabbed.js | Class | Class source |
Files | / | src | / | plugins | / | tooltip |
File | Role | Description |
---|---|---|
demo-tooltip.html | Data | Documentation |
jquery.tk.tooltip.css | Data | Sample output |
jquery.tk.tooltip.js | Class | Class source |
Files | / | src | / | plugins | / | treemap |
File | Role | Description |
---|---|---|
jquery.tk.treemap.css | Data | Auxiliary data |
jquery.tk.treemap.js | Class | Class source |
Files | / | src | / | plugins | / | validable |
File | Role | Description |
---|---|---|
demo.html | Example | Documentation |
jquery.tk.validable.css | Data | Sample output |
jquery.tk.validable.js | Class | Class source |
Files | / | src | / | plugins | / | xcss |
File | Role | Description |
---|---|---|
demo.html | Example | Documentation |
jquery.tk.xcss.js | Class | Class source |
Version Control | Unique User Downloads | Download Rankings | |||||||||||||||
100% |
|
|
Applications that use this package |
If you know an application of this package, send a message to the author to add a link here.