BUI

其它版本:

API for BUI 1.5.2

Show:

bui.stepbar Class

步骤条 beta

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

Constructor

bui.stepbar

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • data Array

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

      • title String
        [ 步骤的标题 ]
      • [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;
       }
   });

Item Index

Events

Methods

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
       uiStepbar.destroy();

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    [参数控件本身]

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]
)

设置或者获取值

Parameters:

  • [index] Number optional

    [设置值]

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);
       });