首页 新闻 赞助 找找看

下拉框体选择后出现遮盖层将页面遮盖住,等程序运行完成后遮盖层消失

0
悬赏园豆:200 [已解决问题] 解决于 2009-12-17 13:00

页面上有个下拉框,当选择项改变的时候会去后台查询一堆数据,大概需要4-5秒左右,现在需要实现的是当选择项改变时,页面上出现一个遮盖层,当数据查询完并绑定页面后,遮盖层消失。请大家帮忙解决下,由于比较急,所以有Demo代码最好 谢谢

FoxVirtuous的主页 FoxVirtuous | 初学一级 | 园豆:0
提问于:2009-12-16 16:58
< >
分享
最佳答案
0

用什么语言处理的,要是asp.net的话,搞个updatepanel把下拉列表抱起来,定义一个div放到updateprogress里面就ok了,updateprogress会自动控制的

收获园豆:100
LifeLight | 菜鸟二级 |园豆:391 | 2009-12-16 18:54
其他回答(2)
0

javascript

 

html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script language="javascript" type="text/javascript">
    function ShowDIV()
    {
     var div=document.getElementById("div_show");
    
     div.innerHTML="<div>Loading </div>";
    }
    function  ShowSelectProcess ()
    {
     var div=document.getElementById("div_show");
     var top=document.getElementById("div_show").clientTop;
     var left=document.getElementById("div_show").clientLeft;
     var width=document.getElementById("GridView1").offsetWidth;
     var height=document.getElementById("GridView1").offsetHeight;
  
     div.innerHTML="<div style='width:"+width+"px;height:"+height+"px;text-align:center;color:red;border:1px solid red;vertical-align:middle;background-color:#f1f1f1;opacity:0.15;'>Loading </div>";
    }

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                onchange="ShowSelectProcess()">
                <asp:ListItem Value=""></asp:ListItem>
                <asp:ListItem Value="1">1</asp:ListItem>
                <asp:ListItem Value="2">2</asp:ListItem>
                <asp:ListItem Value="3">3</asp:ListItem>
            </asp:DropDownList></div>
        <div id="div_show" style="vertical-align:middle; ">
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </div>
    </form>
</body>
</html>

 

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class SelectDIV : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string mm = "页面上有个下拉框,当选择项改变的时候会去后台查询一堆数据,大概需要4-5秒左右";
        char[] kk = mm.ToCharArray();
        GridView1.DataSource = kk;
        GridView1.DataBind();

    }
}

收获园豆:50
woody.wu | 园豆:3621 (老鸟四级) | 2009-12-16 19:39
0

ScriptManager  好和UpdatePanel,我项目中在UpdatePanel中放的repeater,更新的时间在1S到6S不等,刚好跟你的需求一样,关点的问题在于你那个表示进度的div的大小要刚好覆盖你的下拉框

<div id="detailDiv" class="center_div2">
            <span class="center_div_tips2">
                <img src="../../Utility/Skin/img/loading.gif" alt="" />数据更新中...</span>
        </div>
        <asp:ScriptManager ID="stmpreorder" EnablePartialRendering="true" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="updpreorder" runat="server" UpdateMode="Conditional">

            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                    onchange="ShowSelectProcess()">
                    <asp:ListItem Value=""></asp:ListItem>
                    <asp:ListItem Value="1">1</asp:ListItem>
                    <asp:ListItem Value="2">2</asp:ListItem>
                    <asp:ListItem Value="3">3</asp:ListItem>
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>

    <script language="javascript">
       <!--

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler)
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        function beginRequestHandler(sender, args) {
            document.getElementById('detailDiv').style.display = 'block';
        }
        function EndRequestHandler(sender, args) {
            document.getElementById('detailDiv').style.display = 'none';
        }

          -->
    </script>

收获园豆:50
persialee | 园豆:3217 (老鸟四级) | 2009-12-16 22:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册