首頁 > 其他

轉載 用XML資料島建立操作功能表

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
 操作功能表就是使用者在頁面上單擊右鍵時所顯示的一組命令。微軟的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="功能表項目１" />
<item id="menu2" value="功能表項目２" />
</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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More