花生米AJAX-UI系列之:基于JQUERY的Progress进度条控件0.1版
特点:
默认样式类似于EXT
可定义进度条的最大,最小值,进度条的宽度和高度;
可定义进度条的背景样式,边框颜色;
可分别绑定当进度改变时,当进度完全结束后,触发的函数事件.
可以使用长轮询AJAX方式,从一个远程服务器端定时获取值/增量
经测试,兼容IE6--IE8,Firefox,chrome浏览器,在非IE浏览器下更加美观:)。
-------------------------------------------------------
/*进度条定义-GooProgress类*/
//Div :要被绑定的已被JQUERY封装的DOM对象,必须要有其ID
//property :JSON变量,Progress的详细参数设置
function GooProgress(Div,property)
类内成员变量:
this.$div: 被绑定构造为SLIDER控件的JQUERY对象,原型一般为一个DIV
this.$bar: 进度条中的填充部分,也为一个JQUERY对象
this.$maxValue: 进度条上的最终最大值
this.$minValue: 进度条上的最初最小值
this.$width: 进度条的宽度
this.$innerUnit:在进度条内部显示的信息,可作为进度值的单位使用,,默认为不显示任何信息,选择默认时可不填;可以在构造函数后直接重设类对象的该属性
this.$initText: 进度还未开始前,进度内部的最初显示信息,默认为不显示任何信息,选择默认时可不填;可以在构造函数后直接重设类对象的该属性
this.$finalText:进度结束后,进度内部的最终显示信息,默认为不显示任何信息,选择默认时可不填;可以在构造函数后直接重设类对象的该属性
this.$step: 每个像素代表的步进值
this.$value: 当前进度条的值,初始为this.$minValue
this.$timing: 定时器:用来作执行长轮询方式从远程服务器端定时获取值
-----------------------------------------------------------------------------------
方法:
//绑定进度变化过程中触发的事件 ,参数是一个自定义function
this.bindChangefunction(fn)
//绑定进度完成后触发的事件 ,参数是一个自定义function
this.bindFinish(fn)
//设置当前的进度值
this.setValue(val)
//在进度条中显示进度完成后的提示信息
this.showFinalText()
//重新把进度条变成初始状态
this.resetReady()
//重设进度条的宽度,最大,最小值,这些参数若有此时不想重设置的,可传入null以占位
this.resetParam=function(wide,minValue,maxValue)
//隐藏/显示进度条,参数show为CSS中display的"block"或者"none"
this.display(show)
//从远程服务器端获取最新进度(add为BOOL型变量:true时,远程获取值将被当作为增量,而不是实际进度值)
//如果Interval不为空,则执行长轮询方式定时获取值,如果为空则只立即执行一次
this.setValueAjax(Url,Para,Type,Add,Interval)
//停止定时器的工作
this.stopInterval()
-------------------------------------------------------------------
最重要的传参:property,构造函数中要用到的:
var property={
width:300,
height:18,
bd_col:"#6593CF",//最外框的颜色,选择默认时可不填
background:"#F0F4F9",//空白部分的背景样式,选择默认时可不填
bar_background:"url(codebase/img/progress_bar.gif) repeat-x 0px 0px",//填充部分的背景样式,选择默认时可不填
bar_bd_col:"#7FA9E4",//填充部分右边框的颜色,选择默认时可不填
innerUnit:"&d of 300 completed",//在进度条内部显示的信息,可作为进度值的单位使用,,默认为不显示任何信息,选择默认时可不填;
//如果要显示当前的进度的VALUE值,需保证innerUnit中要有一个"&d"占位替换符;可以在构造函数后直接重设类对象的该属性
initText:"initializing……",//进度还未开始前,进度内部的最初显示信息,默认为不显示任何信息,选择默认时可不填
finalText:"all finished",//进度结束后,进度内部的最终显示信息,默认为不显示任何信息,选择默认时可不填
minValue:0,//进度的初使值,不填时默认为0
maxValue:300//进度的最终值,不填时默认为100
};
jquery进度条啊 无语了
5星 · 超过95%的资源 需积分: 9 162 浏览量
2010-10-24
08:39:42
上传
评论
收藏 24KB RAR 举报
当耐特
- 粉丝: 1
- 资源: 1
最新资源
- push_version
- 软件自制图像批量压缩工具
- 基于深度学习的抗梯度噪声的缺陷检测器python源码+文档说明+模型的预训练
- 基于python+pytorch+mysql实现停车场车牌识别管理系统源码+文档说明
- 基于QT+MySQl+OpenCV车牌识别搭建停车场管理系统C++源码+文档说明+界面展示
- 基于深度学习的停车场收费系统-车牌识别模块python源码+文档说明+博客教学
- 空白.pages
- 基于Java+Springboot+vue的智能停车场管理系统(源代码+数据库+9000字论文) 本项目前后端不分离+部署教程
- 基于SSM写的停车场管理系统,加入了车牌识别和数据分析+源码+文档说明
- stream-response.txt
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈