如何创建可折叠的CSS表

通常建议您确保绝大多数网页内容在有人访问时立即可见 - 但也有例外。例如,您可能希望提供对某些历史信息的访问权限,但不会使页面混乱几年,这可能会分散用户的注意力。

这种事情经常发生在桌子上。您可能拥有体育表格或收藏夹图表,并希望提供比较的可能性,但最初只显示最新表格的内容。本教程提供了一种简单而优雅的方法来创建CSS表,这些表将在JavaScript的帮助下崩溃。

虽然表传统上不依赖于这种操作,但由于基本上是一堆行元素,所以当行组添加到混合中时,所有这些都会发生变化。三个行组元素 - thead,tbody和tfoot - 为表提供了一个逻辑结构(并且还可能启用各种浏览器'技巧',例如滚动主体,同时保持头部和脚部就位)和组件,从而使一个部分成为目标并折叠。

如果您查看教程文件中的table.html,您将看到这样一个CSS表的示例。这是一个简单的三列表,列出了一些音轨名称,以及相关的艺术家和专辑。

简化为基本结构组件,CSS表看起来像下面的代码块。

请注意,上一个代码中的顺序是正确的:头部,脚部,身体。这使浏览器能够在接收所有表的数据之前呈现表的脚。但是,浏览器会按照您期望的顺序正确显示行组:头部,身体,脚部。

技术问题

要从平面表转移到可折叠表,需要考虑许多事项,例如交互如何工作,哪些技术将用于各种任务,以及如果确定将会发生什么技术不可用 - 尤其是JavaScript。

第一:互动。需要有一些方法来切换表体的可见性(这有效地导致表'打开'和'关闭')。表格页脚中的链接是实现此目的的逻辑设备。在技术方面,JavaScript和CSS的组合通常用于抽屉,JavaScript用于切换包含抽屉“内容”的元素的显示CSS属性(从而可见性)。因此,JavaScript将用于更改tbody元素的显示值,该元素最初将为none,因此表开始生命折叠。

最后一点然后会为没有启用JavaScript的用户触发可访问性问题:没有脚本,CSS表仍然会被关闭。因此,从逻辑上讲,tbody元素的默认值实际上必须使其可见;只有在启用JavaScript时才应用none值。这可以通过使用JavaScript附加覆盖样式表来完成。

如果我们快速“跳到最后”,这个思考和后续答案的结果将显示在collapsible-tables.html及其相关文件中。在Web浏览器中打开文档,您将看到与之前相同的表格标题和表格,但表格主体不可见。页脚不是空的,现在有一个“切换表内容”链接,以及一个引人注目的向下箭头。单击链接(整个页脚实际上是一个活动区域),并显示表体;此外,向下的箭头变为向上的箭头,以便显示下一次点击页脚链接时桌面主体会发生什么。

如果您在正在使用的任何浏览器中禁用JavaScript并重新加载页面,您将看到该表格完整显示,但有一些例外情况。首先,水平条纹由JavaScript驱动,因此不会显示。其次,页脚链接与禁用JavaScript的浏览器无关,因此删除了所述链接(以避免人们点击它并且没有发生任何事情)。

在引擎盖下

大多数HTML和CSS非常简单,与前面提到的CSS表教程差别不大。在标记中,链接到各种依赖关系的head部分之外的唯一主要重要添加是表脚,现在包含触发JavaScript函数的链接。可以在其他类似结构的表中使用相同的链接来驱动相同类型的切换。

 切换表格内容 

在主要的CSS文件collapsible-tables.css中,要注意的事项是tbody元素的默认样式和表格页脚中的链接。请记住,这些是禁用JavaScript时的默认设置。

tbody {display:table-row-group; } tfoot a {display:none; }

For this tutorial is mainly drawn from our earlier modular drawers piece. The examples demonstrate how simple, modular code can be used for very different layout components

本教程主要来自我们早期的模块化抽屉件。这些示例演示了如何将简单的模块化代码用于非常不同的布局组件

如您所见,tbody的显示值为table-row-group,它指定它显示为组合一行或多行的元素。如前所述,页脚链接设置为根本不显示。在这一点上,我们需要暂时搁置一下。

通常情况下,Internet Explorer会将快速曲线球直接投射到脸部。它不理解table-row-group,但是,幸运的是,如果使用了值块,它似乎正确地呈现页面。因为这个值会在所有其他浏览器中搞砸,所以它通过条件注释作为特定于IE的覆盖应用。

回到我们的主程序,支持JavaScript的浏览器的tbody和table footer链接样式已添加到单独的样式表js-override.css中。这会将tbody的默认显示值设置为none,从而在首次打开页面时使表折叠。它还为页脚链接添加了一堆样式,将其设置为显示为块元素(从而填充其容器,表格页脚)并将向下箭头图像定义为其背景。第三个规则,tfoot a:hover,改变悬停状态下链接的背景颜色,使其更加明显,它是一个可点击的元素。

tbody {display:none;} tfoot a {display:block; text-decoration:none; text-transform:大写;颜色:#000000;填充:4px 0; background:url(down-arrow.gif)5px 60%no-repeat;} tfoot a:hover {background-color:#eeeeee;}

Table display without JavaScript

如果没有JavaScript,表格仍会显示。切换脚本/样式通常会忽略此功能,使许多用户无法访问内容

探索脚本

切换功能由JavaScript文档collapsible-tables.js的一些内容驱动。但是,脚本中的第一个代码块用于附加重写CSS(js-override.css)。请注意,这可能看起来很冗长,但它与document.write不同,如果您打算使用现代方法,应该避免使用它。

var cssNode = document.createElement('link'); cssNode.setAttribute('rel','stylesheet'); cssNode.setAttribute('type','text / css'); cssNode.setAttribute('href','js -override.css '); document.getElementsByTagName(' 头“)[0] .appendChild(cssNode);

当单击网页上的表格页脚链接时,必须发生两件事:箭头图像应该切换,并且tbody元素的可见性必须切换。每个目标都通过切换功能定义。

对于箭头图像,这很简单:图像是表格页脚链接上的背景,因此没有要定义的路径:因此样式更新应用于单击的元素,由toggler表示。但是,为了定位tbody元素,使用JavaScript属性定义DOM树中的路径。

确定目标路径在很大程度上是一个逻辑过程,使用parentNode属性在文档层次结构中上升一级(例如,从td到tr)和nextSibling来访问父项的下一个子节点。一些浏览器将空白区域视为下一个兄弟,因此在脚本中添加了另一行,将所述浏览器推向后续兄弟。

function toggle(toggler){if(document.getElementById){imageSwitch = toggler; targetElement = toggler.parentNode.parentNode.parentNode.nextSibling; if(targetElement.className == undefined){targetElement = toggler.parentNode.parentNode.parentNode.nextSibling。 nextSibling; }

切换脚本的最后一部分通常是一个简单的if / else语句,用于确定元素是否处于默认状态。如果是,则设置为其备用状态;如果没有,则将其设置为默认状态。对于div抽屉,这些值通常是none和block - 换句话说,如果在触发函数时div的显示设置为none,则设置为block,否则设置为none。

Firefox display error

使用正确的显示值至关重要。这是我们在Firefox中为tbody元素显示值提供块的页面发生的情况

在我们的示例中,Internet Explorer和所有其他浏览器的不同要求意味着需要额外的步骤。首先,变量需要创建以定义用于扩展列表的备用CSS显示值 - 用于Internet Explorer的块和用于其他所有内容的表行组。

if(navigator.userAgent.indexOf('IE')!= -1){var displaySetting =“block”; } else {var displaySetting =“table-row-group”; }

然后在前面提到的if / else语句中使用该值。所述语句有效地读取:如果目标tbody元素的显示值是block(对于IE)或table-row-group(对于其他所有),则将其设置为none并显示向下箭头图像;否则,将display设置为block(对于IE)或table-row-group(对于其他所有)并显示向上箭头图像。

if(targetElement.style.display == displaySetting){targetElement.style.display =“none”; imageSwitch.style.backgroundImage =“url(down-arrow.gif)”; } else {targetElement.style.display = displaySetting; imageSwitch.style.backgroundImage =“url(up-arrow.gif)”; }}}


翻译字数超限