登录
0800800.com
    
 频道栏目

 查询

标题 内容

 最新评论

 最新图库

 博客统计
  • 今日数:0
  • 文章数:587
  • 收藏数:4
  • 图片数:67
  • 评论数:94
  • 开设时间:2006-3-2
  • 更新时间:2019年12月8日

  •  网友正查看的网页

     友情链接


    2006-5-7 17:47:49   晴天 
    开新窗口访问该主题 自定义右键菜单

    程序代码 <body id="all" text="#000000" contextmenu="demo">
    <style>#all .menu { background-color: menu; cursor: hand; display: none; font-family: Arial;
    font-size: 9pt; color: 800000; left: 0px; overflow: hidden;
    position: absolute; top: 0px; border-left: 1px solid #efefef;
    border-right: 1px solid #505050; border-top: 1px solid #efefef;
    border-bottom: 1px solid #505050; margin: 0pt; padding: 3pt }
    #all .menu span { cursor: default; width: 100%; padding-left: 10pt }
    #all .menu span.selected { background-color: red; background-repeat: repeat; background-attachment:
    scroll; color: white; background-position: 0% }
    body { font-family: Verdana; color: #000080; font-size: 9pt }
    </style>
    <xml id=contextDef>
    <xmldata>
    <contextmenu id="demo">
    <item id="open" value="打开(open)"/>
    <item id="back" value="后退(back)"/>
    <item id="saveas" value="保存(save)"/>
    <item id="f5" value="刷新(refresh)"/>
    <item id="exit" value="关闭(shut)"/>
    <item id="print" value="打印(print)"/>
    <item id="viewsource" value="查看源代码"/>
    </contextmenu>
    </xmldata>
    </xml>
    <SCRIPT>
    // Define global script variables
    var bContextKey=false;


    // The fnDetermine function performs most of the work


    function fnGetContextID(el) {
    while (el!=null) {
    if (el.contextmenu) return el.contextmenu
    el=el.parentElement
    }
    return ""
    }


    function fnDetermine(){
    oWorkItem=event.srcElement;


    // Proceed if the desired keyboard key is pressed.
    if(bContextKey==true){
    // If the menu STATUS is false, continue.
    if(oContextMenu.getAttribute("status")=="false"){
    // Give the menu mouse capture so it can interact better with the page.
    oContextMenu.setCapture();


    // Relocate the menu to an offset from the mouse position.
    oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
    oContextMenu.style.left=event.clientX + document.body.scrollLeft + 1;


    oContextMenu.innerHTML="";
    // Set its STATUS to true.
    var sContext=fnGetContextID(event.srcElement)
    if (sContext!="") {
    fnPopulate(sContext)
    oContextMenu.setAttribute("status","true");
    event.returnValue=false;
    }
    else
    event.returnValue=true
    }
    }
    else{
    // If the keyboard key was not pressed and the menu status is true, continue.
    if(oContextMenu.getAttribute("status")=="true"){
    // If the object that was clicked has the menu for a parent and it has a COMPONENT attribute equal to "menuitem", continue.
    if((oWorkItem.parentElement.id=="oContextMenu")&&(oWorkItem.getAttribute("component")=="menuitem")){
    fnFireContext(oWorkItem)
    }


    // Reset the context menu, release mouse capture, and hide it.
    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).selectSingleNode('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 fnFireContext(oItem) {
    switch (oItem.menuid) {
    case "http1":
    location.href="http://www.51windows.com";
    break;
    case "viewsource":
    location.href="view-source:" + location.href
    break;
    case "back":
    history.back()
    break;
    case "saveas":
    document.execCommand('SaveAs')
    break;
    case "open":
    document.execCommand('open')
    break;
    case "print":
    document.execCommand('print')
    break;
    case "exit":
    location.href="javascript:window.close()";
    break;
    case "f5":
    location.href="javascript:location.reload()";
    break;
    default:
    alert("You Selected:\nID: " + oItem.menuid + "\nText: " + oItem.innerText)
    }
    }


    /* The chirp functions provide visual appeal. Notice that they are specific about only changing styles while the mouse is within the client window. This is because setCapture allows the mouse to pick up coordinate values on the window (not the user's screen) and this can throw an error if you try to get a property from an object that isn't recognized. */
    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=110;
    oContextMenu.style.height=document.body.offsetHeight/2;
    oContextMenu.style.zIndex=2;
    // Setup the basic styles of the context menu.
    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;
    }
    window.onload=fnInit;
    document.onclick=fnDetermine;
    </SCRIPT>
    <div class="menu" id="oContextMenu" onmouseout="fnChirpOff()" onmouseover="fnChirpOn()" status="false" style="width: 147; height: 49">
    </div>


    点击查看效果


    Admin 发表于 代码 | 评论(0) | 阅读(1713)


    评论

    您的昵称:
    文章内容:
        您可以使用[Ctrl+Enter]或[Alt+S]来提交