首页 > web前端 > js教程 > 基于jQuery实现网页进度显示插件_jquery

基于jQuery实现网页进度显示插件_jquery

WBOY
发布: 2016-05-16 16:11:15
原创
1238 人浏览过

相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作,

以下是插件的测试截图 ,提供了两个皮肤

进度显示插件js

进度展示插件皮肤1

进度展示插件皮肤2

使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示

1、简单的调用

//所有步骤的数据
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…这里可以填充点击步骤的后加载相对应数据的代码
}

2、自定义皮肤修改

插件提供了两套皮肤科共选择如果不能满足您的要求,则自己编写CSS代码即可

html代码

复制代码 代码如下:

无标题文档








当前步骤:第

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板