FuelUX

Spinbox 微调

assets/js/fuelux/fuelux.spinner.js

<input type="text" name="my-spinner" id="my-spinner" />

$('#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图标可用于“上升”按钮icon_down图标可用于“下降”按钮btn_up_class“”按钮的按钮类btn_down_class“向下”按钮，按钮类on_sides向上和向下按钮在输入框两边touch_spinner大按钮将

$('#my-spinner').ace_spinner('disable');

$('#my-spinner').ace_spinner('enable');

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

$('#my-spinner').closest('.ace-spinner').spinbox('disable');

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

//do something

})

Wizard 向导

assets/js/fuelux/fuelux.wizard.js

<div id="my-wizard"><!-- wrap step list and step panes -->

<!-- step list -->

<ul class="steps">

<li data-step="1" class="active">

<span class="step">1</span>

<span class="title">Step1</span>

</li>

<li data-step="2">

<span class="step">2</span>

<span class="title">Step2</span>

</li>

</ul>

<!-- step panes -->

<div class="step-content">

<div class="step-pane active" data-step="1">

<!-- step 1 -->

</div>

<div class="step-pane" data-step="2">

<!-- step 2 -->

</div>

</div>

</div>

上一步、下一步 按钮

<div id="my-wizard">

</div>

<div class="wizard-actions">

<button class="btn-prev btn">

<i class="ace-icon fa fa-arrow-left"></i> Prev

</button>

<button class="btn-next btn btn-success" data-last="Finish ">

Next <i class="ace-icon fa fa-arrow-right icon-on-right"></i>

</button>

</div>

启用向导

$('#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

Treeview 树

assets/js/fuelux/fuelux.treeview.js

1. open-icon 打开状态图标
2. close-icon 关闭状态图标
3. selectable 默认
4. selected-icon 选中
5. unselected-icon 未选中

<ul id="tree1"></ul>

$('#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 、.tree-plus 图标

事件

$('#tree1').on('opened.fu.tree', function () {

//do something

})

dataSource

$('#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 });

}