[学习交流] 【广州前端】Jquery-step分步完成插件

本帖最后由李盼盼老师于 2017-12-28 10:50 编辑

Jquery-step分步完成插件

【简介】

分布完成功能是现在开发中非常常见的一个功能，例如一些订票系统、注册账号等等都会设置分步完成。下面给大家介绍一款十分简单实用的分步完成插件，它是基于jquery的一款插件，样式可以根据需求自己去修改，主要是可实现分步工作。

【需引入的文件】

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.step.min.js"></script>

【结构代码】

[HTML] 纯文本查看 复制代码

  <div id="step"></div>[/align]
       <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>

以上的标签的id名或类名没有硬性规定，可以自己任意取

【css代码】

样式不做介绍，可根据需求修改, 下面是本案例图

【js代码】

[JavaScript] 纯文本查看 复制代码

[/align][align=left]        var $step = $("#step");  //分步的进度条标签[/align]       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());
       });

【案例演示】

【案例代码】

jquery-step分步完成插件.rar (34.14 KB, 下载次数: 0, 售价: 2 黑马币)

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】Jquery-step分步完成插件

0 个回复