前一段时间,要实现一个进度条的需求,但我发现项目里面用的是JQuery 1.7.3 ,而且这个页面里面已经用到了tab的JQuery UI,而且jquery引用的UI 是分好多个部分的(需要用到哪个,用哪个),但是就是没有JQuery UI-progressbar,而且我从网上找了好久,还是没有找到1,7,3,的JQuery UI-progressbar。于是我干脆从官网上下了个最新的jqueryui 完整版,替换现在页面里面的jquery ui。
jquery ui不同版本一起使用,可真是冲突不断啊,但是,我最终还是搞定了,把ui 1.7.3和1.10 融合在了一起, 也顺利实现了进度条需求,初步测试也没有什么问题。但是,昨天突然有用户反映自从页面加入进度条功能后,就有 一个功能不好用了,点击链接没有反应,我一猜就是jquery ui引起冲突了。没办法自己惹的祸,自己负责呗,于是 我想着还是从网上找1.7.3的JQuery UI-progressbar吧,起初在百度里面搜了半天,也没有搜出来,后来还是利用google在jquery英文论坛上面搜了出来,于是想着赶紧把之前的1.10的 ui替换回原来的1.7.3,但是发现progressbar的语法 都变了,直接报错,调了好久,还是没有调出来。
后来我干脆就想着自己实现一个进度条功能得了,省的再引起冲突,我想着就是利用js动态控制div和css。于是花了1个小时 终于搞定,贴出来以备后用。
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>
$(function(){
var init_val=70; //初始数值,进度条和滑动块的值。
//alert(init_val);
var progressbar=$("#progressbar"); //设置进度条的初始值。
progressbar.css("color","red");
//alert(progressbar.css("color"));
});
</script>
0<br/>1<br/>2<br/>3<br/>
<div id="progressbar" style="width: 500px; height: 50px; color: red;background-color:blue">
<div style="position:absolute;width:500px;height:50px;text-align:center;line-height:50px">complete 70%</div>
<div id="progressbarValue" style="width: 10%; height: 50px; background-color: #f6a828; color:red;border-width:1px;border-top-color:red;border-style:solid"></div>
</div>
<div id="slider"></div>
<br/>0<br/>1<br/>2<br/>3<br/>
效果如下:
然后在利用js动态更新即可。
核心完整版如下:
function exportExcel()
{
lockscree();
var progressbar = $("#progressbar"), progressbarValue = $("#progressbarValue"),waitinglabel = $("#waitinglabel") ,progressbarLabel=$("#progressbarLabel");
waitinglabel.show();
var maxVal=0;
var requestfile="";
function initProgressBar()
{
setProgressBarValue(0);
}
function getProgressBarVlue()
{
var strValue=progressbarValue.html();
strValue=parseInt(strValue);
return strValue;
}
function setProgressBarValue(obj)
{
progressbarValue.html(obj+"%");
progressbarLabel.css("width",obj+"%");
}
function prograssBarCompleted()
{
progressbarValue.html("<a href='"+path+requestfile+"' οnclick='ulockscreen()' ><b>导出完毕,点击进行下载!</b></a>");
waitinglabel.hide();
}
function growUp2Val()
{
var currentVal=getProgressBarVlue();
if(currentVal <maxVal)
{
setProgressBarValue(currentVal + 1);
setTimeout(growUp2Val, 100);
}else{
if(currentVal < 100)
{
setTimeout(getProcess, 1000);
}else if(currentVal >= 100)
{
prograssBarCompleted();
}
}
}
//如果返回值小于0,则表示失败
function successGet(obj2)
{
obj2=obj2.substring(1,obj2.length-1);
var strValue = obj2.split(",")[0];
requestfile = obj2.split(",")[1];
strValue = parseInt(strValue);
if(strValue >=0)
{
maxVal=strValue;
growUp2Val();
}else{
failGet();
}
}
function failGet()
{
alert("导出失败,请刷新页面重试!");
ulockscreen();
}
function getProcess()
{
$.ajax({
type: "post",
url: path+"//exportAllNode.action",
cache : false,
success: successGet,
error: failGet
});
}
initProgressBar();
getProcess();
}