Show:

bui.stepbar Class

Module: UI

步骤条 beta

demo
value: 设置第几步,跟获取当前在第几步
prev: 上一步
next: 下一步
option: 获取设置参数
widget: 获取依赖控件

Constructor

bui.stepbar

(
  • option
)

Parameters:

  • option Object
    • id String

      控件id

    • [uid] String optional

      1.6.6新增,实例的自定义唯一名字,用于命令式调用

    • data Array

      步骤的内容 例如:[{ title:"",subtitle:"",content:""}]

      • title String
        步骤的标题
      • [subtitle] String optional
        步骤的子标题
      • [className] String optional
        1.5.4新增 步骤的自定义样式名,例如:"step01"
      • [content] String optional
        步骤的内容
    • [template] Function optional

      1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据

    • [hasNumber] Boolean optional

      1.5.0新增, 默认false(原点中间无数字)|true(原点中间有数字)

    • [direction] Boolean optional

      1.6.6新增, 默认"y" | "x";

    • [lineCenter] Boolean optional

      1.5.0新增, 默认false(圆点在线两端)|true(圆点在线中心)1.6.6废弃,通过direction:"x"自动改变

    • [handle] String optional

      点击的区域,属于循环的那部分

    • [click] Boolean optional

      允许点击时候修改对应的激活状态

    • [value] Number optional

      1.5.6新增, 初始化在第几步

    • [callback] Function optional

      点击按钮的回调

    • [onChange] 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;
                                           }
                                       });
                                    

Item Index

Events

Methods

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.stepbar.js:392

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

    默认: false 销毁部分 | true 销毁全部

Example:

       //销毁
                                                       uiStepbar.destroy();
                                                

getItem

(
  • [index] [ 获取第几个的数据,默认为当前tab的索引]
)
Object chainable

Defined in src/scripts/ui/bui.stepbar.js:318

Available since 1.6.7

返回当前的数据,有传 data 参数的时候才会有效

Parameters:

  • [index] [ 获取第几个的数据,默认为当前tab的索引] Number optional

Returns:

Object:

[返回数组]

init

(
  • [option]
)
chainable

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

  • [option] Object optional

    参数控件本身

next

()

下一步

Example:

       //下一步
                                                       uiStepbar.next();
                                                

next

()

下一步

Example:

       //下一步
                                                       uiStepbar.next();
                                                

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

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 optional

    1.5.6新增,支持设置状态样式名, 默认"success"

Example:

       //设置值
                                                       uiStepbar.value(1);
                                                       
                                                       //获取值
                                                       var val = uiStepbar.value();
                                                

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiStepbarWidget = uiStepbar.widget();
                                                

Events

off

Defined in src/scripts/ui/bui.stepbar.js:481

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "change"(改变时触发) | "next"(下一步时触发) | "prev"(上一步时触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiStepbar.off("change");
                                                

on

Defined in src/scripts/ui/bui.stepbar.js:461

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "change"(改变时触发) | "next"(下一步时触发) | "prev"(上一步时触发)

  • [callback] Function optional

    绑定的事件, this 为当前点击的菜单

Example:

       uiStepbar.on("change",function () {
                                                           // 点击的菜单
                                                           console.log(this);
                                                       });