jQuery分步步骤

插件描述：jQuery上一步、下一步，分步步骤，兼容性如下：

使用方法

1.引入样式和脚本

1 <link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
2 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
3 <script src="js/jquery.step.min.js"></script>

2.初始化插件

1 var $step = $("#step");
2 $step.step({
3    index: 0,
4    time: 500,
5    title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]
6 });

3.方法

1 $step.getIndex()；// 获取当前的index
2 $step.prevStep();// 上一步
3 $step.nextStep();// 下一步
4 $step.toStep(index);// 跳到指定步骤

插件css源码：

body,
div,
ul,
li {
    margin: 0;
    padding: 0;
}

body {
    font-family: "微软雅黑";
}

.ui-step-wrap {
    position: relative;
}

.ui-step-wrap .ui-step-bg,
.ui-step-wrap .ui-step-progress {
    height: 6px;
    position: absolute;
    top: 50px;
    left: 0;
}

.ui-step-wrap .ui-step-bg {
    width: 100%;
    background: #ddd;
}

.ui-step-wrap .ui-step-progress {
    width: 0;
    background: #64BD2E;
}

.ui-step-wrap .ui-step {
    position: relative;
    z-index: 1;
    list-style: none;
}

.ui-step-wrap .ui-step:after {
    content: '';
    display: table;
    clear: both;
}

.ui-step-wrap .ui-step .ui-step-item {
    float: left;
}

.ui-step-wrap .ui-step .ui-step-item div {
    text-align: center;
    color: #625454;
}

.ui-step-wrap .ui-step .ui-step-item .ui-step-item-num {
    margin-top: 18px;
}

.ui-step-wrap .ui-step .ui-step-item .ui-step-item-num span {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #dad9d9;
}

.ui-step-wrap .ui-step .ui-step-item.active .ui-step-item-num span {
    color: #fff;
    background: #64BD2E;
}

插件压缩源码：

!function(i){i.fn.step=function(e){var t=this,n={index:0,time:400,title:[]},s=(e=i.extend({},n,e)).title,d=s.length,u=e.time,p=t.width()/d;t.index=e.index;var a=function(){var e="";s.length>0&&(e+='<div class="ui-step-wrap"><div class="ui-step-bg"></div><div class="ui-step-progress"></div><ul class="ui-step">',i.each(s,function(i,t){e+='<li class="ui-step-item"><div class="ui-step-item-title">'+t+'</div><div class="ui-step-item-num"><span>'+(i+1)+"</span></div></li>"}),e+="</ul></div>"),t.append(e),t.find(".ui-step").children(".ui-step-item").width(p),t.toStep(t.index)};return t.toStep=function(e){var n=t.find(".ui-step").children(".ui-step-item");t.index=e,t.find(".ui-step-progress").animate({width:p*(e+1)},u,function(){i.each(n,function(t){t>e?i(this).removeClass("active"):i(this).addClass("active")})})},t.getIndex=function(){return t.index},t.nextStep=function(){t.index>d-2||(t.index++,t.toStep(t.index))},t.prevStep=function(){t.index<1||(t.index--,t.toStep(t.index))},a(),this}}(jQuery);

插件实例：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>jQuery分步步骤</title>
 7         <link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
 8         <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 9         <script src="js/jquery.step.min.js"></script>
10         <style>
11             button {
12                 display: inline-block;
13                 padding: 6px 12px;
14                 font-size: 14px;
15                 line-height: 1.42857143;
16                 text-align: center;
17                 cursor: pointer;
18                 border: 1px solid transparent;
19                 border-radius: 4px;
20                 color: #fff;
21                 background-color: #5bc0de;
22             }
23             
24             .main {
25                 width: 1000px;
26                 margin: 100px auto;
27             }
28             
29             #step {
30                 margin-bottom: 60px;
31             }
32             
33             .btns {
34                 float: left;
35             }
36             
37             .info {
38                 float: left;
39                 height: 34px;
40                 line-height: 34px;
41                 margin-left: 40px;
42                 font-size: 28px;
43                 font-weight: bold;
44                 color: #928787;
45             }
46             
47             .info span {
48                 color: red;
49             }
50         </style>
51     </head>
52 
53     <body>
54         <div class="main">
55             <div id="step"></div>
56             <div class="btns">
57                 <button id="prevBtn">上一步</button>
58                 <button id="nextBtn">下一步</button>
59                 <button id="btn1">跳到第二步</button>
60                 <button id="btn2">跳到第三步</button>
61             </div>
62             <div class="info">index：<span id="index"></span></div>
63         </div>
64 
65         <script type="text/javascript">
66             var $step = $("#step");
67             var $index = $("#index");
68 
69             $step.step({
70                 index: 0,
71                 time: 500,
72                 title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]
73             });
74 
75             $index.text($step.getIndex());
76 
77             $("#prevBtn").on("click", function() {
78                 $step.prevStep();
79                 $index.text($step.getIndex());
80             });
81 
82             $("#nextBtn").on("click", function() {
83                 $step.nextStep();
84                 $index.text($step.getIndex());
85             });
86 
87             $("#btn1").on("click", function() {
88                 $step.toStep(1);
89                 $index.text($step.getIndex());
90             });
91 
92             $("#btn2").on("click", function() {
93                 $step.toStep(2);
94                 $index.text($step.getIndex());
95             });
96         </script>
97     </body>
98 
99 </html>

原文地址：http://www.jq22.com/jquery-info15145

使用方法

猜你喜欢