学步园

网上找了一下web上面能用的滚动条的显示，找到了几种，准备记录一下，就当做个备忘录。我主要是收集整理，代码中标明出处的我都会贴出来的。

基本上都是通过脚本实现的，就是实现方式和应用场景各不相同。

• 最简单的一种，通过一个隐藏的DIV，点击按钮时通过脚本往DIV中插入一个loading的gif和一些消息来让用户等待。等待的同时将除了自己的其他可以操作的html元素全部disable掉。

先在页面中放置一个按钮一个隐藏的DIV

<asp:Button ID="btnLoad" runat="server" OnClick="btnLoad_Click" Text="Get Songs List"

    OnClientClick="ShowProcessMessage('ProcessingWindow')" />

<br />

<br />

<div id="ProcessingWindow" visible="false" style="visibility: hidden;">

主体脚本方法如下：

<script language="javascript" type="text/javascript">

     //Sets the visibility of the Div to 'visible'

     // Displays the  'In-Process' message  and the Image through the innerHTML 

     ShowProcessMessage = function(PanelName) {

         document.getElementById(PanelName).style.visibility = "visible";

         document.getElementById(PanelName).innerHTML = "<h2> <img src='Image/InProcess.gif'> Please Wait ...</h2> ";

         DisableAllControls('btnLoad');

         return true;

     }

     DisableAllControls = function(CtrlName) {

         var elm;

         //Loop for all the controls of the page.

         for (i = 0; i <= document.forms[0].elements.length - 1; i++) {

             elm = document.forms[0].elements[i];

             /* 1.Check for the Controls with type 'hidden' - These are the ASP.Net hidden controls for Viewstate and EventHandlers.

             It is very important that these are always enabled, for ASP.NET page to be working.

             2. Also Check for the control which raised the event (Button) - It should be active. */

             if ((elm.name == CtrlName) || (elm.type == 'hidden')) {

                 elm.disabled = false;

             }

             else {

                 elm.disabled = true; //Disables all the other controls

             }

         }

     }

 </script>

• 完全由javascript创建的滚动条，可以通过自己写脚本控制滚动条的进度和显示信息，有一个遮罩的效果。这个是我比较喜欢的一个进度条。

脚本代码如下：

/**---------------------------------------

*refrence:MicrosoftAjax.js,jQuery.js

*function: 滚动条

*author:hujinping 

*date:2009-12-3

-------------------------------------------*/

function ProgressBar(aliveSeconds,width,height,tickWidth,tickCount) {

    this.Timer = null;

    this.Width = typeof (width) == 'undefined' ? 360 : width;

    this.Height = typeof (height) == 'undefined' ? 60 : height;

    this.AliveSeconds = typeof (aliveSeconds) == 'undefined' ? 10 : aliveSeconds;

    this.TickWidth = typeof (tickWidth) == 'undefined' ? 2 : tickWidth;

    this.TickCount = typeof (tickCount) == 'undefined' ? 100 : tickCount;

    this.StepManually = false;//是否手动设置前进

    this.CompleteEvent = null;

    this.TipMessage = "数据正在加载中......";

    this._outer = null;

    this._inner=null;

    this._progrss = null;

    this._innerDown = null;

    this._mark = null;

    this._tickWidth = 0;

}

ProgressBar.prototype = {

    initialize: function() {

    },

    _createProgressBar: function() {

        var outer = document.createElement("DIV");

        var inner = document.createElement("DIV");

        var innerDown = document.createElement("DIV");

        var prs = document.createElement("DIV");

        var mask = document.createElement("DIV");

        prs.style.backgroundColor = "#467ef0";

        prs.style.width = "10px";

        prs.style.padding = "0px 0px 0px 0px";

        prs.style.margin = "0px 0px 0px 0px";

        outer.style.width = this.Width + "px";

        outer.style.height = this.Height + "px";

        outer.style.backgroundColor = "#E7FDFE";

        outer.style.border = "solid #022B2D 1px";

        outer.style.position = "absolute";

        outer.style.zIndex = "1000";

        outer.style.padding = "0px 0px 0px 0px";

        outer.style.margin = "0px 0px 0px 0px";

        outer.style.left = (document.documentElement.offsetWidth - this.Width) / 2 + "px";

        outer.style.top = (document.documentElement.offsetHeight - this.Height) / 2 + "px";

        outer.style.filter = "Alpha(opacity=95)";

        inner.style.width = (this.Width - 20) + "px";

        inner.style.height = "23px";

        inner.style.padding = "0px 0px 0px 0px";

        inner.style.margin = "10px 10px 0px 10px";

        inner.style.backgroundColor = "#ffffff";

        inner.style.border = "solid #022B2D 1px";

        innerDown.style.width = inner.style.width;

        innerDown.style.height = "23px";

        innerDown.style.padding = "0px 0px 0px 0px";

        innerDown.style.margin = "3px auto";

        innerDown.style.textAlign = "center";

        innerDown.style.fontSize = "14px";

        innerDown.style.fontWeight = "bold";

        innerDown.style.color = "#710425";

        prs.style.height = inner.style.height;

        mask.style.width = document.documentElement.offsetWidth + "px";

        mask.style.height = document.documentElement.offsetHeight + "px";

        mask.style.backgroundColor = "#000000";

        mask.style.position = "absolute";

        mask.style.zIndex = "500";

        mask.style.padding = "0px 0px 0px 0px";

        mask.style.margin = "0px 0px 0px 0px";

        mask.style.left = "0px";

        mask.style.top = "0px";

        mask.style.filter = "Alpha(opacity=65)";

        mask.style.display = "none";

        inner.appendChild(prs);

        outer.appendChild(inner);

        outer.appendChild(innerDown);

        document.body.appendChild(outer);

        document.body.appendChild(mask);

        this._outer = outer;

        this._inner = inner;

        this._progrss = prs;

        this._innerDown = innerDown;

        this._mark = mask;

        window.Progress = this;

        if (this.StepManually) {

            this._tickWidth = this._getTickWidth();

        }

        else {

            var tick = this._getIntervalTick();

            this.Timer = setInterval(this._graduallyChanging, tick);

        }