示例

示例1：基础示例

  1. 1. 加入购物车
  2. 2. 确认订单信息
  3. 3. 付款到支付宝
  4. 4. 确认收货
  5. 5. 评价
//示例1
step1 = new S.Steps('#steps-demo-1');
//运行
step1.render();
//激活第二个步骤
step1.set('act',2);
S.log(step1.get('act'));

激活的步骤当为0或者小于0或非整数或为空号，都意味着不设置激活步骤。

既然有set()，必然有get()，get()比较简单不再演示。

示例2：使用配置参数自动运行组件

  1. 1. 加入购物车
  2. 2. 确认订单信息
  3. 3. 付款到支付宝
  4. 4. 确认收货
step2 = new S.Steps('#steps-demo-2',{'autoRender':true,'act':3});

示例3：改变步骤条颜色

  1. 1. 加入购物车
  2. 2. 确认订单信息
  3. 3. 付款到支付宝
  4. 4. 确认收货
step3 = new S.Steps('#steps-demo-3',{'autoRender':true,'act':2,'color':'blue'});

或者使用

step3 = new S.Steps('#steps-demo-3');
step3.render();
step3.set('act',2);
step3.set('color','blue');

二者产生的效果是一样的，更推荐使用第二种，虽然繁琐，但语义性更强。

内置了6种颜色：橘色、蓝色、绿色、红色、粉色、灰色。

示例4：监听运行结束事件

  1. 1. 加入购物车
  2. 2. 确认订单信息
  3. 3. 付款到支付宝
  4. 4. 确认收货
//示例4
step4 = new S.Steps('#steps-demo-4',{'act':1,'color':'green'});
//运行结束后触发
step4.on('render',function(ev){
S.log('共有'+ev.steps.length+'个步骤');
//改变宽度
step4.set('width',200);
});
step4.render();

示例5：监听激活后、改变颜色后事件

  1. 1. 买家下单
  2. 2. 买家付款
  3. 3. 发货
  4. 4. 买家确认收货
  5. 5. 评价

    

//示例5
step5 = new S.Steps('#steps-demo-5');
//改变激活后触发
step5.on('afterActChange',function(ev){
alert('属性名：'+ev.attrName+'，新的值：' + ev.newVal + ',旧的值：' + ev.prevVal);
});
//改变颜色后触发
step5.on('afterColorChange',function(ev){
alert('允许设置的颜色值有：' + step5.allowColor() + '，你设置的颜色值为：' + ev.newVal);
});
step5.render();
//监听第一个按钮点击事件
Event.on('#demo-5-btn1','click',function(ev){
step5.set('act',3);
});
//监听第二个按钮点击事件
Event.on('#demo-5-btn2','click',function(ev){
step5.set('color','red');
});
//监听第三个按钮点击事件
Event.on('#demo-5-btn3','click',function(ev){
step5.reset();
})

留意只触发了一次，因为监听的是change事件，属性值没有改变，就不会执行setter方法。当执行的是reset的方法时，也会触发change事件！当reset多个属性时，后监听的事件越前触发，比如这里的颜色改变事件触发优先于激活改变事件。

API说明

一、配置参数

参数名 数据类型 默认值 描述
autoRender Boolean false 是否自动运行
width Number '' 单个步骤宽度，当为''时，根据外部容器平分宽度
act Number 0 激活步骤，为0，不激活；从1开始
color String orange 步骤条颜色

二、公开属性

属性名 数据类型 描述
container HTMLElement 容器
isRender Boolean 是否已经运行完成

三、公开方法

1.render
描述： 运行
参数： 无
返回： {Steps} 实例化后的对象
2.allowColor
描述： 获取步骤条组件允许设置的颜色值
参数： 无
返回： {Array} 颜色数组
3.isAllowColor
描述： 是否是允许设置的颜色
参数：
参数名 数据类型 描述
color String 颜色
返回： {Boolean}

四、事件

1.render
描述： 步骤条运行后触发的事件
参数：
参数名 数据类型 描述
steps Array 步骤HTMLElement集合