天天看點

送出表單的Js進度條效果

       有時候,在送出或點選一個連結後,由于種種原因,可能會在原來的頁面上停留一段時間,如果不知道的朋友還以為是打不開。

現在可以用下面的方法,來給這些朋友一個提示,告訴他們系統正在處理資料~~~~~

在背景處理資料時,前台頁面同時計數顯示Proess Bar

使用了layer來顯示!

在送出Button或<A>或<span> 加擴充屬性

以下是引用片段:

IsShowProcessBar="True"

詳細代碼如下:

ShowBar.js:

AddProcessbar();

var bwidth=0;

var swidth = document.all.waiting.clientWidth;

function CheckIsProcessBar(obj)

{

if (obj.IsShowProcessBar=="True")

{

return false;

}

else

{

return true;

}

}

function CheckClick(e)

{

if (e == 1)

{

if (bwidth<swidth*0.98){

bwidth += (swidth - bwidth) * 0.025;

if (document.all)document.sbar.width = bwidth;

else document.rating.clip.width = bwidth;

setTimeout(’CheckClick(1);’,150);

}

}

else

{

if(document.all)

{

if(document.all.waiting.style.visibility == ’visible’)

{document.all.waiting.style.visibility = ’hidden’;

bwidth = 1;}

whichIt = event.srcElement;

while (CheckIsProcessBar(whichIt))

{

whichIt = whichIt.parentElement;

if (whichIt == null)return true;

}

document.all.waiting.style.pixelTop = (document.body.offsetHeight - document.all.waiting.clientHeight) / 2 + document.body.scrollTop;

document.all.waiting.style.pixelLeft = (document.body.offsetWidth - document.all.waiting.clientWidth) / 2 + document.body.scrollLeft;

document.all.waiting.style.visibility = ’visible’;

if(!bwidth)CheckClick(1);

bwidth = 1;

}

else

{

if(document.waiting.visibility == ’show’)

{document.waiting.visibility = ’hide’;

document.rating.visibility = ’hide’;

bwidth = 1;}

if(e.target.href.toString() != ’’)

{

document.waiting.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset;

document.waiting.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;

document.waiting.visibility = ’show’;

document.rating.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset+document.waiting.clip.height-10;

document.rating.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;

document.rating.visibility = ’show’;

if(!bwidth)CheckClick(1);

bwidth = 1;

}

}

return true;

}

}

function AddProcessbar()

{

var Str=""

Str+= "<div id=waiting style=position:absolute;top:50px;left:100px;z-index:1;visibility:hidden >";

Str+= "<layer name=waiting visibility=visible zIndex=2 >"

Str+= "<table

Str+= " <tr>"

Str+= " <td bgcolor=#E0E0E0 height=30px width=300px align=center>"

Str+= " <font color=black>系統正在處理中...</font>"

Str+= " </td>"

Str+= " </tr>"

Str+= " <tr>"

Str+= " <td bgcolor=#E0E0E0>"

Str+= " <img width=1 height=10 name=sbar style="background-color:#6699cc" mce_style="background-color:#6699cc">"

Str+= " </td>"

Str+= " </tr>"

Str+= "</table> "

Str+= "</layer>"

Str+= "</div>"

document.write(Str)

if(document.all)document.onclick = CheckClick;

}

測試檔案ShowBar.HTML

<HTML>

<HEAD>

<mce:script language="javascript" src="ShowBar.js" mce_src="ShowBar.js"></mce:script>

</HEAD>

<BODY>

<A href="error.asp" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" mce_href="error.asp" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" IsShowProcessBar="True">A Href</a>

<BR>

<BR>

<span οnclick="location.href=’error.asp’" style="cursor:hand" mce_style="cursor:hand" IsShowProcessBar="True"><font color=blue>Span</font></span>

<BR>

<form action="error.asp">

<input type=Submit value="Submit">

<input type=button value="normal button" IsShowProcessBar="True">

</form>

<P IsShowProcessBar="True">AAAAAAAAAAAAA</P>

</BODY>

</HTML>

繼續閱讀