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

XCoHtml

Eduard Puiu
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.53/5 (9投票s)

2010年6月25日

CPOL

5分钟阅读

viewsIcon

31496

downloadIcon

342

一个支持可扩展/可折叠 HTML 内容嵌入的工具

Sample Image

引言

在我读高中时，我经常处理学习和交流材料。最大的挑战通常是根据特定时间点将信息归类为相关或不相关，并根据我的需求或我的听众分别设定所需的详细程度。所有这些都是通过教学课程和内网演示得来的。结合可扩展内容与超链接、图形和导航按钮的能力越强，我越能更快地实现我的目标。

我在网上冲浪，想了解其他人是如何处理这些方面的（考虑到我还是个高中生，可以说我年轻而充满活力），我学到了几种使用可扩展/可折叠 HTML 内容的 JavaScript 方法，从非常简单（但仍有价值）的，比如 **Samir Nigam** 的 可扩展面板控件，到更复杂的，其中可能包括 **Bill Seddon** 的 Web 控件 和 **Tittle Joseph** 的 自定义控件片段。在 elle A Designs 也可以看到一些“可扩展和可折叠的文本块”。而且，是的，**CodeProject** 上填充文章的那些可折叠代码片段同样很有帮助。

为了让 HTML 部分更轻松，我用 C# 编写了一个小工具（好吧，如果“编写”这个词在我这里不算夸张的话），它能帮助我高效地编辑 HTML 内容，根据我的需要随时扩展和折叠它。

使用 XCoHtml 工具

XCoHtml 是一个“最顶层窗口”工具，它能直接提供 JavaScript 和 CSS 文件，以支持 HTML 页面的可扩展/可折叠内容，并帮助快速将该内容嵌入页面。

通常，您应该先在一个编辑器中打开您正在处理的页面。一开始，XCoHtml 会定位在您屏幕的左上角。首先，选择您希望将 CSS/JavaScript 支持文件复制到的文件夹。点击 **CSS / JS path**。

CSS/Js folder

在弹出对话框中，选择目标路径。一旦确定了正确的目标路径，请点击控件旁边显示所选目标的图标，以便将必需的支撑文件复制到那里。

Copying the CSS/Js files

以下文件将被复制到所选位置

  • collapse.gif （用于 collapse 命令的图标）
  • expand.gif （用于 expand 命令的图标）
  • ShowHide.css
  • ShowHide.js

然后，通过点击 **HTML doc path** 标签，选择您当前正在处理的 HTML 文件的路径。这将允许该工具在后续检查 ID 重复。
Selecting the HTML file

为了让您的 HTML 页面利用 CSS/JavaScript 的可扩展/可折叠内容支持，您必须通过点击 XCoHtml 工具的专用按钮，让页面感知到提供的 CSS 和 JavaScript 文件。

The support scripting

作为一般规则，每当您向该工具发出类似的命令时，要添加到 HTML 页面的脚本会自动复制到剪贴板。这使得您在返回加载了您页面的编辑器时，可以直接将剪贴板的内容粘贴到 HTML 文档中，如下图所示。必要的 <link> 和 <script> 标签以及正确填充的属性会添加到 <head> 部分（因此，请确保在复制剪贴板内容时，您的光标位于 <head> 部分）。

现在 CSS/JavaScript 支持已完全可用，您可以开始扩展和折叠您的 HTML 内容了。正如我稍后将在本文中解释的，您需要为两个 HTML 元素（标签）指定两个 ID：用于 expand/collapse 图标的 ID 和用于可扩展/可折叠内容的 ID。在工具的相应输入字段中提供这些 ID，并通过点击相应的蓝色标签来检查重复项。同时为内容提供一个标题。

The element ID's

现在，点击工具上的 **Begin** 按钮，并将光标定位在您想要开始嵌入可扩展/可折叠内容的 HTML 文件中的位置。粘贴剪贴板中的内容（如您已学到的，脚本是通过剪贴板提供的）。

Begin block

在脚本块的紧下方，写下您需要折叠或展开的任何 HTML 代码。当然，这段代码可能已经存在；在这种情况下，您只需要放置提到的脚本。

通过点击工具上的 **End** 按钮，并将其通过剪贴板接收到的内容粘贴到所需位置，来结束这个 HTML 块的终止脚本。

End block

一个示例

这是一个具有两个相关性级别的 HTML 内容示例。

An example - collapsed content

点击 expand 图标以达到第一个详细级别

An example - expanded level 1

现在点击 expand 图标以达到第二个详细级别

An example - expanded level 2

事物可以深入到您需要的程度。需要扩展和折叠的 HTML 内容完全取决于您。

一切如何运作

expand The 'expand' icon 和 collapse The 'collapse' icon 图标作为背景图像包含在 <span> 标签中

<span id=idTitle class='expand' onClick='ShowOrHide(idHiddenInfo, id)'> </span>

在上面的例子中，idTitle 将是 'id_about'。用于显示 expand 图标的样式如下

.expand
{
  background-image:url('expand.gif');
  background-repeat: no-repeat;
  cursor:pointer;
  width:24px;
}

而 collapse 图标的样式如下

.collapse
{
  background-image:url('collapse.gif');
  background-repeat: no-repeat;
  cursor:pointer;
  width:24px;
}

这里有一个小说明：<span> 标签必须使用几个不间断空格，因为 <span> 的 width 属性在 Firefox 和 Chrome 浏览器中无效。
可扩展/可折叠内容的标题由以下样式控制

.topic
{
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size:12pt;
  font-weight: bold;
}

通过 JavaScript 中的以下函数实现点击相应图标来扩展和折叠 HTML 内容的效果

function ShowOrHide(idTarget, idCmd)
{
  var whatToShowOrHide = document.getElementById(idTarget); // the shown or hidden staff
  var clickedIcon = document.getElementById(idCmd); // the clicked icon (to show / hide)
  if (clickedIcon.className == 'expand')
  {
    whatToShowOrHide.style.display = "block"; // show the staff
    clickedIcon.className = "collapse"; // toggle icon
  }
  else
  {
    whatToShowOrHide.style.display = "none"; // hide the staff
    clickedIcon.className = "expand"; // toggle icon
  }
}

为了使某些 HTML 内容可扩展/可折叠，该内容必须用 begin 和 end 规范进行保护。

Guarding the HTML content

begin 规范是通过调用 TitleForHiddenStaff() 然后调用 BeginHiddenStaff() 来实现的

function TitleForHiddenStaff(idTitle, title, idHiddenInfo)
{
  document.write("<span id='" + idTitle + 
	"' class='expand' onClick='ShowOrHide(\"" + idHiddenInfo + "\", id)'>");
  document.write("-non breakable spaces here-</span><span class='topic'>"); 
  document.write(title);
  document.write("</span>");
}

function BeginHiddenStaff(idHiddenStaff)
{
  document.write("<table id='" + idHiddenStaff + "' style='display:none'>");
  document.write("<tr><td width='19px'>-non breakable space-</td><td>");
}

end 规范是通过调用 EndHiddenStaff() 函数来实现的

function EndHiddenStaff()
{
  document.write("<td></tr></table>");
}

提示

  • 该工具已在以下浏览器中测试： Supported browsers
  • （双击）点击 XCoHtml 的客户端区域，或者当工具获得焦点时按 **F1**，可以弹出使用该工具的快速参考指南。
  • 请确保在从工具粘贴任何内容后，已在 HTML 编辑器中保存了您的工作，这样下次进行 ID 重复检查时，就能基于 HTML 文件的最新版本。
  • 您也可以通过调用 AddHiddenStaff(staff) 函数，使用脚本将可扩展/可折叠内容添加到您的 HTML 页面。

历史

  • 2010 年 6 月 25 日：文章发布
© . All rights reserved.