插件描述：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. 用VC进行64位编程

    用VC进行64位编程 分类: C/C++2014-04-30 15:14 532人阅读 评论(0) 收藏 举报 本文转自:http://www.usidcbbs.com/read-htm-tid-52 ...

  2. PHP JSON 数据解析代码

    作者: 字体:[增加减小] 类型:转载   PHP解析JSON 数据代码,与大多数流行的 Web 服务如 twitter .人人网通过开放 API 来提供数据一样,它总是能够知道如何解析 API 数据 ...

  3. struts2框架之类型转换（参考第二天学习笔记）

    类型转换 1. 什么是类型转换 刚才学习了封装请求参数,把表单数据封装到Action(模型)的属性中.表单中的数据都是String类型,但Action(模型)的属性不一定什么类型. 将来我们还需要数据 ...

  4. python学习第天14天。

    模块 什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码( ...

  5. Laravel 自定义分页、可以调整、显示数目

    {{-- 增加输入框,跳转任意页码和显示任意条数 --}} <ul class="pagination pagination-sm"> <li> <s ...

  6. [C][代码实例]交换指向常量的二级指针的位置

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <time.h> ...

  7. Golang的优雅重启

    更新(2015年4月):Florian von Bock已将本文中描述的内容转换为一个名为endless的优秀Go包 . 如果您有Golang HTTP服务,可能需要重新启动它以升级二进制文件或更改某 ...

  8. 图解elasticsearch的_source、_all、store和index

    Elasticsearch中有几个关键属性容易混淆,很多人搞不清楚_source字段里存储的是什么?store属性的true或false和_source字段有什么关系?store属性设置为true和_ ...

  9. cdh5.15集群添加spark2.3服务（parcels安装）

    背景: 机器系统:redhat7.3:已经配置了http服务 集群在安装的时候没有启动spark服务,因为cdh5.15自带的spark不是2.0,所以直接进行spark2.3的安装 参考文档:htt ...

  10. vue 循环前十条数据

    v-for="(item, index) in items" v-if="index<10"