stepBar_wev8.js
7.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
/**
* author：xyzsyx@163.com 在使用中遇到问题或发现bug更或者有技术交流爱好的朋友请发邮件到我的email，大家一起学习，一起进步！
*
*
* 初始化调用方法 在js的onload事件或jq的$(document).ready()里面调用stepBar.init(id, option)即可。
* 第一个参数为stepBar容器的id，必填，允许传入的值包括如下：
* jQuery对象
* javascript对象
* DOM元素（可转化为ID的字符串，如 “stepBar” || “#stepBar”） 纠错：误把jQuery对象的“#”写成“.”也同样能识别出来，但是必须保证次参数能转化成元素ID
* 第二个参数为一个对象直接量，选填，包含如下的零个或多个
* step string number 目标进度 默认为1（第一步），选填
* change boolean 设置插件是否可被操作，选填 默认false
* animation boolean 设置插件是否采用动画形式（前提stepBar.change为true），选填 默认false
* speed number 动画速度（前提，change和animation为true） 选填 默认1000ms
* stepEasingForward string 从当前步数往前过渡动画（前提，change和animation为true） 选填 默认 "easeOutExpo" 更多参数请参照 jquery.easing.js
* stepEasingBackward string 从当前步数往后过渡动画（前提，change和animation为true） 选填 默认 "easeOutElastic" 更多参数请参照 jquery.easing.js
*
* PS：不合法的参数将强行使用默认值
*/
var stepBar = {
bar : {},
item : {},
barWidth : 0,
itemCount : 2,
itemWidth : 0,
processWidth : 0,
curProcessWidth : 0,
step : 1,
curStep : 0,
triggerStep : 1,
change : false,
animation : false,
speed : 1000,
stepEasingForward : "easeOutCubic",
stepEasingBackward : "easeOutElastic",
init : function(id, option){
if (typeof id == "object" || id.indexOf("#") == 0) {
this.bar = $(id);
} else {
if (id.indexOf(".") == 0) {
id = id.substring(1, id.length);
}
this.bar = $("#" + id);
}
this.change = option.change ? true : false;
this.animation = this.change && option.animation ? true : false;
this.layout();
this.item = this.bar.find(".ui-stepInfo");
if (this.item.length < 2) {
return;
}
this.bar.show();
this.itemCount = this.item.length;
this.step = !isNaN(option.step) && option.step <= this.itemCount && option.step > 0 ? option.step : 1;
this.triggerStep = this.step;
if (!isNaN(option.speed) && option.speed > 0) {
this.speed = parseInt(option.speed);
}
this.stepEasing(option.stepEasingForward, false);
this.stepEasing(option.stepEasingBackward, true);
this.stepInfoWidthFun();
},
stepEasing : function(stepEasing, backward){
if(typeof jQuery.easing[stepEasing] === "function"){
if(backward){
this.stepEasingBackward = stepEasing;
} else {
this.stepEasingForward = stepEasing;
}
}
},
layout : function(){
this.bar.find(".ui-stepInfo .ui-stepSequence").addClass("judge-stepSequence-hind");
this.bar.find(".ui-stepInfo:first-child .ui-stepSequence").addClass("judge-stepSequence-pre");
},
classHover : function(){
if(this.change){
this.bar.find(".ui-stepInfo .judge-stepSequence-pre").removeClass("judge-stepSequence-hind-change").addClass("judge-stepSequence-pre-change");
this.bar.find(".ui-stepInfo .judge-stepSequence-hind").removeClass("judge-stepSequence-pre-change").addClass("judge-stepSequence-hind-change");
}
},
stepInfoWidthFun : function(){
if(this.itemCount > 0){
this.barWidth = this.bar.width();
this.itemWidth = Math.floor((this.barWidth * 0.9) / (this.itemCount - 1));
this.bar.find(".ui-stepLayout").width(Math.floor(this.barWidth * 0.9 + this.itemWidth));
this.item.width(this.itemWidth);
this.bar.find(".ui-stepLayout").css({"margin-left": -Math.floor(this.itemWidth / 2) + 10 });
if(this.change){
this._event();
}
this.percent();
}
},
_event : function(){
var _this = this;
_this.bar.on("click", ".ui-stepSequence", function(){
//var triggerStep = $(this).text();
// if(!isNaN(parseInt(triggerStep)) && triggerStep > 0 && triggerStep <= _this.itemCount && triggerStep != _this.curStep){
// _this.triggerStep = triggerStep;
// _this.percent();
// }
});
},
percent : function(){
var _this = this;
var calc = 100 / (_this.itemCount - 1);
_this.processWidth = calc * (_this.triggerStep - 1) + "%";
var stepSequence = $(".ui-stepSequence");
for ( var i = 0; i < stepSequence.length && i < _this.triggerStep; i++) {
var s = $(stepSequence[i]);
s.removeClass("judge-stepSequence-hind").removeClass("judge-stepSequence-hind-change");
s.addClass("judge-stepSequence-pre").addClass("judge-stepSequence-pre-change");
setTimeout(function(){
s.css("padding", "8px 12px");
},100);
}
if(_this.animation){
if(_this.triggerStep < _this.curStep){
_this._animate();
_this.curStep--;
} else {
_this.curStep++;
}
_this.curProcessWidth = calc * (_this.curStep - 1) + "%";
_this.bar.find(".ui-stepProcess").stop(true).animate({"width" : _this.curProcessWidth}, _this.speed, function(){
_this._animate();
if(_this.processWidth != _this.curProcessWidth){
_this.percent();
}
});
} else {
if(_this.curProcessWidth != _this.processWidth){
_this.curProcessWidth = _this.processWidth;
_this.bar.find(".ui-stepProcess").width(_this.processWidth);
_this.jump();
}
}
},
jump : function(){
this.bar.find(".ui-stepInfo .ui-stepSequence").removeClass("judge-stepSequence-pre").addClass("judge-stepSequence-hind");
this.bar.find(".ui-stepInfo:nth-child(-n+" + this.triggerStep + ") .ui-stepSequence").removeClass("judge-stepSequence-hind").addClass("judge-stepSequence-pre");
this.classHover();
},
_animate : function(){
var stepSequence_size = {},
easing = this.stepEasingBackward,
preClass,
hindClass;
if(this.triggerStep < this.curStep){
stepSequence_size.padding = "6px 10px";
preClass = "judge-stepSequence-pre";
hindClass = "judge-stepSequence-hind";
easing = this.stepEasingForward;
} else {
stepSequence_size.padding = "8px 12px";
preClass = "judge-stepSequence-hind";
hindClass = "judge-stepSequence-pre";
}
this.bar.find(".ui-stepInfo:nth-child(" + this.curStep + ") .ui-stepSequence").removeClass(preClass).addClass(hindClass);
this.bar.find(".ui-stepInfo:nth-child(" + this.curStep + ") .ui-stepSequence").animate(stepSequence_size, 500, easing);
this.classHover();
}
};