分享
 
 
 

用XSLT生成网页菜单

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

【声明】本文已在《程序员》杂志发表。本站转载纯属个人学习和珍藏之举,绝无侵犯版权之嫌。如作者或相关出版商认为转载有何不妥,请来信告知,必立即删除!另,在此对原文的排版格式作了一些修改,但原文未改动一字。

【演示】观看本文最终结果演示页面请 单击这里

【正文】

一、 概述

一个好的导航 (navigation) 系统能增加网页的可读性和美观性,尤其是当网站内容比较丰富时,其逻辑结构更加需要用好导航系统来组织,使得网页读者知道其所在的位置以及还有那些内容可以浏览。导航系统中很重要的一个组成部分就是网页菜单。

普通 Windows 应用程序一般都有一个菜单系统,但是在网页中实现菜单要复杂一些。因为 Windows 操作系统中菜单是标准的用户界面接口,编制Windows 应用程序时,只需要描述菜单,菜单的显示和调用则由 Windows负责。在网页中则情况不同,HTML 没有菜单规范,网页开发者必须自己利用 DHTML 和 JavaScript 来实现菜单的显示和调用等功能。编制这样的程序还是比较复杂的。加上各种浏览器实现的DHTML 和 JavaScript 有差异,又使得原本已经复杂的网页菜单程序更加复杂。

本文将介绍用 XML 和 XSLT 来生成网页菜单的方法,它将使得网页开发者只需要描述菜单,而不用担心那些复杂的JavaScript程序,使得制作网页菜单比做 Windows 程序的菜单还要简单。

二、 菜单的定义

先从菜单的逻辑概念讲起。所谓菜单,包含了一组菜单项,每个菜单项,具有属性标题和连接,菜单项又可以包含一组子菜单项,从而形成一个嵌套的树状结构

树状结构的菜单

如图所示的结构很容易用 XML 来描述 (menu.xml)。

XML (eXtensible Markup Language,扩展标记语言) 是一种数据格式[1],它的特点是人们能非常容易读懂其中的含义,例如上面所示的菜单结构就一目了然。不仅仅是人能容易看懂 XML,计算机也能非常容易读懂其中的含义,这句话的含义是处理XML的程序已经非常普及,Windows下有MSXML[5],Java下有JAXP,即几乎所有平台上都有了XML处理程序[7][8]。并且处理XML有标准的办法,比如本文将用到的 XSLT (eXtensible Stylesheet Language Transformation, 扩展样式语言转换)就是将XML格式的数据转化到另外一种格式的标准方法[2][3][4]。

如果我们能用 XSLT 转化上述菜单的XML到网页上的菜单,那么制作网页菜单就比较简单了。因为编辑菜单的XML非常容易,普通的文本编辑器就可以了。

实现网页菜单的DHTML和JavaScript程序常常被制作成程序库的形式,称为网页菜单引擎。这些引擎都提供调用的接口,使得我们能够定制(customize)我们自己的菜单,但问题是定制菜单需要修改这些程序,比较麻烦也容易出错。

我们要解决的就是用XSLT根据菜单的XML,自动生成调用接口。

先让我们看看有哪些现成可用的网页菜单引擎。

三、 网页菜单引擎

因特网上有很多JavaScript资源网站,dynamicdrive.com 就是其中很优秀的一个。那里有许多很好的JavaScript程序可供下载使用,尤其是它的"Menus and Navigation Systems"分类中收集了不少网页菜单引擎。经过比较,我们选择使用"HV menu" (http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm)。 HV menu 的优点是既可以做水平排列的菜单,又可以做垂直排列的菜单;可以包含多层子菜单结构;可以自定义菜单的字体、颜色、对齐方式;以及支持IE4+, NS4, NS6+等多种浏览器。

"HV menu"的程序库为 menu_com.js 文件。它的接口规范是:

MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);

因此在网页中使用这个菜单引擎的 JavaScript 函数调用为:

<script>

Menu1=new Array('论坛首页','http://www.delphibbs.com', '', 4, 20, 120);

Menu2=new Array('论坛分类','', '', 8, 20, 120);

Menu3=new Array('我的论坛','', '', 5, 20, 120);

Menu4=new Array('富翁用户','', '', 3, 20, 120);

Menu5=new Array('大富翁系列','', '', 3, 20, 120);

Menu6=new Array('帮助','', '', 4, 20, 120);

Menu6_1=new Array('使用说明','tutorial.htm', '', 0, 20, 120);

Menu6_2=new Array('常见问题','faq.htm', '', 0, 20, 120);

Menu6_3=new Array('关于我们','aboutus.htm', '', 0, 20, 120);

Menu6_4=new Array('联系我们','contactus.htm', '', 0, 20, 120);

</script>

下面我们将用XSLT把菜单的XML转换为上述函数调用。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有