基于jquery步骤进度条源码分享
更新时间：2015年11月12日 09:21:53 投稿：mrr
本文给大家分享基于jquery步骤进度条源码分享，实现功能是这样的，在输入框中输入第3步，点击重新生成按钮，相应的步骤颜色就会加深，对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步骤进度条源码分享，希望大家喜欢。
相关文章
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。2015-07-07
jquery中的queue和dequeue是一组很有用的方法，他们对于一系列需要按次序运行的函数特别有用。特别animate动画，ajax，以及timeout等需要一定时间的函数2014-03-03
基于jQuery实现交互体验社会化分享代码附源码下载。这是一款鼠标点击分享按钮向右滑出腾讯微博，新浪微博，QQ空间，豆瓣，微信，二维码分享等分享平台，本段代码比较实用，需要的朋友参考下吧2016-01-01
这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了基于jQuery的时间戳与日期间的转化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
jquery中的foreach想必大家并不陌生吧，使用jquery的朋友肯定会很熟悉，本文有个不错的示例大家不妨可以巩固一下2013-09-09
JQuery 拾色器插件发布-jquery.icolor.js
web项目中不少地方需要用到颜色选择器，比如设置某个元素的背景色、边框色等等，按照我们交互设计的期望-设色器最好简单易用，仅显示常用的那些色块给用户选择，另外提供一个输入框方便用户输入自定义的色值。2010-10-10
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件HighCharts绘制简单2D柱状图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制2D柱状图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
本篇文章是对Jquery中LigerUi的弹出编辑框的实现方法进行了分析介绍，需要的朋友可以参考下2013-07-07
今天小编就为大家分享一篇jQuery 实现批量提交表格多行数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论