Spinbox

To use FuelUX spinner you should include components/fuelux/js/spinbox.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
})

You can add .input-sm to text input element for a smaller and .input-lg for a larger spinner:
```
 
```
Please note that if you want more advanced functionality, you can use jQuery UI's spinner

Wizard

To use FuelUX wizard you should include components/fuelux/js/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 components/_mod/fuelux/tree.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

Note

I have disabled/removed folderSelect option of FuelUX tree because it has a problem with Ace's styling of treeview element.
It allows selecting a folder however does not result in its children being selected automatically.
So it seems unnecessary and you can change it into an "item" to make it selectable if there are no children.
If it has children you can select the children instead and in your code you will be able to determine the parent of those selected children.