Hot!Ajax

这是一个是基于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

< Prev		Next >