bui.stepbar Class
Constructor
bui.stepbar
(
-
option
Parameters:
-
optionObject-
idString[控件id]
-
dataArray[ 步骤的内容 例如:[{ title:"",subtitle:"",content:""}] ]
-
titleString[ 步骤的标题 ] -
[subtitle]String optional[ 步骤的子标题 ] -
[content]String optional[ 步骤的内容 ]
-
-
[template]Function optional[ 1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据]
-
[hasNumber]Boolean optional[1.5.0新增, 默认false(原点中间无数字)|true(原点中间有数字)]
-
[lineCenter]Boolean optional[1.5.0新增, 默认false(圆点在线两端)|true(圆点在线中心)]
-
[handle]String optional[点击的区域,属于循环的那部分]
-
[click]Boolean optional[允许点击时候修改对应的激活状态]
-
[callback]Function optional[ 点击按钮的回调 ]
-
[onBeforeInit]Function optional[ 1.5.1新增 初始化前触发 ]
-
[onInited]Function optional[ 1.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;
}
});