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

使用方法

1.引入样式和脚本

 <link rel="stylesheet" type="text/css" href="css/jquery.step.css" />

 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

 <script src="js/jquery.step.min.js"></script>

2.初始化插件

 var $step = $("#step");

 $step.step({

    index: 0,

    time: 500,

    title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]

 });

3.方法

 $step.getIndex()；// 获取当前的index

 $step.prevStep();// 上一步

 $step.nextStep();// 下一步

 $step.toStep(index);// 跳到指定步骤

插件css源码：

body,

div,

ul,

li {

    margin:;

    padding:;

}

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:;

}

.ui-step-wrap .ui-step-bg {

    width: 100%;

    background: #ddd;

}

.ui-step-wrap .ui-step-progress {

    width:;

    background: #64BD2E;

}

.ui-step-wrap .ui-step {

    position: relative;

    z-index:;

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

插件实例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>jQuery分步步骤</title>

         <link rel="stylesheet" type="text/css" href="css/jquery.step.css" />

         <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

         <script src="js/jquery.step.min.js"></script>

         <style>

             button {

                 display: inline-block;

                 padding: 6px 12px;

                 font-size: 14px;

                 line-height: 1.42857143;

                 text-align: center;

                 cursor: pointer;

                 border: 1px solid transparent;

                 border-radius: 4px;

                 color: #fff;

                 background-color: #5bc0de;

             }

             .main {

                 width: 1000px;

                 margin: 100px auto;

             }

             #step {

                 margin-bottom: 60px;

             }

             .btns {

                 float: left;

             }

             .info {

                 float: left;

                 height: 34px;

                 line-height: 34px;

                 margin-left: 40px;

                 font-size: 28px;

                 font-weight: bold;

                 color: #928787;

             }

             .info span {

                 color: red;

             }

         </style>

     </head>

     <body>

         <div class="main">

             <div id="step"></div>

             <div class="btns">

                 <button id="prevBtn">上一步</button>

                 <button id="nextBtn">下一步</button>

                 <button id="btn1">跳到第二步</button>

                 <button id="btn2">跳到第三步</button>

             </div>

             <div class="info">index：<span id="index"></span></div>

         </div>

         <script type="text/javascript">

             var $step = $("#step");

             var $index = $("#index");

             $step.step({

                 index: 0,

                 time: 500,

                 title: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]

             });

             $index.text($step.getIndex());

             $("#prevBtn").on("click", function() {

                 $step.prevStep();

                 $index.text($step.getIndex());

             });

             $("#nextBtn").on("click", function() {

                 $step.nextStep();

                 $index.text($step.getIndex());

             });

             $("#btn1").on("click", function() {

                 $step.toStep(1);

                 $index.text($step.getIndex());

             });

             $("#btn2").on("click", function() {

                 $step.toStep(2);

                 $index.text($step.getIndex());

             });

         </script>

     </body>

 </html>

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

jQuery分步步骤的更多相关文章

  1. 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  2. 11 个超棒的 jQuery 分步指引插件

    当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...

  3. 11个超棒的 jQuery 分步指引插件(转)

    当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...

  4. jQuery 分步引导 插件

    转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验.往 ...

  5. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  6. Jquery分步学习一

    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> ...

  7. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  8. 22、JSON/jQuery上

      1)掌握JSON及其应用 2)了解jQuery的背景和特点 3)理解js对象和jQuery对象的区别 4)掌握jQuery九类选择器及应用(上)   声明:今天服务端我们使用Struts2技术 一 ...

  9. jQuery初步

    1.jQuery开发步骤 jQuery是第三方开源组织基于js写的一款跨主流浏览器的实用库. (1)引用第三方js库文件,<script type="text/javascript&q ...

随机推荐

  1. 用ethtool 命令解决Linux 网卡丢包【转】

    转自:https://blog.csdn.net/chengxuyuanyonghu/article/details/73739516 生产中有一台Linux设备并发比较大,droped包比较多,尤其 ...

  2. 在VC中改变TAB顺序的方法

    用VC来写MFC程序的时候,多数情况下,会发现TAB顺序和预期的顺序不一致,那么这时就有必要重新调整TAB顺序, 来适应我们所写的程序. 调整TAB顺序的方法有两种: 1.在当前的界面或对话框下按“C ...

  3. 基于TCP(面向连接)的Socket编程

    基于TCP(面向连接)的Socket编程 一.客户端: 1.打开一个套接字(Socket); 2.发起连接请求(connect); 3.如果连接成功,则进行数据交换(read.write.send.r ...

  4. CentOS6.5 上crontab每天自动备份mysql数据库

    步骤: 1. sudo vi /etc/crontab  #编辑crontab任务 2.输入01 12 * * * root /usr/local/mysql/backup/backup.sh > ...

  5. Equivalent Sets HDU - 3836 2011多校I tarjan强连通分量

    题意: 给一些集合 要求证明所有集合是相同的 证明方法是,如果$A∈B$,$B∈A$那么$A=B$成立 每一次证明可以得出一个$X∈Y$ 现在已经证明一些$A∈B$成立 求,最少再证明多少次,就可以完 ...

  6. FastCGI sent in stderr: "PHP Warning: simplexml_load_string(): Entity: line 1: parser error : Start tag expected, '&lt;' not found in

    2018-4-16 17:59:03 星期一 1. 发送带有xml参数的请求时如果是用php curl, 需要将数组形式的post data 用 http_build_query() 转换 2. 接收 ...

  7. HSSFWorkbook操作excel读写

    //exlel读操作 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Ite ...

  8. Jquery分享插件

    效果图如下: 代码如下: <!DOCTYPE HTML> <html style="padding-bottom: 54px;"> <head> ...

  9. 基于C#net4.5websocket客户端与服务端

    只支持win8以上系统以及windows server2012以上系统 最近在研究视频传输给浏览器,然后使用H5标签解码.视频流采用websocket传输.所以研究了一下C#的websocket. 首 ...

  10. 在 Confluence 中启用 HTTP 响应压缩

    Confluence 能够支持 HTTP 的 GZip 传输编码.这个意味着 Confluence 将可以把数据压缩后传输给用户,这种配置能够针对不稳定的互联网状态下的传输速度缓慢和不稳定并且能够降低 ...