`
adong
  • 浏览: 35928 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

用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">
<xmldata>
<contextmenu id="demo">
<item id="viewsource" value="查看源文件"/>
<item id="back" value="返回上页"/>
</contextmenu>
<contextmenu id="demob">
<item id="menu1" value="菜单项1" />
<item id="menu2" value="菜单项2" />
</contextmenu>
</xmldata>
</xml>
在这里,带ID属性的<xml>根节点和<xmldata>节点是必须的[注意:在XML里大小写是敏感的]。一个contextmenu节点和它所包含的多个item节点定义了一个菜单。如果你要定义多个菜单,你只需定义多个contextmenu节点即可。contextmenu节点的id属性和页面中的相应元素相关联,item节点的id属性标明哪一个菜单项被我们选取。值得注意的是:在整个XML文档里,所有的ID属性不能重名。item节点的value值就是要在菜单里要显示的文字。
第二步:和HTML里的元素相关联
在上面的XML数据岛里,我们定义了两个菜单demo和demob,要想和HTML里的元素相关联,只需简单地把contextmenu的ID值和HTML元素的contextmenu属性相连接即可。
<P contextmenu="demo">这个段落显示demo菜单的内容</P>
<IMG SRC="usedemob.gif" contextmenu="demob">
第三步:编写点击菜单项的执行的操作
当我们单击菜单的每一个选项时,函数fnFireContext就被调用,并把代表所选菜单的一个对象参数传过来。为了处理单击的事件,只需编写简单的switch语句,根据不同的ID值执行不同的操作。例如:
function fnFireContext(oItem) {
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
default:
alert("您选的是:\n" + oItem.menuid + "\nText: " + 
oItem.innerText)
}
}
你可以根据自己的需要进行更改鼠标单击事件的操作。
第四步:定义菜单外观
定义外观只需使用样式单即可,下面我们给出完整的例子,你完全可以拷贝、粘贴来看到本例子的效果!![注意:浏览器必需是IE5+]。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.menu{ cursor: hand; 
display: none; 
position: absolute; 
top: 0; left: 0; 
overflow: hidden;
background-color: "#CFCFCF"; 
border: "1 solid"; 
border-top-color: "#EFEFEF"; 
border-left-color: "#EFEFEF"; 
border-right-color: "#505050"; 
border-bottom-color: "#505050"; 
font: 10pt 宋体;
margin:0pt;padding: 2pt
}

.menu SPAN {width: 100%; cursor: hand; padding-left: 10pt}
.menu SPAN.selected {background: navy; color:white; cursor: hand}
</style>

<xml id="contextDef">
<xmldata>
<contextmenu id="demo">
<item id="viewsource" value="查看源文件"/>
<item id="back" value="后退……"/>
<item id="meng" value="访问【孟宪会之精彩世界】"/>
<item id="calculate" value="执行 JavaScript 代码"/>
</contextmenu>
<contextmenu id="demob">
<item id="菜单项例子1" value="菜单项例子1" />
<item id="菜单项例子2" value="菜单项例子2" />
</contextmenu>
</xmldata>
</xml>
<SCRIPT>
// 定义全局变量
var bContextKey=false;
function fnGetContextID(el) {
while (el!=null) {
if (el.contextmenu) return el.contextmenu
el = el.parentElement
}
return ""
}

function fnDetermine(){
oWorkItem=event.srcElement;
//键盘上的菜单键被按下时。
if(bContextKey==true){
//如果菜单的“状态”为“false”
if(oContextMenu.getAttribute("status")=="false"){
//捕获鼠标事件,以便和页面交互。
oContextMenu.setCapture();
//根据鼠标位置,确定菜单位置。
oContextMenu.style.top=event.clientY + document.body.scrollTop + 
1;
oContextMenu.style.left=event.clientX + document.body.scrollLeft + 
1;
oContextMenu.innerHTML="";

//设定菜单的“状态”为“true”
var sContext = fnGetContextID(event.srcElement)
if (sContext!="") {
fnPopulate(sContext)
oContextMenu.setAttribute("status","true");
event.returnValue=false;
}
else
event.returnValue=true
}
}
else{
// 如果键盘菜单键没有按下,并且菜单的“状态”为“true”。
if(oContextMenu.getAttribute("status")=="true"){
if((oWorkItem.parentElement.id=="oContextMenu") && 
(oWorkItem.getAttribute("component")=="menuitem")){
fnFireContext(oWorkItem)
}
// 当鼠标离开菜单或单击菜单项后,重设菜单(隐藏) 
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
oContextMenu.innerHTML="";
event.returnValue=false;
}
}
}
function fnPopulate(sID) {
var str=""
var elMenuRoot = 
document.all.contextDef.XMLDocument.childNodes(0).selectSingle
Node('contextmenu[@id="' + sID + '"]')
if (elMenuRoot) {
for(var i=0;i<elMenuRoot.childNodes.length;i++)
str+='<span component="menuitem" menuid="' + 
elMenuRoot.childNodes[i].getAttribute("id") + 
'" id=oMenuItem' + i + '>' + 
elMenuRoot.childNodes[i].getAttribute("value") + 
"</SPAN><BR>"
oContextMenu.innerHTML=str;
oContextMenu.style.display="block";
oContextMenu.style.pixelHeight = oContextMenu.scrollHeight 
}
}

function fnChirpOn(){
if((event.clientX>0) &&(event.clientY>0) 
&&(event.clientX<document.body.offsetWidth) 
&&(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = "selected"
}
}
}
function fnChirpOff(){
if((event.clientX>0) && (event.clientY>0) && 
(event.clientX<document.body.offsetWidth) && 
(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = ""
}
}
}

function fnInit(){
if (oContextMenu) {
oContextMenu.style.width=180;
oContextMenu.style.height=document.body.offsetHeight/2;
oContextMenu.style.zIndex=2; 
//设置菜单样式 
document.oncontextmenu=fnSuppress;
}
}

function fnInContext(el) {
while (el!=null) {
if (el.id=="oContextMenu") return true
el = el.offsetParent
}
return false
}

function fnSuppress(){
if (!(fnInContext(event.srcElement))) { 
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
bContextKey=true;
}
fnDetermine();
bContextKey=false;
}

function javameng(){
window.open("http://lucky.myrice.com","_blank","width=400,height=
400,top=20,left=20")
}

function fnFireContext(oItem) { 
// 自定义上下文菜单项的功能
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "meng":
location.href="http://lucky.myrice.com"
break;
case "calculate":
javameng()
break;
default:
alert("你点击的菜单项是:\n\n\n" + oItem.menuid +"啊!!!")
}
}
</SCRIPT>

<BODY onload="fnInit()" onclick="fnDetermine()" bgcolor="#ccffcc">
<div status="false" onmouseover="fnChirpOn()" onmouseout="fnChirpOff()" id="oContextMenu" class="menu"></div>这里放你任意的其他的东西! ...<br>... 这里放你任意的其他的东西! ...<br>... 这里放你任意的其他的东西! ...<br><br>
<P contextmenu="demo">这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br>这里是利用上下文菜单的里子!你把鼠标移动到这里,然后单击鼠标又键,可以看到菜单内容!<br></p><p>你也可以把鼠标放到下面的图象上面,点击又键!<p>
<center><IMG SRC="http://lucky.myrice.com/javabk1.jpg" 
contextmenu="demob">
</body>
</html>
必须说明的是:你还可以自己定义菜单的无效[即变灰]的操作,也可以进一步定义更下一级的子菜单。这就只好留给你自己进行练习啦!:)
分享到:
评论

相关推荐

    xml数据岛例子

    这个例子可能展示如何在网页中使用XML数据岛来提高数据的动态性和可操作性。 首先,我们需要理解XML的基本结构。XML文档由元素构成,每个元素都有开始标签和结束标签,如 `&lt;element&gt;` 和 `&lt;/element&gt;`。元素可以...

    Android实现上下文菜单、下拉菜单、选项菜单代码

    在 showListView 方法中,我们使用 ArrayAdapter 将数据绑定到 ListView 中,并注册了 ListView 的上下文菜单。然后,在 onCreateContextMenu 方法中,我们设置了菜单的标题和内容。 二、下拉菜单 下拉菜单是一种...

    菜单 选项菜单 子菜单 上下文菜单

    创建XML文件`context_menu.xml`定义上下文菜单项,其结构与普通菜单相同。 总结来说,Android中的菜单机制提供了多种方式让用户与应用进行交互。了解和熟练掌握这些菜单类型及其用法,能帮助开发者设计出更直观、...

    XML基础实例 数据岛

    在本主题“XML基础实例 数据岛”中,我们将深入探讨XML的基础概念,以及如何使用XML创建数据岛,这是一个在网页中嵌入XML数据的技术。 1. **XML的基本结构** - XML文档由元素组成,元素是XML文档的构建块。每个...

    XML之数据岛

    随着现代Web开发标准的发展,XML数据岛的使用已经逐渐减少,更多的转向了基于RESTful API和JSON的数据交换。 6. **替代方案**:现在,许多现代Web应用程序倾向于使用JSON(JavaScript Object Notation)作为数据...

    xml “数据岛”技术全面资料

    1. **XML数据岛的概念**:在XML数据岛中,每个“岛”都包含了一组相关的XML文档或数据片段。这些岛屿可以根据业务需求、数据类型或者数据来源进行划分,使得数据的管理和分析更加有针对性。例如,一个企业可能有一个...

    XML的数据源对象(数据岛)源代码

    通过学习和应用XML数据岛源代码,开发者可以创建出更灵活、更具交互性的网页应用程序。在实际项目中,应根据需求选择合适的技术栈,如现代前端框架(React, Vue, Angular等)提供的数据绑定机制,它们在很多方面已经...

    Kotlin上下文菜单_kotlin_

    在`res/menu`目录下,创建一个XML文件(如`context_menu.xml`),定义上下文菜单的项目。每个`&lt;item&gt;`标签代表一个菜单项,可以设置其ID、标题、图标等属性。 ```xml android:id="@+id/action_edit" android:...

    android 选项菜单和上下文菜单

    上下文菜单则是在用户长按某个视图或数据项时弹出的菜单,它提供了与选中内容相关的操作。创建上下文菜单的步骤如下: 1. 在Activity或Fragment中注册监听器,例如在`onCreateView()`中。 ```java ...

    菜单,包括选项菜单,子菜单,上下文菜单

    本章将详细讲解菜单的三种主要类型:选项菜单、子菜单以及上下文菜单。 首先,选项菜单(Option Menu)是最常见的菜单类型,通常位于屏幕的顶部或底部,作为应用的主要功能入口。用户可以通过点击屏幕右上角的三道...

    WPF xml设置菜单

    这样,XML文件中的菜单结构会自动反映到界面上。 - 为了实现这一点,可能需要定义一个视图模型(ViewModel),并在其中包含一个`ObservableCollection&lt;MenuItem&gt;`类型的属性,这个属性将被绑定到`Menu`控件。 4. *...

    Android 之 上下文菜单、选项菜单、子菜单

    上下文菜单的创建和使用过程如下: - 在需要触发上下文菜单的视图上注册`registerForContextMenu(View view)`。 - 在`onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo)`方法...

    用C#与XML创建动态分层菜单.

    ### 使用C#与XML创建动态分层菜单 #### 引言 随着XML技术在软件开发领域的广泛应用,其作为数据交换和存储格式的价值日益凸显。本文详细介绍了一种利用C#编程语言、XML数据格式以及Microsoft .NET框架来创建动态...

    XML数据岛技术及应用.pdf

    XML数据岛技术是一种将XML(eXtensible Markup Language)文档嵌入到HTML(HyperText Markup Language)页面中的方法,以此实现数据的显示和处理。XML作为一种结构化数据语言,相比HTML具有更强的结构和语义特性,...

    C#使用Xml动态创建菜单项

    在本文中,我们将深入探讨如何使用C#语言和XML文件动态创建菜单项。这个功能对于构建灵活、可扩展的用户界面特别有用,因为通过修改XML文档,我们可以轻松地更改应用程序的菜单结构,而无需重新编译代码。 首先,...

    js操作xml的数据岛技术

    JavaScript操作XML的数据岛技术是一种在Web开发中处理结构化数据的方法。数据岛是将XML数据嵌入HTML文档中的一种方式,使得JavaScript可以直接访问和操作这些数据,而无需通过服务器进行额外的请求。这一技术在早期...

    上下文菜单(xml).mp4

    上下文菜单(xml).mp4

    20081128XML数据岛[定义].pdf

    XML数据岛技术的应用场景广泛,比如动态显示和更新网页上的表格、列表或其他数据展示组件。这种方式减少了网络传输的数据量,提高了用户体验,尤其是在移动设备或带宽有限的环境中。 总的来说,XML数据岛是Web开发...

    Android-实验课09-上下文菜单-对话框练习.rar

    2. **定义菜单布局**: 在`res/menu`目录下创建XML文件,定义上下文菜单的项目。 3. **重写回调方法**: 实现`onCreateContextMenu()`方法,加载菜单布局,并可以在此设置菜单项的图标、标题等。 4. **处理用户选择**:...

    A0246上下文菜单ContextMenu1

    - **创建上下文菜单**:通过重写`Activity`或`Fragment`的`onCreateContextMenu`方法来构建菜单项。例如,可以使用`MenuInflater`的`inflate`方法将XML布局文件中的菜单项填充到`ContextMenu`中。 - **注册上下文...

Global site tag (gtag.js) - Google Analytics