您的位置:首页 > Web前端 > JQuery

js网页进度显示 插件step-jquery-dc(原创)

2013-06-20 22:11 579 查看
相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作,
以下是插件的测试截图 ,提供了两个皮肤













使用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代码即可

代码查看和下载
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: