插件描述：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. python3+selenium入门12-警告框处理

    在WebDriver中要处理JS生成的alert.confirm以及prompt,需要使用到switch_to_alert()定位到alert/confirm/prompt,然后再使用text.acc ...

  2. Python3学习笔记03-基础数据类型

    Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对 ...

  3. 范数（norm） 几种范数的简单介绍

    原文地址:https://blog.csdn.net/a493823882/article/details/80569888 我们知道距离的定义是一个宽泛的概念,只要满足非负.自反.三角不等式就可以称 ...

  4. $Django 发送邮件--django封装模块和python内置SMTP模块

    一 使用SMTP模块发送邮件 import smtplib from email.mime.text import MIMEText from email.header import Header m ...

  5. Linux mem/swap/buffers/cached 区别

    Free free 命令相对于top 提供了更简洁的查看系统内存使用情况: $ free total used free shared buffers cached Mem: 255268 23833 ...

  6. Ubuntu选择软件源

    1. 系统桌面右上角,系统菜单中选择Software Up to Date 2. 点击Settings-按钮 3. Ubuntu Software标签页,Download from选择中国的软件服务器 ...

  7. 前端 ----jQuery操作表单

    05-使用jQuery操作input的value值   表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用j ...

  8. spring mvc数据绑定与表单标签库

    Book类为 package org.shaoxiu; public class Book { private String id; private String name; public Book( ...

  9. java结合testng，利用excel做数据源的数据驱动实例

    数据驱动部分,是自动化测试常用部分,也是参数化设计的重要环节,前面分享了,mysql.yaml做数据源,那么再来分享下excel做数据驱动 思路: 先用POI读取excel.解析读取数据,返回list ...

  10. PHP中get请求中参数的key不能是para

    &para会被转化成¶,然后就无法进行下去了. 仅作记录.