assets/js/fuelux/fuelux.spinner.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);
.ace-spinner
wrapper element:
$('#my-spinner').closest('.ace-spinner').spinbox('disable');
Same is true for events.
$('#my-spinner').closest('.ace-spinner').on('changed.fu.spinbox', function () {
//do something
})
assets/js/fuelux/fuelux.wizard.js
ul.wizard-steps to ul.stepsul.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
ul.steps > li and .step-pane
should have a data-step attribute which specifies step number
e.preventDefault() now
It's a
- 1 Step1
- 2 Step2
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.
.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.
buttons attribute when using ace_wizard
function which allows specifying a custom set of action buttons elsewhere.
$('#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
});
var wizard = $('#my-wizard').data('fu.wizard');
//move to step 3
wizard.currentStep = 3;
wizard.setState();
//determine selected step
wizard.selectedItem().step
assets/js/fuelux/fuelux.treeview.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
ul elementname is now deprecated and text should be used.
$('#tree1').on('opened.fu.tree', function () {
//do something
})
$('#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
mustache/app/views/assets/scripts/treeview.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 ...
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
});
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