基于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 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
详解Angular2响应式表单
Jun 14 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JavaScript实现网页留言板功能
Nov 23 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
mayfish 数据入库验证代码
2010/04/30 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js实现拖拽效果
2015/02/12 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
python中文乱码的解决方法
2013/11/04 Python
python中list循环语句用法实例
2014/11/10 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Python实现疫情地图可视化
2021/02/05 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
预备党员思想汇报
2014/01/08 职场文书
励志演讲稿大全
2014/08/21 职场文书
采购员岗位职责
2015/02/03 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python