web中可以用的滚动条

网上找了一下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);

        }

    },

    _getIntervalTick: function() {

        var totalWidth = this._inner.style.pixelWidth;

        var currentWidth = this._progrss.style.pixelWidth;

        var tick = this._round(this.AliveSeconds * 1000 * this.TickWidth / (totalWidth - currentWidth), 0);

        return tick;

    },

    _graduallyChanging: function() {

        var totalWidth = window.Progress._inner.style.pixelWidth;

        var currentWidth = window.Progress._progrss.style.pixelWidth;

        var percent = window.Progress._round(currentWidth * 100 / totalWidth, 0);

        if (currentWidth < totalWidth) {

            window.Progress._progrss.style.width = currentWidth + window.Progress.TickWidth + "px";

            window.Progress._innerDown.innerText = window.Progress.TipMessage + percent + "%";

            window.Progress._mark.style.display = "block";

        }

        else {

            if (window.Progress.CompleteEvent != null) {

                if (typeof window.Progress.CompleteEvent == 'function')

                    window.Progress.CompleteEvent.call();

                else

                    eval(window.Progress.CompleteEvent);

            }

        }

    },

    step: function(currentStep) {

        var currentWidth = window.Progress._progrss.style.pixelWidth;

        if (currentStep < window.Progress.TickCount) {

            window.Progress._progrss.style.width = currentWidth + window.Progress._tickWidth + "px";

            window.Progress._innerDown.innerText = window.Progress.TipMessage;

            window.Progress._mark.style.display = "block";

        }

        else {

            if (window.Progress.CompleteEvent != null) {

                if (typeof window.Progress.CompleteEvent == 'function')

                    window.Progress.CompleteEvent.call();

                else

                    eval(window.Progress.CompleteEvent);

            }

        }

    },

    _getTickWidth: function() {

        var totalWidth = this._inner.style.pixelWidth;

        var currentWidth = this._progrss.style.pixelWidth;

        var tickWidth = this._round((totalWidth - currentWidth) / this.TickCount, 0);

        return tickWidth;

    },

    _round: function(number, pos) {

        var n = new Number(number);

        var s = Math.pow(10, pos) * n;

        var t = Math.round(s);

        return t / Math.pow(10, pos);

    },

    show: function() {

        if (window.Progress != null) {

            window.Progress.hide();

        }

        this._createProgressBar();

    },

    hide: function() {

        if (this._outer != null) {

            if (this._outer.parentNode != null) {

                this._outer.parentNode.removeChild(this._outer);

            }

        }

        if (this._mark != null) {

            if (this._mark.parentNode != null) {

                this._mark.parentNode.removeChild(this._mark);

            }

        }

        this.dispose();

    },

    dispose: function() {

        clearInterval(this.Timer);

        this.Timer = null;

        this._outer = null;

        this._inner = null;

        window.Progress = null;

    }

};

html中测试代码如下：

先添加js引用，html代码如下

<input type="button" value="手动控制滚动" id="Button1" onclick="test();" />

<input type="button" value="自动以百分比滚动" id="Button2" onclick="test2();" />

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

       var pgb = new ProgressBar();

       var times = 0;

       var timer = null;

       function test() {

           pgb.StepManually = true;

           pgb.TickCount = 30;

           pgb.CompleteEvent = hide;

           pgb.show();

           timer = setInterval(stepping, 1000);

       }

       function stepping() {

           times++;

           pgb.TipMessage = "数据正在处理中...,当前" + times + "条/共" + pgb.TickCount + "条";

           pgb.step(times);

       }

       function hide() {

           pgb.hide();

           clearInterval(timer);

           timer = null;

           times = 0;

       }

       function hide2() {

           pgb.hide();

       }

       function test2() {

           pgb.StepManually = false;

           pgb.AliveSeconds = 8;

           pgb.ConpleteEvent = hide2();

           pgb.TipMessage = "数据正在处理中...";

           pgb.show();

       }

   </script>

• 封装成WebControl的进度条，这个是目前满足我的需求的一个进度条，可以实现在页面后台pageload中执行复杂耗时的代码的时候用来显示前台的loading窗口的。是不需要任何按钮触发的进度条，应该是专门用于我这种情况的。

代码如下：

/// <summary>

/// Summary description for LoadingPage.

/// </summary>

[DefaultProperty("Text"),

 ToolboxData("<{0}:NicsBar runat=server></{0}:NicsBar>")]

public class NicsBar : WebControl

{

    private string text = "HTML Loading Page";

    private string loadHTML1 =

        "<SCRIPT LANGUAGE='JavaScript'> if(document.getElementById) {var upLevel = true; }    else if(document.layers) {    var ns4 = true;    }else if(document.all) { var ie4 = true;}function showObject(obj) {    if (ns4) {    obj.visibility = 'show';}else if (ie4 || upLevel) {    obj.style.visibility = 'visible';}} function hideObject(obj) {    if (ns4) {    obj.visibility = 'hide';}    if (ie4 || upLevel) {obj.style.visibility = 'hidden';}    }</SCRIPT>";

    private string loadHTML2 =

        "<DIV ID='loadingScreen' STYLE='POSITION: absolute;Z-INDEX:5; LEFT: 5%; TOP: 5%;'>    <TABLE BGCOLOR='#000000' BORDER='5' BORDERCOLOR='#000000' CELLPADDING='10' CELLSPACING='0' borderColorDark='burlywood' borderColorLight='antiquewhite'>    <TR><TD WIDTH='100%' HEIGHT='100%' BGCOLOR='moccasin' ALIGN='middle' VALIGN='center'><p><FONT SIZE='3' COLOR='darkmagenta'><B>Page Loading. Please wait...</B></FONT></p><p><IMG SRC='{0}' BORDER='0'></p>    </TD></TR></TABLE></DIV>";

    private string loadHTML3 =

        "<script language='javascript'>    if(upLevel)    {    var load = document.getElementById('loadingScreen');    }    else if(ns4)    {        var load = document.loadingScreen;    }    else if(ie4)    {    var load = document.all.loadingScreen;    }    hideObject(load);</script>";

    private string sourceImage = "loading.gif";

    [Bindable(true),

     Category("Appearance"),

     DefaultValue("HTML Loading Page")]

    public string Text

    {

        get { return text; }

    }

    public string SrcImage

    {

        get { return sourceImage; }

        set { sourceImage = value; }

    }

    public NicsBar()

    {

        Init += new EventHandler(Init1);

        Load += new EventHandler(Load1);

    }

    protected void Init1(Object sender, System.EventArgs e)

    {

        WebControl tmp = sender as WebControl;

        loadHTML2 = string.Format(loadHTML2, sourceImage);

        tmp.Page.Response.Write(loadHTML1 + loadHTML2);

        tmp.Page.Response.Flush();

    }

    protected void Load1(Object sender, System.EventArgs e)

    {

        WebControl tmp = sender as WebControl;

        tmp.Page.Response.Write(loadHTML3);

    }

}

在页面中使用的话只需要将编译好的控件直接拖一个到页面中就可以了。默认情况下它用到的图片是同级目录下的loading.gif，不过这个图片的地址是可以自己指定的，它有一个SrcImage的属性。这个就不需要例子了吧。

• 这个是通过后来Response.Write出来的一个进度条，用于后台调用方法去更新前台的进度条去显示滚动状态。通过修改调用方式也可以用于在页面的pageload的过程中显示进度信息，比上一个好的是他可以显示真实的进度，只要你传的进度的值准确。上面的一种方式事实上是一个gif的loading状态。

前台页面代码中的按钮：

<asp:Button ID="btnShowProgress" runat="server" OnClick="btnShowProgress_Click" Text="Show Progress" />

后台代码：

public void CreateInterface()

   //Draw the progress page

   Response.Write("<table width=\"100%\" style=\"font-family:Arial; font-size:12px; text-align:center\"><tr><td><div id='mydiv' style=\"border:solid 1px black\" ><strong>Progressbar Demo</strong><br /><hr />" +

<table border=\"0\" style=\"font-family:Arial; font-size:12px;\" width=\"300px\"><tr><td width=\"100%\" style=\"text-align:center\"><div id=\"ProgressText\">0%</div></td></tr></table>" +

<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"300px\" height=\"13\"><tr><td id=\"indicator\" style=\"background-image:url('Progress" + ddlColour.SelectedItem.Text + ".jpg'); background-repeat:repeat-x\" width=\"0%\"></td><td width=\"100%\"></td></tr></table></div></td></tr></table>");

   //Insert the scripts for updating

   Response.Write("<script language=javascript>;");

   Response.Write("function ShowProgress(){}");

   Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; window.setInterval('ShowProgress()',1000);}");

   Response.Write("function HideWait(){mydiv.style.display = 'none';window.clearInterval();}");

   Response.Write("function UpdateIndicator(NewValue) {indicator.style.width = NewValue +\"%\"; ProgressText.innerText=NewValue + \"%\"}");

   Response.Write("StartShowWait();</script>");

   if (!IsPostBack)

   {

       //Hide if first load

       Response.Write("<script>HideWait();</script>");

   }

   Response.Flush();

ublic void UpdateProgressBar(double Text)

   Response.Write("<script>UpdateIndicator(\"" + Convert.ToInt32(Text).ToString() + "\");</script>");

   Response.Flush();

第一种方式，在pageload的时候隐藏滚动条，通过按钮去显示进度信息。

在Page_Load中调用CreateInterface();将进度条注册到页面中去，然后再按钮的点击事件中调用UpdateProgressBar这个方法。

//Long running code snippet here

for (int k = 0; k <= 100; k++)

{

    System.Threading.Thread.Sleep(100);

    UpdateProgressBar(k);

}

第二种方式就是直接在Page_Load的时候显示滚动条，将CreateInterface方法中的IsPostBack中的Response.Write("<script>HideWait();</script>");这句话注释掉，在Page_Load中直接写上面的调用UpdateProgressBar的代码，这样在页面加载的时候就会显示出进度条信息了，跟在第一种方式中点击按钮显示是一样的。

这个进度条显示出来的效果是用的尺寸1*10的jpg通过css的控制，显示出的滚动的效果。这一点我也比较喜欢，比较图片小了，占用也少了嘛。

• 通过在页面中嵌入一个iframe，在iframe中的页面中显示进度信息。老实说我觉得这种方式蛮不可思议的，不知道是谁想出来的。

<iframe height="100" frameborder="0" width="900" id="frm" runat="server" src="progressbar.aspx"></iframe>

progressbar.aspx页面的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>

    <title>Progressbar</title>

</head>

<body ms_positioning="GridLayout">

    <form id="Form1" method="post" runat="server">

    <table>

        <tr id="row1">

            <td id="cell1">

            </td>

        </tr>

    </table>

    </form>

</body>

</html>

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

    var i = 1;

    var timerID = 0;

    timerID = setTimeout("progress()", 1000); // 1 second interval. this can be made dynamic

    var scell = '';

    var sbase = '';

    sbase = document.getElementById("cell1").innerHTML;

    function progress() {

        var tend = "</tr></table>";

        var tstrt = "<table><tr>";

        scell = scell + "<td style='10;height:10' bgcolor=red>";

        document.getElementById("cell1").innerHTML = sbase + tstrt + scell + tend;

        if (i < 50) // total 50 cell will be created with red color.

        {

            i = i + 1;

            timerID = setTimeout("progress()", 1000); // recursively calling

        }

        else {

            if (timerID) {

                document.getElementById("cell1").innerHTML = document.getElementById("cell1").innerHTML + "</tr></table>";

                clearTimeout(timerID);

            }

        }

    }

</script>