首页 > 代码库 > 滚动条的显示
滚动条的显示
1. 使用Panel设置滚动条
<asp:Panel ID="YourPanel" runat="server" Height="100" ScrollBars="Vertical"> <asp:TextBox ID="YourTextBox" runat="server"></asp:TextBox><br /><br /> <asp:TextBox ID="YourTextArea" runat="server" TextMode="MultiLine"></asp:TextBox><br /><br /> <asp:Label ID="YourLabel" runat="server" Text="Example Label"></asp:Label><br /><br /></asp:Panel>
2. 使用JQuery显示滚动条
HTML Markup
<div> Country:<asp:DropDownList ID="ddlCountries" runat="server"> <asp:ListItem Text="All" Value=http://www.mamicode.com/"" /> <asp:ListItem Text="USA" Value=http://www.mamicode.com/"USA" /> <asp:ListItem Text="Brazil" Value=http://www.mamicode.com/"Brazil" /> <asp:ListItem Text="France" Value=http://www.mamicode.com/"France" /> </asp:DropDownList> <asp:Button ID="btnSubmit" runat="server" Text="Load Coties in Customers" OnClick="btnSubmit_Click" /> <hr /> <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false"> <Columns> <asp:BoundField DataField="Id" HeaderText="Id" /> <asp:BoundField DataField="Name" HeaderText="Name" /> <asp:BoundField DataField="City" HeaderText="City" /> </Columns> </asp:GridView> <%-- div用来显示加载图片--%> <div class="loading" style="align-content: center"> Loading. Please wait.<br /> <br /> <img src=http://www.mamicode.com/"../Images/Loder3.jpg" alt="" /> </div> </div>
The CSS style
<style type="text/css"> .modal { position: fixed; top: 0; left: 0; background-color: black; z-index: 99; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; min-height: 100%; width: 100%; } .loading { font-family: Arial; font-size: 10pt; border: 5px solid #67CFF5; width: 200px; height: 100px; display: none; position: fixed; background-color: White; z-index: 999; } </style>
JavaScript design
<script src=http://www.mamicode.com/"../Scripts/jquery-1.10.2.js"></script> <script type="text/javascript" src=http://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> function ShowProgress() { setTimeout(function () { var modal = $(‘<div />‘); modal.addClass("modal"); $(‘body‘).append(modal); var loading = $(".loading"); loading.show(); var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0); var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0); loading.css({ top: top, left: left }); }, 200); } $(‘form‘).live("", function () { ShowProgress(); }) </script>
The code behind page
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 if (!IsPostBack) 4 { 5 string script = "$(document).ready(function () { $(‘[id*=btnSubmit]‘).click(); });"; 6 ClientScript.RegisterStartupScript(this.GetType(), "load", script, true); 7 } 8 } 9 10 protected void btnSubmit_Click(object sender, EventArgs e)11 {12 System.Threading.Thread.Sleep(5000);13 LoadCustomers();14 }15 private void LoadCustomers()16 {17 string strConnString = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;18 string sql = "select * from Customers where City=@Country or @Country = ‘‘";19 SqlCommand cmd = new SqlCommand(sql);20 cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);21 22 using (SqlConnection con = new SqlConnection(strConnString))23 {24 con.Open();25 using (SqlDataAdapter sda = new SqlDataAdapter())26 {27 cmd.Connection = con;28 sda.SelectCommand = cmd;29 using (DataTable ds = new DataTable())30 {31 sda.Fill(ds);32 int m = ds.Rows.Count;33 int n = m;34 gvCustomers.DataSource = ds;35 gvCustomers.DataBind();36 }37 }38 }39 40 }
资料来源：
http://aspsnippets.com/Articles/Show-progress-bar-on-Button-Click-in-ASPNet.aspx
3. 使用UpdatePanel 和Timer控件显示加载页面的时候的滚动条
The HTML markup
<div> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager> <asp:Timer ID="Timer1" runat="server" Enabled="false" Interval="2000" OnTick="Timer1_Tick"></asp:Timer> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> <ContentTemplate> <%-- 使用两个div显示一个滚动条--%> <div style="background-color: Black; height: 10px; width: 300px"> <div id="bar" runat="server" style="height: 10px; width: 0px; background-color: Fuchsia"></div> </div> <asp:Label ID="Label1" runat="server" Text="0 %"></asp:Label> <br /> <br /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/DifferentProgressBar/ProgressBar_UPdatePanelTimer.aspx" Visible="False">Reload Page</asp:HyperLink><br /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </div>
The code behind page
protected void Timer1_Tick(object sender, EventArgs e) { int i = Convert.ToInt32(Session["status"]); if (i == 100) { Timer1.Enabled = false; HyperLink1.Visible = true; } Label1.Text = i.ToString() + " %"; HtmlGenericControl div = this.FindControl("bar") as HtmlGenericControl; i = i * 3; div.Style["width"] = i.ToString() + "px"; } protected void Button1_Click(object sender, EventArgs e) { Session.Add("status", 0); Thread objThread = new Thread(new System.Threading.ThreadStart(DoTheWork)); objThread.IsBackground = true; objThread.Start(); Session["Thread"] = objThread; Button1.Enabled = false; Timer1.Enabled = true; } protected void DoTheWork() { for(int i=0;i<100;i++) { Thread.Sleep(500); Session["status"] = i; } Thread objThread = Session["Thread"] as Thread; objThread.Abort(); }
资料来源：
http://i.cnblogs.com/?postid=4191979&update=1
滚动条的显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。