jQuery分步步骤

插件描述：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分步步骤的更多相关文章

在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
11 个超棒的 jQuery 分步指引插件
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...
11个超棒的 jQuery 分步指引插件(转)
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...
jQuery 分步引导插件
转自:http://blog.libnav.com/js/57.html 很多时候一个网站或者一个Web应用出品,为了让你的用户知道你的站点(或应用)有些什么?如何操作?为了让你的用户有更好的体验.往 ...
推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
Jquery分步学习一
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script> ...
jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...
22、JSON/jQuery上
1)掌握JSON及其应用 2)了解jQuery的背景和特点 3)理解js对象和jQuery对象的区别 4)掌握jQuery九类选择器及应用(上) 声明:今天服务端我们使用Struts2技术一 ...
jQuery初步
1.jQuery开发步骤 jQuery是第三方开源组织基于js写的一款跨主流浏览器的实用库. (1)引用第三方js库文件,<script type="text/javascript&q ...

随机推荐

【转】Python3 configparse模块（配置）
[转]Python3 configparse模块(配置) ConfigParser模块在python中是用来读取配置文件,配置文件的格式跟windows下的ini配置文件相似,可以包含一个或多个节(s ...
c++学习day4
1.结构(struct) struct name{ int num; name *next; } 1)所占内存空间即结构中所有成员的变量大小之和 2)定义指向结构变量的指针比如 name *a; na ...
C++著名程序库的比较和学习经验
内容目录:1.C++各大有名库的介绍——C++标准库2.C++各大有名库的介绍——准标准库Boost3.C++各大有名库的介绍——GUI4.C++各大有名库的介绍——网络通信5.C++各大有名库的介绍 ...
JavaScript中的this -- 好像很有道理版
函数调用首先需要从函数的调用开始讲起. JS(ES5)里面有三种函数调用形式: func(p1, p2) obj.child.method(p1, p2) func.call(context, p1 ...
html5 - drag 拖拽
参考资料: 张鑫旭 : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...
Android Day1
[2013-10-04 9:49] 复习第一课. Building Your First App; 1.安装好SDK 后,启动Eclipse,新建一个Android工程.设置使用默认. 2.检查文件 ...
Qt图片显示
1.图片截取指定大小 void Setting_TabProduct::changeImageSize(int width,int height,QString imgFile) { QPixmap ...
luasocket 安装记录（FS1.4）
说明:FS 1.4 使用的lua 5.2 ,需要使用luasocket 3.0 以上. 本文以FS 1.4 && luasocket 3.0 为基础,记录安装使用过程. 一.下载 &a ...
zookeeper的三种安装模式
zookeeper的安装分为三种模式:单机模式.集群模式和伪集群模式. 1.单机模式首先,从Apache官网下载一个Zookeeper稳定版本,本次教程采用的是zookeeper-3.4.9版本. ...
js对数组中的数字排序
1 前言如果数组里面都是数字,如果用原生的sort,默认是按字符串排序的,不符合我们的要求 2 代码方法1:添加Array的原生方法 Array.prototype.sort2 =function ...

jQuery分步步骤

使用方法

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

随机推荐

热门专题