none
关于设置根据客户端分辨率设置控件宽度的问题,请进! RRS feed

  • 问题

  • 我在网页上做了一个Gridview控件,由于列太多,于是放到了一个Panel控件中,问题是我必需给Panel设置一个固定的宽度它才能左右拖动,如果是100%,它就超出了屏幕的宽度。

    于是我想通过js脚本screen.width设置宽度,请问这怎么传值给PANEL的WIDTH?

    或有没有其它方法能实现我的要求,多谢!

    2010年6月23日 8:09

答案

  • 你通过隐藏域实现,我在你的上一个帖子已经回复,你看看

    你可以在客户端屏幕宽度的值赋给一个隐藏域,这样你在用UPDATEPANEL局部刷新的时候就不会改变PANEL的宽度

    具体代码实现

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title></title>
      <script type="text/javascript">
        function aa() {
          var o = document.getElementById("Panel1");
          var w = o.style.width;
          o.style.width = screen.width; //设置宽度与屏幕宽度一致
          document.getElementById("HiddenField1").value = screen.width;
          //alert(document.getElementById("HiddenField1").value);
        
        }
     </script>
    
    </head>
    <body onload="aa()">
      <form id="form1" runat="server">
      <div>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
        <asp:HiddenField ID="HiddenField1" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" onload="UpdatePanel1_Load">
      <ContentTemplate>
      <div>
      <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Panel ID="Panel1" runat="server" Width="200px" BorderWidth="1" BorderColor="#CC3300" Height="1200" >
        </asp:Panel>
      </div>
     </ContentTemplate>
      </asp:UpdatePanel>
    
      </div>
      </form>
    </body>
    </html>

    在UPDATEPANEL的LOAD事件重新设置

      protected void UpdatePanel1_Load(object sender, EventArgs e)
        {
          if (!string.IsNullOrEmpty(HiddenField1.Value))
          {
            
            Panel1.Width = Convert.ToInt32(HiddenField1.Value);
          }
         
        }

    努力+方法=成功
    2010年6月25日 7:46
  • 你需要先从客户端返回,然后采用Cookie等记录下来

    参考

    http://dotnet.aspx.cc/article/00000000-0000-0000-0000-000000000009/read.aspx


    【孟子E章】
    2010年6月26日 3:43
    版主

全部回复

  • 只有js获得浏览器窗口宽度

    alert(document.body.offsetWidth);


    77138191qq群 .net与asp.net
    2010年6月23日 9:51
  • 你可以用JS设置PANEL的宽度与屏幕宽度一致,PANEL在客户端会被解析成DIV,

     关于GRIDVIEW水平滚动条,参照http://blog.csdn.net/rockywu/archive/2010/01/23/5248892.aspx

     <script language=javascript>
     
        function aa() {
          var o = document.getElementById("Panel1");
          var w = o.style.width;
          o.style.width = screen.width;//设置宽度与屏幕宽度一致
        
        }
     </script>
    
    <body onload="aa()">
      <form id="form1" runat="server">
      <div>
      
      
      </div>
      <asp:Panel ID="Panel1" runat="server" Width="200" BorderColor=Red BorderWidth=2>
      </asp:Panel>
      </form>
    </body>

    努力+方法=成功
    2010年6月23日 9:58
  • 开心,我对你的感谢犹如滔滔长江水+黄河水连绵不绝.....唉,让江西的群众受苦了.....
    2010年6月25日 2:23
  • 我的Body标签在母版页中啊,我的目标页中没有body标签,怎么改呢?谢谢~
    2010年6月25日 2:39
  • 你好,

    你先试试,应该不需要改动。虽然你的body元素在模板页,但是脚本是客户端执行的,最终你的模板页和内容页会被最终解析成标准的html代码。


    Microsoft Online Community Support
    2010年6月25日 2:56
  • 你如果把PANEL放在内容页里面的话,你还可以在母版页中的BODY 里面写JS事件

    只不过这时候,你的PANEL1在客户端被解析成ctl00_ContentPlaceHolder1_Panel1

    你可以在网页运行后点击右键查看源文件看到PANEL被解析成DIV后的客户端id

    母版页代码

    <head runat="server">
      <title>无标题页</title>
       <script language=javascript>
     
      function aa() {
       var o = document.getElementById("ctl00_ContentPlaceHolder1_Panel1");
       var w = o.style.width;
       o.style.width = screen.width;//设置宽度与屏幕宽度一致
      
      }
     </script>
    
    </head>
    <body onload="aa()">
      <form id="form1" runat="server">
      <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
          
        </asp:contentplaceholder>
      </div>
      </form>
    </body>

    内容页代码

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     <asp:Panel ID="Panel1" runat="server" BorderColor=red Width=200 BorderWidth=2>
          </asp:Panel>
    </asp:Content>

     


    努力+方法=成功
    2010年6月25日 3:16
  • 这样子做就可以了:

        <div>
       
            <asp:Panel ID="Panel1" runat="server" Width="200px" BorderWidth="1" BorderColor="#CC3300" Height="1200" >
            </asp:Panel>
             <script type="text/javascript">
                     var o = document.getElementById("Panel1");
                     var w = o.style.width;
                     o.style.width = screen.width - 30; //设置宽度与屏幕宽度一致
     </script>
        </div>

    但在点击某个按钮后,宽度就变成200了。

    2010年6月25日 3:18
  • 开心你好,

    我现在的问题是点击按钮后这个宽度就失效了。

    2010年6月25日 3:56
  • 你按照我上面给你写的方法,是不会失效的,你试试就知道了
    努力+方法=成功
    2010年6月25日 4:09
  • 但我的确实是变了,全部代码如下:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function aa() {
                var o = document.getElementById("Panel1");
                var w = o.style.width;
                o.style.width = screen.width -60; //设置宽度与屏幕宽度一致
            }
     </script>
        <link href="App_Themes/Theme1/StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="aa()">
        <form id="form1" runat="server">
           <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
        <div>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            <asp:Panel ID="Panel1" runat="server" Width="200px" BorderWidth="1" BorderColor="#CC3300" Height="1200" >
            </asp:Panel>
        </div>
     </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

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

     
        protected void Button1_Click(object sender, EventArgs e)
        {
        }
    }

     

    2010年6月25日 5:01
  • 我要在后台进行调用,去设置某个控件的宽度。页面中获取到的数据要能传递到后台。难道这么多年一直无法实现?
    2010年6月25日 7:05
  • 你可以在客户端屏幕宽度的值赋给一个隐藏域,这样你在用UPDATEPANEL局部刷新的时候就不会改变PANEL的宽度

    具体代码实现

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title></title>
      <script type="text/javascript">
        function aa() {
          var o = document.getElementById("Panel1");
          var w = o.style.width;
          o.style.width = screen.width; //设置宽度与屏幕宽度一致
          document.getElementById("HiddenField1").value = screen.width;
          //alert(document.getElementById("HiddenField1").value);
        
        }
     </script>
    
    </head>
    <body onload="aa()">
      <form id="form1" runat="server">
      <div>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
        <asp:HiddenField ID="HiddenField1" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" onload="UpdatePanel1_Load">
      <ContentTemplate>
      <div>
      <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Panel ID="Panel1" runat="server" Width="200px" BorderWidth="1" BorderColor="#CC3300" Height="1200" >
        </asp:Panel>
      </div>
     </ContentTemplate>
      </asp:UpdatePanel>
    
      </div>
      </form>
    </body>
    </html>

    在UPDATEPANEL的LOAD事件重新设置

      protected void UpdatePanel1_Load(object sender, EventArgs e)
        {
          if (!string.IsNullOrEmpty(HiddenField1.Value))
          {
            
            Panel1.Width = Convert.ToInt32(HiddenField1.Value);
          }
         
        }

    努力+方法=成功
    2010年6月25日 7:45
  • 你通过隐藏域实现,我在你的上一个帖子已经回复,你看看

    你可以在客户端屏幕宽度的值赋给一个隐藏域,这样你在用UPDATEPANEL局部刷新的时候就不会改变PANEL的宽度

    具体代码实现

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
      <title></title>
      <script type="text/javascript">
        function aa() {
          var o = document.getElementById("Panel1");
          var w = o.style.width;
          o.style.width = screen.width; //设置宽度与屏幕宽度一致
          document.getElementById("HiddenField1").value = screen.width;
          //alert(document.getElementById("HiddenField1").value);
        
        }
     </script>
    
    </head>
    <body onload="aa()">
      <form id="form1" runat="server">
      <div>
       <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
        <asp:HiddenField ID="HiddenField1" runat="server" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" onload="UpdatePanel1_Load">
      <ContentTemplate>
      <div>
      <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Panel ID="Panel1" runat="server" Width="200px" BorderWidth="1" BorderColor="#CC3300" Height="1200" >
        </asp:Panel>
      </div>
     </ContentTemplate>
      </asp:UpdatePanel>
    
      </div>
      </form>
    </body>
    </html>

    在UPDATEPANEL的LOAD事件重新设置

      protected void UpdatePanel1_Load(object sender, EventArgs e)
        {
          if (!string.IsNullOrEmpty(HiddenField1.Value))
          {
            
            Panel1.Width = Convert.ToInt32(HiddenField1.Value);
          }
         
        }

    努力+方法=成功
    2010年6月25日 7:46
  • 你需要先从客户端返回,然后采用Cookie等记录下来

    参考

    http://dotnet.aspx.cc/article/00000000-0000-0000-0000-000000000009/read.aspx


    【孟子E章】
    2010年6月26日 3:43
    版主
  • 这标题太吓人了,“巨难”。
    Facing problems, think first, then search, finally ask.
    2010年6月26日 7:17
    版主
  • 对于我来说就是巨难,对于你们就是小菜了。哈~
    2010年6月28日 1:26