jQuery实现右键自定义菜单



72 286 96



特效描述:jQuery实现 右键自定义菜单,jQuery实现右键自定义菜单

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.contextmenu.css">
<link rel="stylesheet" href="css/jquery.contextmenu.css">

2. 引入JS

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="js/jquery.contextmenu.js"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="js/jquery.contextmenu.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
  <head>
  <title></title>
    <style type="text/css">
    body { margin: 0px; background-image: url(icons/pattern.png); }
	.m{ margin-right: auto; margin-left: auto; width: 500px; height: 500px; border: 1px dashed #666666; padding: 6px; margin-top: 50px; margin-bottom: 10px; background-color: #2E2E2E; }
    </style>
    <script>
      $(function() {
        $('#mythingy').contextPopup({
          title: 'My Popup Menu',
          items: [
            {label:'Some Item',     icon:'icons/shopping-basket.png',             action:function() { alert('clicked 1') } },
            {label:'Another Thing', icon:'icons/receipt-text.png',                action:function() { alert('clicked 2') } },
            {label:'Blah Blah',     icon:'icons/book-open-list.png',              action:function() { alert('clicked 3') } },
            null, // divider
            {label:'Sheep',         icon:'icons/application-monitor.png',         action:function() { alert('clicked 4') } },
            {label:'Cheese',        icon:'icons/bin-metal.png',                   action:function() { alert('clicked 5') } },
            {label:'Bacon',         icon:'icons/magnifier-zoom-actual-equal.png', action:function() { alert('clicked 6') } },
            null, // divider
            {label:'Onwards',       icon:'icons/application-table.png',           action:function() { alert('clicked 7') } },
            {label:'Flutters',      icon:'icons/cassette.png',                    action:function() { alert('clicked 8') } }
          ]
        });
      });
    </script>
  <meta charset="utf-8">
  <title>jquery右键菜单</title>
  </head>
  <body style="color:#ffffff; font-family:arial,sans-serif">
    <div id="mythingy" class="m">
      在此区域点击右键 
    </div>
<div style="text-align:center;clear:both">
</div>
  </body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 二级导航菜单 文字提示框 下拉导航菜单 提示框/弹出层 竖直导航菜单 layer 图标导航菜单 lightbox 固定导航菜单 侧边导航菜单 Tooltip工具提示框 树形导航菜单 浮动提示框 网址导航菜单 html5弹窗动画 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 弹出层拖动 窗口提示框 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到