黑马程序员技术交流社区

标题: 【广州前端】Jquery-step分步完成插件 [打印本页]

---

作者: 李盼盼老师    时间: 2017-12-28 10:45
标题: 【广州前端】Jquery-step分步完成插件

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>

       <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] 纯文本查看 复制代码

        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());
       });

【案例演示】

【案例代码】

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

2017-12-28 10:44 上传

点击文件名下载附件
售价: 2 黑马币  [记录]  [购买]

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2