Remove From My Forums

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

问题
0

登录进行投票

我在网页上做了一个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);
      }
     
    }

努力+方法=成功

已标记为答案 Yonggang Song 2010年6月28日 1:27

2010年6月25日 7:46

0

登录进行投票
你需要先从客户端返回，然后采用Cookie等记录下来

参考

http://dotnet.aspx.cc/article/00000000-0000-0000-0000-000000000009/read.aspx
【孟子E章】
- 已标记为答案 Yonggang Song 2010年6月28日 1:27
2010年6月26日 3:43

回复

|

引用

版主

全部回复

0

登录进行投票

只有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

0

登录进行投票

开心，我对你的感谢犹如滔滔长江水+黄河水连绵不绝.....唉，让江西的群众受苦了.....

2010年6月25日 2:23

回复

|

引用
0

登录进行投票

我的Body标签在母版页中啊，我的目标页中没有body标签，怎么改呢？谢谢~

2010年6月25日 2:39

回复

|

引用
0

登录进行投票

你好，

你先试试，应该不需要改动。虽然你的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

0

登录进行投票

这样子做就可以了：

    <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

回复

|

引用
0

登录进行投票

开心你好，

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

2010年6月25日 3:56

回复

|

引用
0

登录进行投票

你按照我上面给你写的方法，是不会失效的，你试试就知道了
努力+方法=成功

2010年6月25日 4:09

回复

|

引用
0

登录进行投票

但我的确实是变了，全部代码如下：

<%@ 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

回复

|

引用
0

登录进行投票
我要在后台进行调用，去设置某个控件的宽度。页面中获取到的数据要能传递到后台。难道这么多年一直无法实现？
- 已合并 Sheng Jiang 蒋晟Moderator 2010年6月27日 3:11
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);
      }
     
    }

努力+方法=成功

已标记为答案 Yonggang Song 2010年6月25日 15:31
取消答案标记 Yonggang Song 2010年6月28日 1:27

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);
      }
     
    }

努力+方法=成功

已标记为答案 Yonggang Song 2010年6月28日 1:27

2010年6月25日 7:46

0

登录进行投票
你需要先从客户端返回，然后采用Cookie等记录下来

参考

http://dotnet.aspx.cc/article/00000000-0000-0000-0000-000000000009/read.aspx
【孟子E章】
- 已标记为答案 Yonggang Song 2010年6月28日 1:27
2010年6月26日 3:43

回复

|

引用

版主
0

登录进行投票

这标题太吓人了，“巨难”。
Facing problems, think first, then search, finally ask.

2010年6月26日 7:17

回复

|

引用

版主
0

登录进行投票

对于我来说就是巨难，对于你们就是小菜了。哈~

2010年6月28日 1:26

回复

|

引用

积极答复者

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

问题

答案

全部回复