文档章节

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

党程V
 党程V
发布于 2013/06/20 22:11
字数 285
阅读 880
收藏 20

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

进度显示插件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代码即可

代码查看和下载

© 著作权归作者所有

党程V
粉丝 5
博文 20
码字总数 9126
作品 0
西安
高级程序员
私信 提问
加载中

评论(1)

快门001
快门001
这个不错,方便
10 新鲜的 jQuery 插件(2012年1月)

1. jQuery UI Bootstrap 一个基于 Twitter Bootstrap 的 jQuery UI 主题 2. jqGrid 这是非常棒的jQuery 表格插件,在线演示:here. 3. Cloud Zoom Cloud Zoom 是一个小型的图像放大镜插件,放...

红薯
2012/02/01
4.8K
6
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0
12 月份 10 个新鲜的 jQuery 插件和教程

1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行...

红薯
2011/12/30
3.1K
6
为开发者们准备的 10 款超棒的 jQuery 视频插件

跟之前介绍的 2013 年 12 月最好的 35+个 jQuery 插件 不同,这篇文章是给开发者们准备的关于视频播放方面的 10 款最好的 jQuery 视频插件。这 10 款插件各有各的特色,能很方便的在网页上嵌...

oschina
2014/01/17
20.7K
13
15 款优化表单的 jQuery 插件

网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理。这些表单在我们浏览的网页中随处可见,也容易被我们忽略。 比如,“联系我们”页面会提供一个表单给...

oschina
2014/05/26
10.8K
15

没有更多内容

加载失败,请刷新页面

加载更多

数据科学热潮下的冷思考:什么才是最需要的技能?

全文共3087字,预计学习时长6分钟 图片来源:pexels.com/@freestocks 数据科学已经进入了稳定生产的成熟期,数据科学家所需的技能也在与时俱进。不仅是追求更高效的机器学习模型,在当下,推...

读芯术
14分钟前
0
0
48.Nginx访问日志 日志切割 静态文件不记录

12.10 Nginx访问日志 12.11 Nginx日志切割 12.12 静态文件不记录日志和过期时间 12.10 Nginx访问日志: ~1.日志格式 vim /usr/local/nginx/conf/nginx.conf //搜索log_format log_format com...

oschina130111
18分钟前
1
0
好程序员分享Css详解bem书写规范

  好程序员分享Css详解bem书写规范,bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由B...

好程序员IT
23分钟前
0
0
基于cm+cdh搭建大数据集群

第一部分:搭建基本环境 1、网络配置 vim /etc/sysconfig/network-scripts/ifcfg-ens32 service network restart vim /etc/hosts 192.168.15.121 node1 192.168.15.122 node2 192.168.15.123......

一个点一个点
31分钟前
0
0
[学]ngin反向代理搭建与配置

Nginx安装地址:https://www.cnblogs.com/wyd168/p/6636529.html (linux) 必须安装的4个包: nginx-1.1.10.tar.gz openssl-1.0.1t.tar.gz pcre-8.39.tar.gz zlib-1.2.11.tar.gz ng配置主要......

覃光林
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部