Spinbox

To use FuelUX spinner you should include assets/js/fuelux/fuelux.spinner.js
For more info and options about it please see its page:
http://getfuelux.com/javascript.html#spinbox

For ease of use, I have made a wrapper for the plugin with some extra options:

$('#my-spinner').ace_spinner({
            min: 0,
            max: 100,
           step: 1,

        icon_up: 'fa-plus',
      icon_down: 'fa-minus',
   btn_up_class: 'btn-success',
 btn_down_class: 'btn-danger',

       on_sides: true
});

Extra options are :
1. icon_up the icon to be used for "up" button
2. icon_down the icon to be used for "down" button
3. btn_up_class the button class for "up" button
4. btn_down_class the button class for "down" button
5. on_sides up and down buttons will be on different sides of input
6. touch_spinner bigger buttons will be used

You can also use the following functions to modify spinner element:

$('#my-spinner').ace_spinner('disable');
$('#my-spinner').ace_spinner('enable');
$('#my-spinner').ace_spinner('value', 3);

If you want to use spinbox's functions directly you need to target the .ace-spinner wrapper element:
```
$('#my-spinner').closest('.ace-spinner').spinbox('disable');
```
Same is true for events.

Latest version of FuelUX renames spinner to spinbox and events are namespaced:

$('#my-spinner').closest('.ace-spinner').on('changed.fu.spinbox', function () {
  //do something
})

Please note that if you want more advanced functionality, you can use jQuery UI's spinner

Wizard

To use FuelUX wizard you should include assets/js/fuelux/fuelux.wizard.js
For more info and options about the plugin see its page:
http://getfuelux.com/javascript.html#wizard
For ease of use, I have made a wrapper for the plugin
Latest version of FuelUX adds several changes to its wizard plugin:
- Rename ul.wizard-steps to ul.steps
- ul.steps and div.step-content are wrapped inside a parent for example div#my-wizard and ace_wizard or FuelUX's wizard function is applied to div#my-wizard
  Note that #my-wizard id is arbitrary and can be anything
- Each ul.steps > li and .step-pane should have a data-step attribute which specifies step number
- change event is now actionclicked.fu.wizard and return false doesn't prevent step change.
  You should use e.preventDefault() now
- Instead of $('#my-wizard').data('wizard') you should now use $('#my-wizard').data('fu.wizard')

The format of your wizard HTML should be something like this:

It's a ul.steps wrapped inside an element which also contains our step panes.

Steps panes container is a .step-content which contains several .step-pane elements each with a data-step attribute.

A .wizard-actions element containing .btn-prev and .btn-next buttons should be a sibling are wizard:
```
 



  
  
```
.btn-next should have a data-last attribute which is "finish" button's text at final step.

There is also a buttons attribute when using ace_wizard function which allows specifying a custom set of action buttons elsewhere.

Use the following code to initiate the wizard:

$('#my-wizard')
.ace_wizard({
  //step: 2 //optional argument. wizard will jump to step "2" at first
  //buttons: '.my-action-buttons' //which is possibly located somewhere else and is not a sibling of wizard
})
.on('actionclicked.fu.wizard' , function(e, info) {
   //info.step
   //info.direction
   
   //use e.preventDefault to cancel
})
.on('changed.fu.wizard', function() {
   //after step has changed
})
.on('finished.fu.wizard', function(e) {
   //do something when finish button is clicked
}).on('stepclick.fu.wizard', function(e) {
   //e.preventDefault();//this will prevent clicking and selecting steps
});

There are several functions available for wizard element which you can use like the following example:

 var wizard = $('#my-wizard').data('fu.wizard');

 //move to step 3
 wizard.currentStep = 3;
 wizard.setState();
 
 //determine selected step
 wizard.selectedItem().step

Treeview

To use FuelUX tree you should include assets/js/fuelux/fuelux.treeview.js
For more info and options about the plugin please see plugin's page:
http://getfuelux.com/javascript.html#tree
For ease of use, I have made a wrapper for the plugin and added a few extra options
Extra options are:
1. open-icon The icon for an open tree node
2. close-icon The icon for a closed tree node
3. selectable Whether items are selectable or not
4. selected-icon Icon for a selected tree node
5. unselected-icon Icon for a non-selected tree node

A basic tree is initiated like this:

$('#tree1').ace_tree({
       dataSource : treeDataSource ,
      multiSelect : true,
      loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
  
      'open-icon' : 'ace-icon tree-minus',
     'close-icon' : 'ace-icon tree-plus',
     'selectable' : true,
  'selected-icon' : 'ace-icon fa fa-check',
'unselected-icon' : 'ace-icon fa fa-times'
});

Two additional icon classes are defined for tree: .tree-minus and .tree-plus

Latest version of FuelUX adds several changes to its tree plugin:

Tree should be a ul element
name is now deprecated and text should be used.

Events are namespaced:

$('#tree1').on('opened.fu.tree', function () {
  //do something
})

dataSource is now a bit different:

$('#tree1').ace_tree({
  dataSource : treeDataSource
  // ... other options
});

var treeDataSource = function(options , callback) {
 //options has extra info such as "type" "text" "additionalParameteres", etc
 //which you can use to specify requested set of data
 var myData = [ ... ];//set of data
 callback({ data: myData });
}

Please see treeview example page for more info

Data Source

In the demo example, dataSource is static inside page's inline script:
mustache/app/views/assets/scripts/treeview.js
An example of a data source dynamically loading data from server is included in examples/treeview.html
You can use additionalParameters parameter to include optional data, for example setting item-selected:true will mark the item as selected upon insertion into tree.
Other extra info you can save inside additionalParameters is id, title, etc ...

Basically you should define a create dataSource function which is called by the plugin when a subtree is requested:

var mySource = function(options , callback) {
  //retrieve data according to "options" parameters
  //and when data is loaded, call "callback"
}
$('#treeview').ace_tree({
 dataSource: mySource
 //other options
});

To get the list of user selected items and posting it to server, you can do the following:

var items = $('#treeview').tree('selectedItems');
//for example convert "items" to a custom string
for(var i in items) if (items.hasOwnProperty(i)) {
   var item = items[i];
   output += item.additionalParameters['id'] + ":"+ item.text+"\n";
}
//send output to server