帮酷LOGO
0 0 评论
文章标签:切分  单元格  面板  PAN  Panels  asp-net  控制  PANE  


Screenshot - VwdCmsSplitterBar.gif

  • 试试网上拆分器 SplitterBar在线演示
  • 现在 VwdCms.SplitterBar 既支持垂直方向,也支持水平方向。

介绍

VwdCms.SplitterBar 控件用于在两列页面布局中为你提供列调整大小。 使用拆分条调整面板。div。table 单元格或者任何控件的大小。

这里控件适用于具有树或者数据项的List的页面,它的宽度不同。

本文顶部的屏幕截图是 VwdCms.SplitterBar 中的一个示例,在 table的左列和右列的TextArea 控件中有 TreeView 控件。 有关 IE 6和 IE 7中的TextArea 大小。滚动和文本包装问题的信息,请参见演示项目( 示例 1 ),以及如何克服它。

使用控件

建议: 下载演示项目而不仅仅是控件代码,因为演示项目有许多如何使用控件的示例,以及如何不使用控件。 演示项目有很多关于如何做事情的描述和解释,所以我不会在本文中重复所有这些信息。

要将 VwdCms.SplitterBar 控件添加到项目中,只需按以下步骤操作:

步骤 1: 将这些文件复制到你的项目目录中:

  • /App_Code/SplitterBar.cs
  • /vwdcmssplitterbar。js
  • /vSplitter。gif

步骤 2: 将 VwdCmsSplitterBar.js 文件添加到 头部 Web窗体的部分:

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

步骤 3: 更新你的文件部分( 在 system.web 部分)的web.config Controls:

<pages><controls><addtagPrefix="VwdCms"namespace="VwdCms"/></controls></pages>

步骤 4:VwdCms.SplitterBar 控件添加到你的Web窗体中:

<VwdCms:SplitterBarrunat="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的示例:

<scriptlanguage="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 formatif (typeof width == "string")
 {
 width = new Number(width.replace("px",""));
 }
 // now do something... }// --></script>

这里 VwdCms.SplitterBar 连接到的table的一个示例:

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

更多用法示例

你可以通过点击本文顶部的'下载演示'链接来下载许多关于如何使用 SplitterBar的例子。

Points of Interest

构建这个控件最有挑战性的部分是,因为我希望它在 IE 和 Firefox 中工作。 首先,任务似乎非常简单,但随着我开始测试和构建演示项目示例,我仍然找到了 Bug。 寻找所有这些小问题会耗费很多时间,我尽力处理这些问题。 如果你找到 Bug,你可以随意修复并回复本文,并提出改进建议。

当你尝试实现 SplitterBar 时,你可能会发现你的页面不像你预期的那样。 在 advance warn warn warn我在完成该控件后发现的most可以通过调整 table 或者我正在应用的SplitterBar 控件的CSS样式来解决。 很多时候,我们的初始React是,有一个问题,表明 SplitterBar 有问题,但是我发现不是大部分时间。

你选择的DOCTYPE ( 标记格式规范) 将对浏览器呈现内容的方式产生深远的影响。 如果要使样式与预期的工作无关,可以能希望尝试使用不同的DOCTYPE。 如果得到奇怪的结果或者浏览器忽略了样式设置,那么尝试渲染页面就很有意义了,而不需要任何 DOCTYPE 就可以尝试渲染页面。 完全从文档中删除它,如一些浏览器,如 IE 7,仍然会选择 DOCTYPE,即使它被注释出来。

演示项目Web窗体使用以下 DOCTYPE:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

历史记录

我已经根据你所做的一些建议更新了 VwdCms.SplitterBar。 下面是已经添加或者更改的内容的List:

  • 在 postback 之后建立列宽的持久化。
  • 更好地支持处理 iframe。
  • 清除 VwdCmsSplitterBar.js 中的JavaScript代码。
  • 演示项目中的更多代码示例包括回发。
  • 指定 SplitterBar 如何处理iframe的能力。
  • 一个专用于iframe的演示页面。
  • 双击以最小化和最大化列宽。
  • OnResizeFunction 事件更改为 OnResize
  • 添加了 OnResizeStart 事件。
  • 添加了 OnResizeComplete 事件。
  • 添加了 OnDoubleClick 事件。
  • 在演示项目中添加了使用 OnResizeStartOnResizeOnResizeComplete 事件处理程序的代码示例。
  • 更新为支持母版页和容器控件( 命名容器):
    • C# 和JavaScript代码一起工作来确定元素的ClientID
    • SplitterBar 检查它是否在 NamingContainer 中,以便在 postback 过程中找到控件。
    • 向演示项目添加了一个新示例( #7 ),以演示如何在母版页中使用 SplitterBar
  • 添加到 SplitterBar 联机演示的链接。
  • 向演示项目中添加了一个 GridView 列调整大小示例。
  • SplitterBar 添加了水平行调整大小功能,并向演示项目添加了一个。
  • 在窗口/文档 scrollLeftscrollTop 中添加了代码,以便在页面向下滚动或者向右滚动时,SplitterBar 将继续正常工作。
  • 添加示例 10到演示项目- 这是使用垂直和水平分割条创建具有大小可以调的table的示例。
  • MinWidthMaxWidthMinHeightMaxHeight 属性的回发期间添加了持久性。
  • 在演示项目中更新了示例 10以演示如何设置 MinWidthMaxWidthMinHeightMaxHeight 属性。
  • 添加了更好的服务器端调整大小支持。 现在,设置 SplitterBar.LeftColumnWidth 或者 SplitterBar.TopRowHeight 将在 postback 期间自动调整目标控件的大小。


文章标签:控制  asp-net    PAN  PANE  面板  单元格  切分  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语