zoukankan      html  css  js  c++  java
  • 仿Windows风格的网页右键菜单代码

    代码简介:

    仿Windows XP风格的右键菜单,带图标,视觉舒服。和XP系统的菜单很相似。

    代码内容:

    <HTML>
    <HEAD>
    <title>仿Windows风格的网页右键菜单代码_网页代码站(www.webdm.cn)</title>
    <script>
    <!--
    function contextMenu()
    {
    this.items   = new Array();
    this.addItem = function (item)
    {
    this.items[this.items.length] = item;
    }
    this.show = function (oDoc)
    {
    var strShow = "";
    var i;
    strShow = "<div id=\"rightmenu\" style=\"BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; 
    
    VISIBILITY: hidden; Z-INDEX: 10\">";
    strShow += "<table border=\"0\" height=\"";
    strShow += this.items.length * 20;
    strShow += "\" cellpadding=\"0\" cellspacing=\"0\">";
    strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\" width=\"2\"></td><td>";
    strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";
    strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";
    strShow += "</td><td width=\"2\"></td></tr>";
    strShow += "<tr><td bgcolor=\"#d0d0ce\"></td><td>";
    strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=3 cellspacing=0 bgcolor=\"#ffffff\">";
    oDoc.write(strShow);
    for(i=0; i<this.items.length; i++)
    {
    this.items[i].show(oDoc);
    }
    strShow = "</table></td><td></td></tr>";
    strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\"></td><td>";
    strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";
    strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";
    strShow += "</td><td></td></tr>";
    strShow += "</table></div>\n";
    oDoc.write(strShow);
    }
    }
    // menu Item object
    function contextItem(text, icon, cmd, type)
    {
    this.text = text ? text : "";
    this.icon = icon ? icon : "";
    this.cmd = cmd ? cmd : "";
    this.type = type ? type : "menu";
    this.show = function (oDoc)
    {
    var strShow = "";
    if(this.type == "menu")
    {
    strShow += "<tr ";
    strShow += "onmouseover=\"changeStyle(this, 'on');\" ";
    strShow += "onmouseout=\"changeStyle(this, 'out');\" ";
    strShow += "onclick=\"";
    strShow += this.cmd;
    strShow += "\">";
    strShow += "<td class=\"ltdexit\" width=\"16\">";
    if (this.icon == "")
    strShow += " ";
    else {
    strShow += "<img border=\"0\" src=\"";
    strShow += this.icon;
    strShow += "\" width=\"16\" height=\"16\" style=\"POSITION: relative\"></img>";
    }
    strShow += "</td><td class=\"mtdexit\">";
    strShow += this.text;
    strShow += "</td><td class=\"rtdexit\" width=\"5\"> </td></tr>";
    }
    else if (this.type == "separator")
    {
    strShow += "<tr><td class=\"ltdexit\"> </td>";
    strShow += "<td class=\"mtdexit\" colspan=\"2\"><hr color=\"#000000\" size=\"1\"></td></tr>";
    }
    oDoc.write(strShow);
    }
    }
    function changeStyle(obj, cmd)
    {
    if(obj) try {
    var imgObj = obj.children(0).children(0);
    if(cmd == 'on') {
    obj.children(0).className = "ltdfocus";
    obj.children(1).className = "mtdfocus";
    obj.children(2).className = "rtdfocus";
    if(imgObj)
    {
    if(imgObj.tagName.toUpperCase() == "IMG")
    {
    imgObj.style.left = "-1px";
    imgObj.style.top = "-1px";
    }
    }
    }
    else if(cmd == 'out') {
    obj.children(0).className = "ltdexit";
    obj.children(1).className = "mtdexit";
    obj.children(2).className = "rtdexit";
    if(imgObj)
    {
    if(imgObj.tagName.toUpperCase() == "IMG")
    {
    imgObj.style.left = "0px";
    imgObj.style.top = "0px";
    }
    }
    }
    }
    catch (e) {}
    }
    function showMenu()
    {
    var x, y, w, h, ox, oy;
    x = event.clientX;
    y = event.clientY;
    var obj = document.getElementById("rightmenu");
    if (obj == null)
    return true;
    ox = document.body.clientWidth;
    oy = document.body.clientHeight;
    if(x > ox || y > oy)
    return false;
    w = obj.offsetWidth;
    h = obj.offsetHeight;
    if((x + w) > ox)
    x = x - w;
    if((y + h) > oy)
    y = y - h;
    obj.style.posLeft = x + document.body.scrollLeft;
    obj.style.posTop = y + document.body.scrollTop;
    obj.style.visibility = "visible";
    return false;
    }
    function hideMenu()
    {
    if(event.button == 0)
    {
    var obj = document.getElementById("rightmenu");
    if (obj == null)
    return true;
    obj.style.visibility = "hidden";
    obj.style.posLeft = 0;
    obj.style.posTop = 0;
    }
    }
    function writeStyle()
    {
    var strStyle = "";
    strStyle += "<STYLE type=text/css>";
    strStyle += "TABLE {Font-FAMILY: \"Tahoma\",\"Verdana\",\"宋体\"; FONT-SIZE: 9pt}";
    strStyle += ".mtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand}";
    strStyle += ".mtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid}";
    strStyle += ".ltdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px 
    
    solid; CURSOR: hand}";
    strStyle += ".ltdexit {BACKGROUND-COLOR: #d0d0ce; BORDER-BOTTOM: #d0d0ce 1px solid; BORDER-TOP: #d0d0ce 1px solid; BORDER-LEFT: #d0d0ce 1px 
    
    solid}";
    strStyle += ".rtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px 
    
    solid; CURSOR: hand}";
    strStyle += ".rtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px 
    
    solid}";
    strStyle += "</STYLE>";
    document.write(strStyle);
    }
    function makeMenu()
    {
    var myMenu, item;
    var homepage_cmd = "this.style.behavior='url(#default#homepage)';this.setHomePage('/'); return false;";
    var favorate_cmd = "window.external.addFavorite('/','网页代码站); return false;";
    var viewcode_cmd = "window.location = 'view-source:' + window.location.href";
    myMenu = new contextMenu();
    item = new contextItem("网页代码站", "http://www.webdm.cn/images/20090919/home.gif", "top.location='/';", "menu");
    myMenu.addItem(item);
    item = new contextItem("设为主页", "http://www.webdm.cn/images/20090919/home.gif", homepage_cmd, "menu");
    myMenu.addItem(item);
    item = new contextItem("加入收藏夹", "http://www.webdm.cn/images/20090919/favadd.gif", favorate_cmd, "menu");
    myMenu.addItem(item);
    item = new contextItem("联系作者", "http://www.webdm.cn/images/20090919/mail.gif", "location.href='mailto:admin@webdm.cn'", "menu");
    myMenu.addItem(item);
    item = new contextItem("", "", "", "separator");
    myMenu.addItem(item);
    item = new contextItem("查看源代码", "http://www.webdm.cn/images/20090919/edit.gif", viewcode_cmd, "menu");
    myMenu.addItem(item);
    myMenu.show(this.document);
    delete item;
    delete myMenu;
    }
    function toggleMenu(isEnable)
    {
    if(isEnable)
    document.oncontextmenu = showMenu;
    else
    document.oncontextmenu = new function() {return true;};
    }
    writeStyle();
    makeMenu();
    document.onclick = hideMenu;
    document.oncontextmenu = showMenu;
    file://-->
    </script>
    </HEAD>
    <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
    <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="3">
    <tr><td valign="top">
    <div id="docBoard" style=" 100%">
    点击一下右键看看!
    </div>
    </td>
    </tr>
    </table>
    </body>
    </HTML>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/524d02f5-8f19-4f66-921a-485d84190c39.html

  • 相关阅读:
    _ 下划线 Underscores __init__
    Page not found (404) 不被Django的exception中间件捕捉 中间件
    从装修儿童房时的门锁说起
    欧拉定理 费马小定理的推广
    线性运算 非线性运算
    Optimistic concurrency control 死锁 悲观锁 乐观锁 自旋锁
    Avoiding Full Table Scans
    批量的单向的ssh 认证
    批量的单向的ssh 认证
    Corrupted MAC on input at /usr/local/perl/lib/site_perl/5.22.1/x86_64-linux/Net/SSH/Perl/Packet.pm l
  • 原文地址:https://www.cnblogs.com/webdm/p/1980386.html
Copyright © 2011-2022 走看看