开发过程中,经常会做一些查询,比如页面上方选择条件,下面显示查询结果.
如果查询结果过多,那页面的右边滚动条就开始工作,造成查看下面查询结果时,条件选择项就不可见了(被拖到了上方可视范围之外)
利用一句简单的DIV就可以防止这种状况发生.
Site.css:
- .divfix
- {
- height: 200px;
- width: 100%;
- overflow:scroll;
- position: absolute;
- }
- TH { Z-INDEX: 49 ; TOP: expression(this.offsetParent.scrollTop-1) ; POSITION: relative;}
Html:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Untitled Page</title>
- <link id="Link1" type="text/css" href="site.css" runat="server" rel="stylesheet" />
- <script type="text/javascript">
- function show()
- {
- document.getElementById("mydiv").style.display="block";
- }
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <asp:ScriptManager ID="ScriptManager1" runat="server" />
- <asp:Button ID="Button1" runat="server" OnClientClick="show()" OnClick="Button1_Click" Text="Button" />
- <div>
- <asp:UpdatePanel ID="UpdatePanel1" runat="server">
- <ContentTemplate>
- <div id="mydiv" runat="server" style="display:none; left:50%">
- <img src="waiting.gif" />
- </div>
- <div class="divfix">
- <asp:GridView ID="gvshow" runat="server" AutoGenerateColumns="False"
- Width="881px" Height="270px" CellPadding="4" ForeColor="#333333">
- <Columns>
- <asp:TemplateField>
- <ItemTemplate>
- <asp:Button ID="btnedit" runat="server" Text="Modify" CommandName="Modify" />
- </ItemTemplate>
- </asp:TemplateField>
- <asp:TemplateField>
- <ItemTemplate>
- <asp:Button ID="btnDel" runat="server" Text="Delete" CommandName="Del" />
- </ItemTemplate>
- </asp:TemplateField>
- <asp:BoundField DataField="id" HeaderText="ID" />
- <asp:BoundField DataField="name" HeaderText="Name" />
- </Columns>
- </asp:GridView>
- </div>
- </ContentTemplate>
- <Triggers>
- <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
- </Triggers>
- </asp:UpdatePanel>
- </div>
- </form>
- </body>
注意:
1.其中div mydiv用来异步作业时,显示动态信息(如一个动态图片等)
2.mydiv初始不显示,点击button显示。事件完成后,由于回发机制,mydiv回到初始状态:不可见