bui.stepbar Class
Constructor
bui.stepbar
(
-
option
Parameters:
-
optionObject-
idString控件id
-
[uid]String optional1.6.6新增，实例的自定义唯一名字，用于命令式调用
-
dataArray步骤的内容 例如:[{ title:"",subtitle:"",content:""}]
-
titleString步骤的标题 -
[subtitle]String optional步骤的子标题 -
[className]String optional1.5.4新增 步骤的自定义样式名，例如："step01" -
[content]String optional步骤的内容
-
-
[template]Function optional1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据
-
[hasNumber]Boolean optional1.5.0新增, 默认false(原点中间无数字)|true(原点中间有数字)
-
[direction]Boolean optional1.6.6新增, 默认"y" | "x";
-
[lineCenter]Boolean optional1.5.0新增, 默认false(圆点在线两端)|true(圆点在线中心)1.6.6废弃，通过direction:"x"自动改变 -
[handle]String optional点击的区域,属于循环的那部分
-
[click]Boolean optional允许点击时候修改对应的激活状态
-
[value]Number optional1.5.6新增, 初始化在第几步
-
[callback]Function optional点击按钮的回调
-
[onChange]Function optional步骤改变的回调
-
[onBeforeInit]Function optional1.5.1新增 初始化前触发
-
[onInited]Function optional1.5.1新增 初始化以后触发
-
Example:
html:
<div id="step" class="bui-stepbar"></div>
js:
//初始化控件
var uiStepbar = bui.stepbar({
id: "#step",
data: [{
title: "预立项申请",
subtitle: "2016-04-2 10:30",
content: "成功创建申请,已经提交至XX部门经理审批,请耐心等待"
},{
title: "立项审批",
subtitle: "2016-04-21 10:30",
content: "审批完成,资料递交中"
}]
});
//激活第2步
uiStepbar.value(1);
//2. 自定义模板初始化
var uiStepbar = bui.stepbar({
id: "#step",
data: [{
title: "预立项申请",
subtitle: "2016-04-2 10:30",
content: "成功创建申请,已经提交至XX部门经理审批,请耐心等待"
},{
title: "立项审批",
subtitle: "2016-04-21 10:30",
content: "审批完成,资料递交中"
}],
template: function(data) {
var html = '';
data && data.forEach(function(item,i) {
html += `<div class="bui-stepbar-cell">
<span class="bui-stepbar-dot"></span>
<div class="bui-stepbar-text">
<h3>${item.title}</h3>
<p class="bui-stepbar-time">${item.subtitle}</p>
<p class="bui-stepbar-desc">${item.content}</p>
</div>
</div>`
})
return html;
}
});
Methods
destroy
(
-
[bool]
[销毁控件]
Parameters:
-
[bool]Boolean optional默认: false 销毁部分 | true 销毁全部
Example:
//销毁
uiStepbar.destroy();
getItem
(
Object
chainable
-
[index] [ 获取第几个的数据，默认为当前tab的索引]
返回当前的数据，有传 data 参数的时候才会有效
Parameters:
-
[index] [ 获取第几个的数据，默认为当前tab的索引]Number optional
Returns:
Object:
[返回数组]
init
(
chainable
-
[option]
初始化方法,用于重新初始化结构,事件只初始化一次
Parameters:
-
[option]Object optional参数控件本身
next
()
下一步
Example:
//下一步
uiStepbar.next();
next
()
下一步
Example:
//下一步
uiStepbar.next();
option
(
chainable
-
[key] -
[value]
获取设置参数
Parameters:
-
[key]String | object optional不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数
-
[value]String | number | boolean | function optional设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传
Example:
//获取所有参数
//获取所有参数
var option = uiStepbar.option();
//获取某个参数
var id = uiStepbar.option( "id" );
//修改一个参数
uiStepbar.option( "click",false );
//修改多个参数
uiStepbar.option( {"click":false} );
prev
()
上一步
Example:
//上一步
uiStepbar.prev();
value
(
-
[index] -
[status]
设置或者获取值
Parameters:
-
[index]Number optional设置值
-
[status]String optional1.5.6新增,支持设置状态样式名, 默认"success"
Example:
//设置值
uiStepbar.value(1);
//获取值
var val = uiStepbar.value();
widget
(
-
[name]
获取依赖的控件
Parameters:
-
[name]String optional依赖控件名
Example:
//获取依赖控件
var uiStepbarWidget = uiStepbar.widget();
Events
off
为控件取消绑定事件
Event Payload:
-
[type]String optional事件类型: "change"(改变时触发) | "next"(下一步时触发) | "prev"(上一步时触发)
-
[callback]Function optional绑定的事件, this 为当前点击的菜单
Example:
uiStepbar.off("change");
on
为控件绑定事件
Event Payload:
-
[type]String optional事件类型: "change"(改变时触发) | "next"(下一步时触发) | "prev"(上一步时触发)
-
[callback]Function optional绑定的事件, this 为当前点击的菜单
Example:
uiStepbar.on("change",function () {
// 点击的菜单
console.log(this);
});