以文本方式查看主题 - 中文XML论坛 - 专业的XML技术讨论区 (http://bbs.xml.org.cn/index.asp) -- 『 DTD/XML Schema 』 (http://bbs.xml.org.cn/list.asp?boardid=23) ---- 用XML数据岛创建上下文菜单 (http://bbs.xml.org.cn/dispbbs.asp?boardid=23&rootid=&id=8420) |
-- 作者:npuhetao -- 发布时间:6/21/2004 9:56:00 PM -- 用XML数据岛创建上下文菜单 上下文菜单就是用户在页面上单击右键时所显示的一组命令。微软的MSDN有一个简单的例子说明了怎样建立自定义菜单。这里,我们将通过XML的数据岛来快速创建自定义的上下文菜单。XML数据岛就是存在于HTML文档中的XML数据的一部分。通过XML文档对象模型[XML document object model (DOM)],我们可以轻松地参考和引用XML里的内容。我们这里利用XML数据岛来存储上下文菜单的多个定义,其中的每一个定义都可以和文档中的任一元素相联系。在没有定义的地方,将显示默认的菜单。 Internet Explorer 5.0首次提出对上下文菜单和数据岛的支持,我们的例子在除Internet Explorer 5.0及以上的浏览器里将自动被忽略。因此,如果你使用的浏览器不是Internet Explorer 5.0及以上的版本,你将看不到任何效果,只能看到浏览器的默认菜单。如果你使用的是Internet Explorer 5.0及以上的浏览器,你可以在页面上点击鼠标右键来看效果。注意:点击图象和文字将显示不同的菜单。下面我们进行分析: 第一步:定义菜单 定义菜单是在文档XML数据岛里的进行的,你只需简单地在HTML文档的HEAD部分包含XML文件即可。例如:可以定义如下: <xml id="contextDef"> 在这里,带ID属性的<xml>根节点和<xmldata>节点是必须的[注意:在XML里大小写是敏感的]。一个contextmenu节点和它所包含的多个item节点定义了一个菜单。如果你要定义多个菜单,你只需定义多个contextmenu节点即可。contextmenu节点的id属性和页面中的相应元素相关联,item节点的id属性标明哪一个菜单项被我们选取。值得注意的是:在整个XML文档里,所有的ID属性不能重名。item节点的value值就是要在菜单里要显示的文字。 第二步:和HTML里的元素相关联 在上面的XML数据岛里,我们定义了两个菜单demo和demob,要想和HTML里的元素相关联,只需简单地把contextmenu的ID值和HTML元素的contextmenu属性相连接即可。 第三步:编写点击菜单项的执行的操作 当我们单击菜单的每一个选项时,函数fnFireContext就被调用,并把代表所选菜单的一个对象参数传过来。为了处理单击的事件,只需编写简单的switch语句,根据不同的ID值执行不同的操作。例如: function fnFireContext(oItem) { 你可以根据自己的需要进行更改鼠标单击事件的操作。 |
-- 作者:npuhetao -- 发布时间:6/21/2004 9:57:00 PM -- 第四步:定义菜单外观 定义外观只需使用样式单即可,下面我们给出完整的例子,你完全可以拷贝、粘贴来看到本例子的效果!![注意:浏览器必需是IE5+]。 <html> <style> .menu SPAN {width: 100%; cursor: hand; padding-left: 10pt} <xml id="contextDef"> <SCRIPT> // 定义全局变量 function fnGetContextID(el) { function fnDetermine(){ //键盘上的菜单键被按下时。 //如果菜单的“状态”为“false” //捕获鼠标事件,以便和页面交互。 //根据鼠标位置,确定菜单位置。 //设定菜单的“状态”为“true” // 如果键盘菜单键没有按下,并且菜单的“状态”为“true”。 // 当鼠标离开菜单或单击菜单项后,重设菜单(隐藏) oContextMenu.style.display="none"; function fnChirpOn(){ function fnInit(){ //设置菜单样式 function fnInContext(el) { function fnSuppress(){ fnDetermine(); function javameng(){ function fnFireContext(oItem) { // 自定义上下文菜单项的功能 <BODY onload="fnInit()" onclick="fnDetermine()" bgcolor="#ccffcc"> 必须说明的是:你还可以自己定义菜单的无效[即变灰]的操作,也可以进一步定义更下一级的子菜单。这就只好留给你自己进行练习啦!:) |
-- 作者:centipede -- 发布时间:6/30/2004 8:21:00 PM -- 很详细,好帖! |
-- 作者:ty44092003 -- 发布时间:9/2/2004 2:54:00 PM -- 为什么浏览器一定要用IE5 |
-- 作者:zhangsf -- 发布时间:9/2/2004 10:03:00 PM -- 打包,收走 |
-- 作者:hanhan27 -- 发布时间:9/30/2004 8:49:00 PM -- hao |
-- 作者:moon1128 -- 发布时间:10/20/2004 9:43:00 AM -- 赶快去试试。 |
-- 作者:mashimaro -- 发布时间:10/21/2004 12:18:00 AM -- 我用的是IE6,好象不行。 |
W 3 C h i n a ( since 2003 ) 旗 下 站 点 苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》 |
62.500ms |