JQuery流程步骤工具可点击切换

来源:https://www.sucaihuo.com/js/2423.html 2017-07-15 23:03浏览(1676) 收藏

一款JQuery流程步骤工具可点击切换的特效代码,鼠标悬停在每一步骤时有对应的信息提示,点击任意步骤会自动跳至点击步骤,也可以通过“上一步”或“下一步”来实现步骤切换,自由度还时挺高的,喜欢的童鞋请收下吧。
JQuery流程步骤工具可点击切换
分类:导航菜单 > 动画导航 难易:初级
查看演示 下载资源 下载积分: 60 积分

页面的head部分,仅需引入一个CSS样式,代码如下:

<link type="text/css" rel="stylesheet" href="css/ystep.css">

页面的body部分,先设置好多个流程的容器,代码如下:

<br><br><br><br><br>
<!-- ystep容器 -->
<div class="ystep1"></div>
<br><br><br><br><br>
<div class="ystep2"></div>
<br><br><br><br><br>
<div class="ystep3"></div>
<br><br><br><br><br>
<div class="ystep4"></div>

接着引入jQuery库和一个JS插件,然后对每个流程设置相关的参数,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 引入ystep插件 -->
<script type="text/javascript" src="js/ystep.js"></script>
<script>
  //根据jQuery选择器找到需要加载ystep的容器
  //loadStep 方法可以初始化ystep
  $(".ystep1").loadStep({
    //ystep的外观大小
    //可选值:small,large
    size: "small",
    //ystep配色方案
    //可选值:green,blue
    color: "green",
    //ystep中包含的步骤
    steps: [{
      //步骤名称
      title: "发起",
      //步骤内容(鼠标移动到本步骤节点时,会提示该内容)
      content: "实名用户/公益组织发起项目"
    },{
      title: "审核",
      content: "乐捐平台工作人员审核项目"
    },{
      title: "募款",
      content: "乐捐项目上线接受公众募款"
    },{
      title: "执行",
      content: "项目执行者线下开展救护行动"
    },{
      title: "结项",
      content: "项目执行者公示善款使用报告"
    }]
  });

  $(".ystep2").loadStep({
    size: "large",
    color: "green",
    steps: [{
      title: "发起",
      content: "实名用户/公益组织发起项目"
    },{
      title: "审核",
      content: "乐捐平台工作人员审核项目"
    },{
      title: "募款",
      content: "乐捐项目上线接受公众募款"
    },{
      title: "执行",
      content: "项目执行者线下开展救护行动"
    },{
      title: "结项",
      content: "项目执行者公示善款使用报告"
    }]
  });
  
  $(".ystep3").loadStep({
    size: "small",
    color: "blue",
    steps: [{
      title: "发起",
      content: "实名用户/公益组织发起项目"
    },{
      title: "审核",
      content: "乐捐平台工作人员审核项目"
    },{
      title: "募款",
      content: "乐捐项目上线接受公众募款"
    },{
      title: "执行",
      content: "项目执行者线下开展救护行动"
    },{
      title: "结项",
      content: "项目执行者公示善款使用报告"
    }]
  });
  
  $(".ystep4").loadStep({
    size: "large",
    color: "blue",
    steps: [{
      title: "发起",
      content: "实名用户/公益组织发起项目"
    },{
      title: "审核",
      content: "乐捐平台工作人员审核项目"
    },{
      title: "募款",
      content: "乐捐项目上线接受公众募款"
    },{
      title: "执行",
      content: "项目执行者线下开展救护行动"
    },{
      title: "结项",
      content: "项目执行者公示善款使用报告"
    }]
  });

  $(".ystep1").setStep(2);
  $(".ystep2").setStep(5);
  $(".ystep3").setStep(3);
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2