插件描述：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. CentOS yum 安装 Apache + PHP + MySQL

    # 检查并卸载rpm -qa|grep httpdrpm -e httpdrpm -qa|grep mysqlrpm -e mysqlrpm -qa|grep phprpm -e php # 删除默认 ...

  2. boost 随机数发生器

    Random     随机数 在很多应用中都需要使用随机数.本库力求提供一个高效的,通用的随机数库.boost库有多种随机数生成方式.先熟悉一下各种随机数生成器的概念. 数字生成器(Number Ge ...

  3. shell中的dd命令使用详解

    一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...

  4. SharePoint 2016: 数据库正在兼容性范围内运行，建议进行升级

    问题描述: SharePoint 运行状况分析器提示: 中文:数据库正在兼容性范围内运行,建议进行升级. 英文:Database running in compatibility range and ...

  5. 微信小程序-聊天列表-角标

    <div class="list-body" bindtap='openChat' data-Obj='{{oitem}}'> <!-- 头像 --> &l ...

  6. zabbix添加对centos系统cpu使用率百分比的监控

    cpu使用率key: system.cpu.util[] 在grafana现实的时候配置,单位选择percent(0-100),范围0-100

  7. Laravel 5.2问题-----postman进api的post请求，为什么出现Forbidden？

    Forbidden?就纳闷了,有写验证规则的,但是它出现紧张,感觉就是我落了设置什么东西了才会这样? 果不其然, Laravel有个一自动验证的,创建的时候是默认打开的, namespace App\ ...

  8. Go数组和切片定义和初始化

    1 前言 切片是动态数组,数组数组是按值赋值,切片是按地址赋值(引用) 2 代码 2.1 数组初始化 func basic_array(){ //var arr2 = [3]int{2,4,6} // ...

  9. Golang并发模型之Context详解

    对于 Golang 开发者来说context(上下文)包一定不会陌生.但很多时候,我们懒惰的只是见过它,或能起到什么作用,并不会去深究它. 应用场景:在 Go http 包的 Server 中,每一个 ...

  10. RedHat Linux关闭seLinux命令

    Redhat使用了SELinux来增强安全,关闭的办法为: 1. 永久有效 修改 /etc/selinux/config 文件中的 SELINUX="" 为 disabled ,然 ...