基于jquery步骤进度条源码分享


Posted in Javascript onNovember 12, 2015

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效。效果图如下:

基于jquery步骤进度条源码分享

在线预览       源码下载

html代码:

<div class="step_context test"></div>
当前步骤:
第<input type="text" value="5" id="currentStepVal" />步 <button onclick="StepTool.drawStep(jQuery('#currentStepVal').val(),stepListJson);" type="button">重新生成</button>
<script type="text/javascript">
  //所有步骤的数据
  var stepListJson = [{ StepNum: 1, StepText: "第一步" },
  { StepNum: 2, StepText: "第二步" },
  { StepNum: 3, StepText: "第三步" },
  { StepNum: 4, StepText: "第四步" },
  { StepNum: 5, StepText: "第五步" },
  { StepNum: 6, StepText: "第六步" },
  { StepNum: 7, StepText: "第七步" }];
  //当前进行到第几步
  var currentStep = 5;
  //new一个工具类
  var StepTool = new Step_Tool_dc("test", "mycall");
  //使用工具对页面绘制相关流程步骤图形显示
  StepTool.drawStep(currentStep, stepListJson);
  //回调函数
  function mycall(restult) {
    // alert("mycall"+result.value+":"+result.text);
    StepTool.drawStep(result.value, stepListJson);
    //TODO...这里可以填充点击步骤的后加载相对应数据的代码
  }
</script>

以上代码就是小编给大家分享的基于jquery步骤进度条源码分享,希望大家喜欢。

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
封装属于自己的JS组件
Jan 27 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 #Javascript
javascript弹出窗口实现代码
Nov 12 #Javascript
javascript实现tab切换特效
Nov 12 #Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 #Javascript
JavaScript中获取Radio被选中的值
Nov 11 #Javascript
javascript图片滑动效果实现
Jan 28 #Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 #Javascript
You might like
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
js计算精度问题小结
2013/04/22 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
网上书店创业计划书
2014/01/12 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
企业员工培训感言
2014/02/26 职场文书
小学生操行评语大全
2014/04/22 职场文书
化学工程专业求职信
2014/08/10 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python