车辆维修档案管理制度:"DXML" Redux：从 XML 创建动态的 HTML菜单

来源：百度文库 编辑：九乡新闻网 时间：2024/05/12 08:23:06

"DXML" Redux：从 XML 创建动态的 HTML 菜单

George Young
Microsoft Corporation

请下载本文的源代码（压缩文件，4.80K）

在上个月的专栏中, 我们讨论了使用 XSL、层叠样式表 (CSS) 和 JScript(R)，从 XML 文件中创建动态 HTML(DHTML) 目录 (TOC)。我们从链接列表和相关的标签着手，结果获得了一个有助于站点浏览的可折叠 TOC。

在这个月的专栏中，我们将 XML 数据转换成 DHTML 菜单，就像在 MSDN Online 中所使用的菜单，在这一过程中有望进一步说明 XML 所提供的演示提取功能的优点。

这里的代码不是 MSDN Online 中所使用的实际菜单代码的严格再现。如果需要您提交 HTML 的浏览器不是 Internet Explorer 4.0 或其更新版本，我们将创建低级 HTML 的练习留给您，但所用的技术是一样的。


图 1. DHTML 菜单

如果您正在用 Internet Explorer 4.0 或更新版本阅读这篇文档, 您就可以查看 DHTML 菜单。

我们在这个月的讨论中假设您已经熟悉了上个月的专栏所论及的关于 XML 和 XSL 的基本知识。

在 XML 中保存 TOC

这里又用到了我们保存在 XML 中的站点浏览数据。 因为上个月我们对 XML 进行了详细论述, 所以这里我们只列出文件的清单，然后继续进行讨论。

列表 1：webdev.xml

对象/workshop/author/dhtml/reference/objects.asp属性/workshop/author/dhtml/reference/properties.asp方法/workshop/author/dhtml/reference/methods.asp事件/workshop/author/dhtml/reference/events.asp集合/workshop/author/dhtml/reference/collections.asp属性/workshop/author/css/reference/attributes.asp长度单位/workshop/author/css/reference/lengthunits.asp颜色表/workshop/author/dhtml/reference/colors/colors.asp开发人员指南/xml/guide/default.asp对象/xml/xmldom/scriptref/XMLDOM_Objects.asp开发人员指南/xml/xsl/tutorials/xsl-overview.asp元素/xml/xsl/reference/XSLElements.asp方法/xml/xsl/reference/xslmethods.asp模式语法/xml/xsl/reference/XSLPatternSyntax.asp

使用 XSL 样式表生成菜单的“框架”HTML

DHTML 菜单由两种组件组成：第一种是菜单栏，扩展了页宽度并显示主 TOPICS 标题；第二种是单个菜单本身，当鼠标在给定 TOPICS 标题上方滑动时，它们会自动弹出。我们将在 XSL 样式表中创建这两种组件。

列表 2：menus.xsl

tdMenuBarItem|
divMenu

生成菜单栏

首先，我们输出一个

，它的唯一目的是将背景颜色横跨整个页面宽度。 

  
...

然后，在

内，我们输出一个 ，它的单元格 (
) 将包含 TOPICS 标题。

  ...

在

内,我们使用 xsl:for-each 为至少包含一个 TOPIC 的每一 TOPICS 元素创建 ...

最后，我们创建以“|”作为内容的

创建好菜单栏后，我们现在将注意力转到单个菜单。

生成单个菜单

由至少带有一个 TOPIC 子元素的 TOPICS 元素表征的每个菜单是一个

。我们赋予每一个
“clsMenu”类和一个由相链接的字符串“divMenu”组成的特有的 ID 以及 TOPICS TYPE 属性，很像以上我们对菜单栏所进行的操作。 

  
divMenu...

在每个菜单

内部，我们输出一个空的
，对于后者我们设置为“clsMenuSpacer”类，用于在菜单栏和展开的菜单之间提供空间。

      
...

最后，对于菜单中的每一菜单项，我们输出一个

，每一个都带有指向独立的 TOPIC 的链接。我们利用 TOPIC 的 HREF 子元素创建 ，并将 TOPIC 的 元素用作链接的 innerText。</p><pre class="clsCode"> <xsl:for-each select="TOPIC"><DIV><A><xsl:attribute name="HREF">http://msdn.microsoft.com<xsl:value-of select="URL" /></xsl:attribute><xsl:value-of select="TITLE" /></A></DIV></xsl:for-each></pre><p>以上是 DHTML 菜单的框架 HTML，我们现在将添加菜单的外观和感觉。</p><h2>使用脚本弹出（和退出）菜单</h2><p>我们的 menus.js 脚本包含打开和关闭菜单的两个函数，为 <strong>onmouseover()</strong> 和 <strong>onmouseout()</strong> 事件提供了两个文档级的事件处理程序函数，并为跟踪当前所打开的菜单（如果存在的话）提供了一个“全局”变量。</p><p><strong>eOpenMenu</strong> 初始化时设为空，并且被指定一个指针，在相关菜单打开时指向菜单的 <DIV>。</p><pre class="clsCode">var eOpenMenu = null;</pre><p>由我们的 <strong>document.onmouseouver()</strong> 事件处理程序调用 <strong>OpenMenu()</strong>，后者在调用时将获取两个参数：sourceElement 和一个指向要显示的 <DIV> 的指针。 菜单 <DIV> 在水平和垂直两个方向上相对于 sourceElement 进行定位，并且其可见性样式属性设为“可见”。<strong>eOpenMenu</strong> 变量成为指向这一 <DIV> 的指针。</p><pre class="clsCode">function OpenMenu(eSrc,eMenu){eMenu.style.left = eSrc.offsetLeft + divMenuBar.offsetLeft;eMenu.style.top = divMenuBar.offsetHeight + divMenuBar.offsetTop;eMenu.style.visibility = "visible";eOpenMenu = eMenu;}</pre><p><strong>CloseMenu()</strong>, 同样由 <strong>document.onmouseover()</strong> 调用，将获取一个指向要关闭的菜单 <DIV> 的引用。该函数通过将 <strong>eOpenMenu</strong> 设置为空，将 <DIV> 的可见性设为“隐藏”，并删除对 <DIV> 的全局引用。</p><pre class="clsCode">function CloseMenu(eMenu){eMenu.style.visibility = "hidden";eOpenMenu = null;}</pre><p><strong>document.onmouseover()</strong> 事件处理程序是发生操作的地方。它负责确定鼠标滑过的元素，并决定要进行的操作。</p><p>如果鼠标滑过的是“clsMenuItem”类元素（表示其中的一个菜单栏标题），我们为其设置了一个突出显示的颜色。我们通过生成 ID 来确认相关的菜单是否存在。如果所打开的菜单不是与当前标题相关的菜单，我们将关闭该菜单，再打开相关菜单。</p><p>否则，如果我们没有用鼠标滑过菜单栏标题，我们将检查以下三个条件，以确认是否应该关闭菜单：有一个菜单已经打开；打开的菜单中没有包含我们的 sourceElement；菜单栏也没有包含我们的 sourceElement。</p><pre class="clsCode">function document.onmouseover(){var eSrc = window.event.srcElement;if ("clsMenuBarItem" == eSrc.className){eSrc.style.color = "moccasin";var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];if (eOpenMenu && eOpenMenu != eMenu){CloseMenu(eOpenMenu);}if (eMenu){OpenMenu(eSrc,eMenu);}}else if (eOpenMenu && !eOpenMenu.contains(eSrc) && !divMenuBar.contains(eSrc)){CloseMenu(eOpenMenu);}}</pre><p><strong>document.onmouseout()</strong> 事件处理程序只是负责在鼠标退出后，将菜单项标题的字体颜色重置为默认色。</p><pre class="clsCode">function document.onmouseout(){var eSrc = window.event.srcElement;if ("clsMenuBarItem" == eSrc.className){eSrc.style.color = "";}}</pre><h2>使用 CSS 在菜单弹出前隐藏菜单</h2><p>最后，我们将讲一讲 CSS 文件。我们使用 CSS，通过设置背景颜色和不同的字体和文字属性，设置 <DIV> 和 <TABLE> 的格式，使其看上去像菜单。初始化时，所有菜单 <DIV>(DIV.clsMenu) 的可见性属性均设置为“隐藏”，这样，只有我们在脚本中进行了显式操作，它们才会出现在页中。</p><h4>列表 3：list.css</h4><pre class="clsCode">DIV#divMenuBar { background-color:#6699CC; }TABLE#tblMenuBar TD {font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default;}TABLE#tblMenuBar TD.clsMenuBarItem { font-weight:bold; cursor:hand; }DIV.clsMenu {font-size:90%; background-color:#6699CC;position:absolute; visibility:hidden; width:130px;padding:5px 5px 5px 8px; border-top:1 white solid;}DIV.clsMenu A { text-decoration:none; color:white; font-weight:bold; }DIV.clsMenu A:hover { color:moccasin; }</pre><p>这就是我们针对“DXML”菜单所讲述的内容。如果您还没有进行下载的话，请一定要下载本文的源代码，并进行测试。下个月，我们将开发更多的动态 HTML 窗口组件，以供您的 Web 应用程序使用。<h2>详细信息</h2><p>如果要详细了解由 XML 创建 DHTML 的方法或 XML 其他有趣的用途，请访问 MSDN Online Web Workshop(英文) 的 XML(英文) 部分，最好能重点查看这份范例中突出显示的链接。并且一定要阅读我的同事 Charlie Heinemann 在 MSDN Online Voices 上定期推出的 Extreme XML 专栏。</p><p>有关创建 DHTML 菜单的详细信息，请参阅 Web Workshop 上有关这一主题的以下两篇文章：“Build a Pop-up Menu Using Dynamic HTML and JavaScript: Part II ”以及“A Tour of the Code -- NavBar: Dynamic Menu Generation”。</p><p><em><strong>George Young</strong> 是 Microsoft 的 Windows 站点的开发主管，以前曾在 Site Builder Network 站点从事开发工作。在他有空时，喜欢用 Windows 媒体播放器收听墨西哥广播电台的节目，也常开着他的宝贝卡迪车往返于新奥尔良和华盛顿之间的 Redmond。<em><p><h4>已存档的代码角(Code Corner) 专栏</h4></em></em></div> <div class="zuoye-list-a"> <a href="/article/jnrxpx">"DXML" Redux：从 XML 创建动态的 HTML菜单</a> <a href="/article/jozvax">掌握XML系列(四)---创建格式良好的XML文档</a> <a href="/article/jrbvkd">VB 用API创建动态菜单示例（含子菜单且能响应事件）</a> <a href="/article/jozvai">掌握XML系列(三)---创建格式良好的饿XML文档 续编</a> <a href="/article/jolynr">HTML操作XML数据岛，数据绑定</a> <a href="/article/jqctzd">动态HTML ---DHTML</a> <a href="/article/jpgyvz">xml的createNode方法</a> <a href="/article/jmuksw">jQuery+CSS 打造动态下滑菜单效果</a> <a href="/article/jpusag">jQuery+CSS实现动态滑动菜单导航</a> <a href="/article/jnnmil">web.xml的配置1</a> <a href="/article/jlvuez">学习笔记——如何创建HTML表格</a> <a href="/article/jlvwgj">学习笔记——如何创建HTML表格 1</a> <a href="/article/jppuqa">关于下发《全市创建工作动态督查监管制度》的通知</a> <a href="/article/jrcwxo">mapx动态创建图层:Mapx添加永久图层的方法 疯狂代码！</a> <a href="/article/jnsoub">动态创建视图时候 AfxCheckDialogTemplate执行出错</a> <a href="/article/jrnxxp">用数据有效性创建动态下拉列表</a> <a href="/article/jlpbdt">营养师的家宴菜单</a> <a href="/article/jlpcaa">营养师的家宴菜单</a> <a href="/article/jmahqz">冬末春初的食补菜单</a> <a href="/article/jnliyp">血的食疗菜单</a> <a href="/article/jnmytm">女人的营养菜单</a> <a href="/article/jpmllc">补血的食疗菜单</a> <a href="/article/jppodo">菜单居中的方法</a> <a href="/article/jqojpi">单反相机菜单的调节</a> </div> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="footerlinks"> <div class="panel panel-default"> <div class="panel-heading">相关问题</div> <div class="panel-body"> <a class="btn btn-default" href="/article/jmtgzs" title="瀑布和绿洲的上游">瀑布和绿洲的上游</a> <a class="btn btn-default" href="/article/jmtgzt" title="股票图解教程2">股票图解教程2</a> <a class="btn btn-default" href="/article/jmtgzu" title="英语语法大全000">英语语法大全000</a> <a class="btn btn-default" href="/article/jmtgzv" title="谁是唯一没有同共产党打过仗的国民党高级将领？">谁是唯一没有同共产党打过仗的国民党高级将领？</a> <a class="btn btn-default" href="/article/jmtgzw" title="人生不可拒绝的十种意境{图文}">人生不可拒绝的十种意境{图文}</a> <a class="btn btn-default" href="/article/jmtgzx" title="她就是女神，娶回家少活10年">她就是女神，娶回家少活10年</a> <a class="btn btn-default" href="/article/jmtgzy" title="解放军又配新利器 威力足以摧毁各型主战坦克">解放军又配新利器 威力足以摧毁各型主战坦克</a> <a class="btn btn-default" href="/article/jmtgzz" title="圣经22">圣经22</a> <a class="btn btn-default" href="/article/jmthaa" title="巧用boll布林通道寻觅波段买点">巧用boll布林通道寻觅波段买点</a> <a class="btn btn-default" href="/article/jmthab" title="隋唐五代书法6">隋唐五代书法6</a> <a class="btn btn-default" href="/article/jmthac" title="fdfdfd碘缺乏病健康教育教案">fdfdfd碘缺乏病健康教育教案</a> <a class="btn btn-default" href="/article/jmthad" title="唐卡藝術欣賞唐卡藝術">唐卡藝術欣賞唐卡藝術</a> <a class="btn btn-default" href="/article/jmthae" title="中国式斗争：一贴省你二十年f">中国式斗争：一贴省你二十年f</a> <a class="btn btn-default" href="/article/jmthaf" title="十二剂闺房秘方1">十二剂闺房秘方1</a> <a class="btn btn-default" href="/article/jmthag" title="重要的医学常识 ---">重要的医学常识 ---</a> <a class="btn btn-default" href="/article/jmthah" title="瘦脸操加瘦脸霜简单六步按摩法 一周变小脸">瘦脸操加瘦脸霜简单六步按摩法 一周变小脸</a> <a class="btn btn-default" href="/article/jmthai" title="牛人们喜欢用骆驼尿洗头牛粪刷牙">牛人们喜欢用骆驼尿洗头牛粪刷牙</a> <a class="btn btn-default" href="/article/jmthaj" title="职场心理：女性如何赢得他人信任">职场心理：女性如何赢得他人信任</a> <a class="btn btn-default" href="/article/jmthak" title="圣经23">圣经23</a> <a class="btn btn-default" href="/article/jmthal" title="**养生的三个层次：下士养身，中士养气，上士养心">**养生的三个层次：下士养身，中士养气，上士养心</a> <a class="btn btn-default" href="/article/jmtham" title="888888 [转帖]">888888 [转帖]</a> <a class="btn btn-default" href="/article/jmthan" title="花鱼共养是否需要喂食？">花鱼共养是否需要喂食？</a> <a class="btn btn-default" href="/article/jmthao" title="纳粹“婴儿师”：标志奶瓶 作战勇猛几乎全员阵亡">纳粹“婴儿师”：标志奶瓶 作战勇猛几乎全员阵亡</a> <a class="btn btn-default" href="/article/jmthap" title="电脑使用技巧大全《绝对珍藏》">电脑使用技巧大全《绝对珍藏》</a> <a class="btn btn-default" href="/article/jmthaq" title="中国农业数字图书馆--农产品增值小技巧">中国农业数字图书馆--农产品增值小技巧</a> <a class="btn btn-default" href="/article/jmthar" title="你知道如何爱一个女人吗?--">你知道如何爱一个女人吗?--</a> <a class="btn btn-default" href="/article/jmthas" title="愚人节整蛊专家">愚人节整蛊专家</a> <a class="btn btn-default" href="/article/jmthat" title="50年代最惹火时尚招贴画">50年代最惹火时尚招贴画</a> <a class="btn btn-default" href="/article/jmthau" title="大家别乐了，日本核恐慌根本只是个骗局">大家别乐了，日本核恐慌根本只是个骗局</a> <a class="btn btn-default" href="/article/jmthav" title="美专家呼吁加强网络攻击问题讨论的公开性-搜狐军事频道">美专家呼吁加强网络攻击问题讨论的公开性-搜狐军事频道</a> <a class="btn btn-default" href="/article/jmthaw" title="阴阳相隔情相依">阴阳相隔情相依</a> </div> </div> </div> <div class="copy-right"> <p>九乡新闻网，客观、专业、权威的知识性互动百科全书。</p></div> </div> </div> <!--mip 运行环境--> <mip-stats-baidu> <script type="application/json"> { "token": "97cc1851a34f9e233119ff36ecf54098", "_setCustomVar": [1, "login", "1", 2], "_setAutoPageview": [true] } </script> </mip-stats-baidu> <script src="https://c.mipcdn.com/static/v1/mip.js"></script> <!--分享组件 代码--> <script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script> <!--百度统计组件 代码--> <script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script> </body> </html>
，为它指定“clsMenuBarItem”类。这样我们就能够识别每一个标题，并将其与菜单相关联，我们使用xsl:attribute/A> 赋予 以字符串“tdMenuMarItem”表征的 ID，我们使用 xsl:value-of 将 TOPICS 元素的 TYPE 属性与其相链接。例如，我们的 XML 元素 将获取以“tdMenuBarItemCSS”作为 ID 的 。
tdMenuBarItem，从而添加一条竖线分隔每一标题。我们通过与 XSL context()和 end()方法一同使用 xsl:if，以检查当前的 TOPICS 元素是否是最后一个元素，从而避免在最后一个 TOPICS 元素中添加竖线。
|