65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 分割条 - 调整面板、表格单元格和控件大小

Jeff Bazinet
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.75/5 (42投票s)

2007年4月24日

CPOL

5分钟阅读

viewsIcon

747540

downloadIcon

4903

VwdCms.SplitterBar 是一个服务器控件，可让您轻松地为网页布局添加调整大小功能，现在同时支持垂直和水平调整大小。

Screenshot - VwdCmsSplitterBar.gif

引言

VwdCms.SplitterBar 控件旨在为您提供双栏页面布局中的列大小调整。使用分割条来调整面板、div、表格单元格或几乎任何控件的大小。

此控件非常适合宽度可变的页面，其中包含树形结构或数据项列表。

本文顶部的截图是 VwdCms.SplitterBar 使用的示例，左栏为 TreeView 控件，右栏为 TextArea 控件。有关 TextArea 在 IE 6 和 IE 7 中的大小调整、滚动和文本换行问题以及如何解决这些问题的信息，请参阅演示项目（示例 1）。

使用控件

建议：下载演示项目，而不是仅下载控件的代码，因为演示项目包含许多有关如何使用该控件以及如何不使用该控件的示例。演示项目包含大量关于如何操作的描述和解释，因此我不会在本文中重复所有这些信息。

要将 VwdCms.SplitterBar 控件添加到您的项目中，只需按照以下步骤操作：

第 1 步：将这些文件复制到您的项目目录中

  1. /App_Code/SplitterBar.cs
  2. /VwdCmsSplitterBar.js
  3. /vsplitter.gif

第 2 步：将 VwdCmsSplitterBar.js 文件添加到您的 Web Form 的 HEAD 部分

<head runat="server">
    <title>VwdCms SplitterBar Web Form</title>
    <script src="VwdCmsSplitterBar.js" type="text/javascript"></script> 
</head>

第 3 步：更新您的 web.config 文件中 Controls 部分（在 system.web 部分内）

    <pages>
        <controls>
            <add tagPrefix="VwdCms" namespace="VwdCms"/> 
        </controls>
    </pages>

第 4 步：将 VwdCms.SplitterBar 控件添加到您的 Web Form

    <VwdCms:SplitterBar runat="server" ID="vsbSplitter1" 
        LeftResizeTargets="tdTree1;divTree1" 
        MinWidth="100" 
        MaxWidth="700"
        BackgroundColor="lightsteelblue" 
        BackgroundColorLimit="firebrick"
        BackgroundColorHilite="steelblue"
        BackgroundColorResizing="purple"
        SaveWidthToElement="txtWidth1"
        OnResizeFunction="splitterOnResize"
        style="background-image:url(vsplitter.gif);
            background-position:center center;
            background-repeat:no-repeat;"/>

OnResizeFunction 的示例

<script language="javascript" type="text/javascript"><!--

    function splitterOnResize(width)
    {
        // do any other work that needs to happen when the 
        // splitter resizes. this is a good place to handle 
        // any complex resizing rules, etc.

        // make sure the width is in number format
        if (typeof width == "string")
        {
            width = new Number(width.replace("px",""));
        }

        // now do something...
    }
    
// -->
</script>

此 VwdCms.SplitterBar 连接到的表的示例

    <div style="margin:0px;padding:0px;
    width:800px:overflow:hidden;">
    <table border="0" cellpadding="0" 
        cellspacing="0" 
        style="width:800px;height:200px;
        border:solid 1px #6699CC;">
        <tr style="height:200px;">
            <td id="tdTree1" 
            style="width:250px;height:200px;" 
            align="left" valign="top"> 
              <div id="divTree1" 
                style="width:100%;height:100%;overflow:auto;
                padding:0px;margin:0px;">
                <asp:TreeView ID="tvwFramework1" 
                runat="server" ShowLines="True"
                style="width:100%;height:100%;
                padding:0px;margin:0px;">
                <Nodes>
                <asp:TreeNode Text=".NET Framework" 
                Value=".NET Framework">
                <asp:TreeNode 
                Text="System.Diagnostics" 
                Value="System.Diagnostics">
                <asp:TreeNode 
                Text="Debug Class" 
                Value="Debug"></asp:TreeNode>
                <asp:TreeNode 
                Text="DebuggableAttribute.DebuggingModes 
                Enumeration" 
                Value="DebuggableAttribute.DebuggingModes 
                Enumeration"></asp:TreeNode>
                <asp:TreeNode 
                Text="EventLogPermissionEntryCollection 
                Class" 
                Value="EventLogPermissionEntryCollection 
                Class"></asp:TreeNode>
                </asp:TreeNode>
                </asp:TreeNode>
                </Nodes>
                </asp:TreeView>    
              </div>            
            </td>
            <td id="tdMid1" 
            style="height:200px;width:6px;
            background-color:lightsteelblue;"></td>
            <td id="tdEdit1" 
            align="left" valign="top" 
            style="height:200px;"> 
                    <textarea runat="server" 
                    id="txtEdit1" 
                    style="margin:0px;height:100%;width:100%;
                    padding:0px 0px 0px 5px;
                    border:none;"></textarea>
            </td>
        
        </tr>
    </table>
    <span style="font-family:Verdana:font-size:10pt;">
    Current Width: 
    </span>
    <input type="text" id="txtWidth1" 
    value="250px" 
    style="width:70px;font-family:Verdana:font-size:10pt;"/>
    </div>

更多使用示例

您可以通过点击本文顶部的“下载演示”链接来下载许多有关如何使用 SplitterBar 的其他示例。

关注点

构建此控件时，最具挑战性的部分是 JavaScript 和 DHTML，因为我希望它能在 IE 和 Firefox 中都能正常工作。起初，这项任务似乎很简单，但随着我开始测试和构建演示项目示例，我不断发现需要解决的小错误。查找所有这些小问题可能非常耗时，我已尽力处理其中大部分问题。如果您发现错误，请随意修复它们，并回复本文，提供您的改进建议。

当您尝试实现 SplitterBar 时，您可能会发现您的页面行为不符合您的预期。我想提前警告您 - 我在控件完成后发现的大多数问题都可以通过调整我应用 SplitterBar 的表格或控件上的 CSS 样式来解决。很多时候，我们的第一反应是认为列大小调整问题是 SplitterBar 本身的问题，当然这也有可能，但我发现大多数情况下并非如此。

您选择的 DOCTYPE（标记格式规范）将对浏览器如何呈现您的内容产生深远影响。如果您在使样式按预期工作方面遇到困难，您可能想尝试使用不同的 DOCTYPE。如果您得到奇怪的结果，或者浏览器似乎忽略了您的样式设置，那么尝试不带 DOCTYPE 渲染页面是值得花时间去尝试的。将其完全从文档中删除，因为一些浏览器，如 IE 7，即使被注释掉了，仍然会识别 DOCTYPE。

演示项目 Web Form 使用以下 DOCTYPE：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

历史

我已根据您提出的一些建议更新了 VwdCms.SplitterBar。以下是已添加或更改的内容列表：

  • 在回发后内置列宽持久化。
  • 更好地支持处理 IFrames。
  • 清理 VwdCmsSplitterBar.js 中的 JavaScript 代码。
  • 演示项目中包含更多代码示例，包括回发。
  • 可以指定 SplitterBar 如何处理 IFrames。
  • 专门用于 IFrames 的整个演示页面。
  • 双击可最小化和最大化列宽。
  • 将 OnResizeFunction 事件更改为 OnResize。
  • 添加了 OnResizeStart 事件。
  • 添加了 OnResizeComplete 事件。
  • 添加了 OnDoubleClick 事件。
  • 在演示项目中添加了使用 OnResizeStart、OnResize 和 OnResizeComplete 事件处理程序的代码示例。
  • 更新以支持母版页和容器控件（命名容器）
    • C# 和 JavaScript 代码协同工作以确定元素的 ClientID。
    • SplitterBar 检查它是否在 NamingContainer 中，以便在回发期间找到控件。
    • 在演示项目中添加了一个新示例（#7），以演示 SplitterBar 与母版页的用法。
  • 添加了 SplitterBar 在线演示的链接。
  • 在演示项目中添加了一个 GridView 列大小调整示例。
  • 为 SplitterBar 添加了水平行大小调整功能，并在演示项目中添加了一个新示例。
  • 添加了代码以考虑窗口/文档的 scrollLeft 和 scrollTop，以便在页面向下或向右滚动时 SplitterBar 能够继续正常工作。
  • 在演示项目中添加了示例 10 - 这是将垂直和水平分割条一起使用的示例，以创建具有可调整大小的左栏的表格，并且右栏中有两个可调整大小的行。
  • 在回发期间添加了 MinWidth、MaxWidth、MinHeight 和 MaxHeight 属性的持久化。
  • 更新了演示项目中的示例 10，以演示设置 MinWidth、MaxWidth、MinHeight 和 MaxHeight 属性。
  • 添加了对服务器端大小调整的更好支持。现在，设置 SplitterBar.LeftColumnWidth 或 SplitterBar.TopRowHeight 将在回发期间自动调整目标控件的大小。
© . All rights reserved.