|
Written by LXR
|
|
Monday, 17 September 2007 18:50 |
这是一个是基于jquery的进度条
基于jquery的进度条
用法
1.将以下js文件加入到head部分
<SCRIPT src="http://www.hotajax.org/download/jquery/progress bar/Progress Bar/jquery.js"
type=text/javascript></SCRIPT>
<SCRIPT
src="http://www.hotajax.org/download/jquery/progress bar/Progress Bar/jqueryprogressbar.js"
type=text/javascript></SCRIPT>
2.创建css文件，你也可以将以下代码加入到head部分
<STYLE>#progressbar {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid; WIDTH: 200px;
COLOR: black; BORDER-BOTTOM: black 1px solid; POSITION: relative; HEIGHT: 20px
}
#progressbar DIV.progress {
OVERFLOW: hidden; WIDTH: 0px; POSITION: absolute; HEIGHT: 100%; BACKGROUND-COLOR: #369
}
#progressbar DIV.progress .text {
COLOR: white; POSITION: absolute; TEXT-ALIGN: center
}
#progressbar DIV.text {
WIDTH: 100%; POSITION: absolute; HEIGHT: 100%; TEXT-ALIGN: center
}
</STYLE>
3.为progress bar加上定时器
<SCRIPT type=text/javascript>
var pct=0;
var handle=0;
function update(){
$("#progressbar").reportprogress(++pct);
if(pct==100){
clearInterval(handle);
$("#run").val("start");
pct=0;
}
}
jQuery(function($){
$("#run").click(
function(){
if(this.value=="start"){
handle=setInterval("update()",100);
this.value="stop";
}else{
clearInterval(handle);
this.value="start";
}
}
);
$("#reset").click(function(){
pct=0;
$("#progressbar").reportprogress(0);
});
});
</SCRIPT>
也可将此代码放到head部分。
4.建立进度框，如本例所示
<DIV id=progressbar></DIV><INPUT id=run type=button value=start> <INPUT id=reset type=button value=reset>
预览
下载{runhtmcode}
{/runhtmcode}
Progress Bar Plugin
Newer news items:
Older news items:
|
Show/Hide comments
Show/Hide comment form
