多列布局控制

分享于 

12分钟阅读

Web开发

  繁體

Column control in action!

图像 1.- 3 列布局

介绍

控件允许你简单地将HTML内容划分为多列,并以更好的可读的多列布局呈现文章。 如果你看随机报纸的网页,你会发现文章文本的宽度大约是 400像素。 这是因为更广泛的文本是 LESS 舒适阅读。 报纸报纸中,文章的文本被分成了几列。 因为需要手工分割文章,因这里这种技术不会在网页上使用,因为需要手工分割文章。 这里控件使它的成为可能。

查看在线演示

多列布局

多列布局是 CSS 3规范的一部分( 更多位于 w3c.org - CSS3 MODULE: 多列布局 [ ^ ] ),但是由于 CSS 3仍然只是一个草稿,所以在你的网页上使用 CSS 3实现多个列布局之前,需要很长时间才能实现。 如果你现在想使用它,你必须手动将每个文章划分为列,并将这些列放置在 table 或者 DIV 元素。

这里控件自动执行所有工作,所以只需将它的放入web页面,列控件将它的内容分为指定数目。

<cc:ColumnControlColumnCount="3"runat="server">. . your original long html content.. </cc:ColumnControl>

这里控件的工作原理

实现这里控件有两个主要问题。 首先如何计算内容的估计高度,第二个是如何将内容划分为列,因为它不能在指定的字符数。 我决定在服务器端解决这个问题,但是它也可以使用JavaScript在客户端上实现。 我相信服务器端更好,因为它需要非常复杂的代码,在客户机上运行很慢。 另一方面,在服务器上估计HTML元素的大小比较困难。

控件包含许多允许你指定如何划分原始HTML代码的特性。 控件将HTML标记分为以下类型: header 标记( h1 , h2 ,段落标记( p , div 。),列出标签( ul , ol , dl ) 和列表项( li , dd , dt )。如果控件达到列的极限,则它的行为取决于当前顶级标记。

如果 header 标记发生中断,则这里 header 将移动到下一个列的开头。 在段落标记中,控件将标记分为两部分,第二部分将移动到下一个列。 列表中的控件等待当前列表项的末尾,并将列表项的其余部分移到下一个列。 其他标记不能分割,控件只移动到标记的末尾。

页眉和列表除法

这些图像显示了在分割内容时控件的行为。 用绿色高亮显示的文本是第二部分和红色的第二部分,计算它的中应该分割的位置。 在灰色方框中,你可以看到结果。 从第二个图像可以看到的一个有趣事实是,如果向列表( 以及段落) 添加更多属性,它会自动复制到第二列,因此这些属性不会被丢失。

格式化标记

自动分区很好,但有时你可能需要指定一些更多的东西。 例如,要定义文档的一个部分应分为三列,第二段不应分割,第三段应为两列。 有时你可能还需要在指定的列( 将内容移动到以下位置) 中插入一些额外的空白。 这正是格式标记的优点 ! 格式标记可以作为HTML注释插入到HTML代码中,因此它非常简单。 当你想要加载内容形式的外部资源并且仍然能够更改除法设置时,格式化标记也非常有用。

图像 2 - 格式化标记的用法

下面的代码演示如何控制分割行为。 如果使用 EnableFormatTags 属性启用格式化标记,控件不会将整个内容划分为列,但只将标记为 cc:section 标记的节划分为列。 ( 右侧图像显示了这里代码生成的内容。)

<cc:ColumnControlrunat="server"EnableFormatTags="true"><h1>Header</h1><!--[cc:section cols=2]--><p>First paragraph..</p><p>Second paragraph..</p><!--[/cc:section]--><h2>Small header</h2><!--[cc:section cols=3]--><p> This very long paragraph will be 
 divided into three columns...
 </p><!--[/cc:section]--></cc:ColumnControl>

格式化标记的第二次使用是当你需要将一些内容移动到下一列时,需要将它的他空间插入。 在本例中,可以使用 cc:space 标记,如下面的示例所示:

<cc:ColumnControlColumnCount="3"runat="server"><p>First paragraph..</p><!--[cc:space size=50]--><p>Second paragraph..</p><p>Third paragraph..</p></cc:ColumnControl>

有关格式化标记的更高级示例,请参见联机演示应用程序 [ ^ ]。

最小控制宽度

如你所见,below ( 查看图像不。 3 ),控件允许你指定保留多列布局的最小宽度。 这样可以防止控件向屏幕分辨率较低或者浏览器窗口较小的用户显示更窄的列。 这里功能仅在控件使用下列控件呈现列布局时可用 div 控件包含这里特性的两个不同实现,一个用于 IE,另一个用于其他浏览器。 我认为 IE 实现非常有趣,所以我想写一些关于它的文字。

当使用这里控件在两列中显示HTML时,将生成两个 div CSS样式的元素 width:50 % 当控件的宽度为 LESS 时,我们需要将它更改为 width:100 % 在基于Mozilla的浏览器中,惟一的方法是使用 JavaScript ( 有关更多信息,请参见源代码中的mozscript.js 文件)。 在 IE 中,我们可以使用类似这里( 将这里样式添加到每列)的CSS表达式:

width:expression(document.getElementById('col_ctrl').offsetWidth<600?'100%':'50%');

这就是我们所需要的 ! 如果具有 in col_ctrl ( 这里元素包含整个控件)的元素宽度超过 600像素,则列宽度为 50% ( 内容在多列布局中显示),否则宽度设置为 100%,内容将显示。

控件属性

常规属性

从前面的示例中可以看到,可以使用 ColumnCount 属性更改列号。 当你想使用格式标记控制除内容之外,你可以使用 EnableFormatTags。 如果启用格式标记,则在不指定节标记( <--[cc:section]--> ) 中的列计数时,ColumnCount 将用作默认值。!

What can be done with MinColumnsWidth

图像 3 - MinColumnsWidth 属性可以做什么

生成的代码

在当前的HTML中,有两种方法来进行多列布局。 首先是使用 表格 使用指定的列数和第二 is div 标记( 使用CSS样式)。每个方法都有它的优缺点,因此你可以决定 RenderMode 属性应该使用哪一个。 它有以下三个可能的值:

  • DivFixed - 生成列使用 div 元素除最后一个以外的所有列都具有CSS样式 float:left 要实现列布局,每个列都有CSS类 cc_col,并且它包含另一个 div 包含 cc_cont 类的元素上一列包含带有 cc_last CSS类的元素。
  • TableFixed - 生成具有指定列数的table。 每列都设置为 cc_col 类,并且它的宽度也设置为,因这里列宽不能更改。
  • 以前的方法一样,TableVariable 生成 table,每个列都设置为 cc_col。 table 列没有指定宽度,因此可以通过浏览器调整宽度。

在使用 DivFixed 渲染模式时,还可以使用 MinColumnsWidth 属性指定保留列布局的最小控件宽度。 这意味着如果调整控件大小为较小的宽度,它将在一列中显示整个内容。 这里特性在第二示例 [ ^ ] 中演示。

外观- column

由于很难估计元素的大小,因此可以通过设置属性 TagConstantsElementsSizes 来帮助该控件。 第一个可以用于指定元素大小之间的比率。 例如如果你希望在 预先 元素的大小与 10个字符的大小相同 p 元素,则可以将这里属性设置为 pre=10"" 控制将使用这里设置进行更好的除法。 ElementsSizes 属性允许你指定非对标记所占用的空间。 如果要将图像插入文档中,这非常有用,只需使用这里属性( 例如 img=500"" ) 和控制将能够更好的估计 img 以下示例演示了第三联机示例页的用法。

如 上面 所述,控件使用三种不同的方法分割。 你可以使用 HeaderTags 属性( 控件永远不会将标记拆分为多个列,它将不会在列的末尾) 指定应该将哪些HTML标记视为 header 标记。 下一类型是仅在列表项结束后被划分的列表。 可以使用 ListTags 设置作为列表处理的标记,并且可以使用 ListItemTags 更改列表项。 最后一种标记是可以分为多个列的ParagraphTagsSpaceChars 允许指定可以用于分割段落内容的字符。 控件还使用用于文本格式设置的所有其他标记的列表。 可以使用 PairTags 属性修改这里列表,但要小心- 控件期望所有这些标记都具有匹配的结束标记 !

已知问题

  • 用于分隔传递给控件的HTML内容的解析器不是很聪明。 它不期望完全有效的XHTML ( 它不尝试使用XML类来处理它),但它期望所有对标记都有结束标记。
  • 我试图测试控制,但如果你发现任何例子,它会产生奇怪的结果,请与我联系。 我希望能改进它。

未来工作和历史

  • (7/7/2005) - 可以用于 ASP.NET 1.1和 ASP.NET 2.0 β 2.
  • (7/7/2005) - 在CodeProject上发布的本文的第一版。

控制  COL  Layout  column  
相关文章