assets/js/fuelux/fuelux.spinner.min.js
$('#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 });
icon_up
the icon to be used for "up" buttonicon_down
the icon to be used for "down" buttonbtn_up_class
the button class for "up" buttonbtn_down_class
the button class for "down" buttonon_sides
up and down buttons will be on different sides of inputtouch_spinner
bigger buttons will be used$('#my-spinner').ace_spinner('disable'); $('#my-spinner').ace_spinner('enable'); $('#my-spinner').ace_spinner('value', 3);
assets/js/fuelux/fuelux.wizard.min.js
It's a
- 1 Step1
- 2 Step2
ul.wizard-steps
wrapped inside an element with a data-target
which points to our steps container.
.step-content
which contains
several .step-pane
elements each with a specific id
:
.wizard-actions
element containing
.btn-prev
and .btn-next
buttons should be a sibling of steps container:
.btn-next
should have a data-last
attribute
which is "finish" button's text at final step
$('#my-wizard') .ace_wizard({ //step: 2 //optional argument. wizard will jump to step "2" at first }) .on('change' , function(e, info) { //info.step //info.direction }) .on('finished', function(e) { //do something when finish button is clicked }).on('stepclick', function(e) { //e.preventDefault();//this will prevent clicking and selecting steps });
var wizard = $('#my-wizard').data('wizard'); //move to step 3 wizard.currentStep = 3; wizard.setState(); //determine selected step wizard.selectedItem().step
assets/js/fuelux/fuelux.treeview.min.js
open-icon
The icon for an open tree nodeclose-icon
The icon for a closed tree nodeselectable
Whether items are selectable or notselected-icon
Icon for a selected tree nodeunselected-icon
Icon for a non-selected tree node$('#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' });
.tree-minus
and .tree-plus
assets/js/fuelux/data/fuelux.tree-sample-demo-data.js
examples/treeview.html
additionalParameters
parameter to include optional data,
for example setting item-selected:true
will mark the item as selected upon
insertion into tree.
additionalParameters
is id
, title
, etc ...
data
function
which is called by the plugin when a subtree is requested:
function DataSourceTree(options) { this.url = options.url;//the options you later want to use, for example remote script's url this.data = function(options, callback) { //retrieve data according to "options" parameters //and when data is loaded, call "callback" } } $('#treeview').ace_tree({ dataSource: new DataSourceTree({url: 'treeview.php'}) //other options });
var tree = $('#treeview').data('tree'); var items = 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.name+"\n"; } //send output to server