jQuery分步步骤-白红宇

jQuery分步步骤

阅读量：5901 次

发布时间：2019-06-19

本文共 2775 字，大约阅读时间需要 9 分钟。

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

使用方法

1.引入样式和脚本

1 
     2 3

2.初始化插件

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

3.方法

1 $step.getIndex()；// 获取当前的index2 $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+='
     
      
      
      
       ',i.each(s,function(i,t){e+='
       
        
         '+t+'
        
        
         '+(i+1)+"
        
"}),e+="
      
     
"),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  2  3  4      5         
      6         jQuery分步步骤 7         
      8          9         10         51     52 53     54         
     
      55             
      
56             
      
       57                 
       58                 
       59                 
       60                 
       61             
      
62             
      
       index：
       
      
63         
     
64 65         97     98 99