发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true以下是源代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jQuery右键菜单,上下文菜单-柯乐义</title> 5 <script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.8.2.min.js" 6 charset="utf-8"></script> 7 <style type="text/css" media="screen"> 8 html, body 9 { 10 height: 100%; 11 } 12 13 body 14 { 15 font-family: 'lucida grande' , tahoma, verdana; 16 font-size: 15px; 17 color: #555; 18 width: 700px; 19 margin: 0 auto; 20 padding: 30px 0; 21 } 22 23 h1, h2 24 { 25 color: #222; 26 } 27 28 ul 29 { 30 list-style-type: none; 31 list-style-position: inside; 32 margin: 0; 33 padding: 0; 34 } 35 36 /* all context menus have this class */ 37 .context-menu 38 { 39 -webkit-border-radius: 5px; 40 -moz-border-radius: 5px; 41 border-radius: 5px; 42 background-color: #f2f2f2; 43 border: 1px solid #999; 44 list-style-type: none; 45 margin: 0; 46 padding: 0; 47 } 48 .context-menu a 49 { 50 display: block; 51 padding: 3px; 52 text-decoration: none; 53 color: #333; 54 } 55 .context-menu a:hover 56 { 57 background-color: #666; 58 color: white; 59 } 60 61 /* second context menu */ 62 #context-menu-2 63 { 64 border: 1px solid #333; 65 background-color: orange; 66 margin: 0; 67 padding: 0; 68 } 69 70 71 .target1, .target2 li, .target3 li 72 { 73 background-color: #ddd; 74 color: #333; 75 border: 1px solid #c6c6c6; 76 padding: 5px; 77 } 78 79 .target1 80 { 81 width: 130px; 82 } 83 84 .target2 li, .target3 li 85 { 86 margin-top: 5px; 87 } 88 89 .target1 li.green, .target2 li.green, .target3 li.green 90 { 91 background-color: green; 92 color: #fff; 93 } 94 95 .big-font 96 { 97 font-size: 25px; 98 } 99 </style> 100 </head> 101 <body> 102 <h1> 103 jQuery右键菜单示例·柯乐义</h1> 104 <h2> 105 例 1</h2> 106 <p> 107 单个div的上下文菜单。 Note that the native context menu is disabled by passing {disable_native_context_menu: 108 true} as the options hash and last argument of the plugin. The native context menu 109 is enabled by default. 110 </p> 111 <div class="target1"> 112 右击我</div> 113 <h2> 114 例 2 - 使用鼠标左键点击</h2> 115 <p> 116 You can use the same syntax, but use any other selector to target multiple elements 117 with the same context menu. Notice the leftClick: true which indicates that it should 118 trigger on left click instead of right click. 119 </p> 120 <ul class="target2"> 121 <li>请左击我,右击没效果。</li> 122 <li>请左击我,右击没效果。</li> 123 <li>请左击我,右击没效果。</li> 124 </ul> 125 <a href ="http:///a/bjac/qjaheda1.htm" target="_blank">原文</a><br /> 126 <h2> 127 例 3 - 突出当前点击项</h2> 128 <p> 129 You can use the showMenu and hideMenu options to highlight the current context menu 130 target. 131 </p> 132 <ul class="target3"> 133 <li>右击我</li> 134 <li>右击我</li> 135 <li>右击我</li> 136 </ul> 137 <div> 138 本插件的不足支出就是不支持jquery1.9以上版本。</div> 139 <script src="http:///keleyi/phtml/jqplug/8/jquery.contextMenu.js" type="text/javascript" charset="utf-8"></script> 140 <script type="text/javascript" charset="utf-8"> 141 $(document).ready(function () { 142 //例1 143 $('.target1').contextMenu('context-menu-1', { 144 '右键菜单项1': { 145 click: function (element) { // element is the jquery obj clicked on when context menu launched 146 alert('点击了右键菜单项'); 147 }, 148 klass: "menu-item-1" // a custom css class for this menu item (usable for styling) 149 }, 150 '右键菜单项2': { 151 click: function (element) { alert('点击了第二项'); }, 152 klass: "second-menu-item" 153 }, '返回首页': { click: function (element) { location.href = "http://"; } } 154 }); 155 //例2 156 $('.target2 li').contextMenu('context-menu-2', { 157 '彩上绿色!': { 158 click: function (element) { // element is the jquery obj clicked on when context menu launched 159 element.addClass('green'); 160 }, 161 klass: "menu-item-1" // a custom css class for this menu item (usable for styling) 162 }, 163 '变大!': { 164 click: function (element) { element.addClass('big-font') }, 165 klass: "second-menu-item" 166 }, '打开原文': { click: function (element) { window.open("http:///a/bjac/qjaheda1.htm"); } } 167 }, { disable_native_context_menu: true, leftClick: true } 168 ); 169 //例3 170 $('.target3 li').contextMenu('context-menu-2', { 171 '变大!': { 172 click: function (element) { element.addClass('big-font') }, 173 klass: "menu-item-1" // a custom css class for this menu item (usable for styling) 174 } 175 }, { 176 disable_native_context_menu: true, 177 showMenu: function (element) { element.addClass('green'); }, 178 hideMenu: function (element) { element.removeClass('green'); } 179 }); 180 }); 181 </script> 182 </body> 183 </html>
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
div当滚动到页面顶部的时候固定在顶部实例代码
SmartMenus jQuery Website Menu Plugin ? Docs
<ul id="main-menu" class="sm sm-blue"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a> &...
jQuery和AngularJS的区别浅析
jQuery和AngularJS的区别浅析。1.首先,jQuery是不必要的,这里的工作完全不需要jQuery!不要总使用jquery ,甚至不要去引用它,它会阻止你前进,当我们回到这个问题—你知道你怎么在AngularJS中以jquer...
jQuery+CSS实现动态滑动菜单导航
WordPress 3.0 菜单功能支持二级菜单
根据以上操作步骤,可以打印出如下的 html:<ul id="nav"> <li><a href="">分类 1</a>...
鼠标移动延迟 hoverIntent.js使用
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);// cancel hoverIntent timer if it exists if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);// if hover...
列表的显示与收缩
</li> <li>jQuery 极大地简化了 JavaScript 编程。</li> <li> jQuery 很容易学很容易学习。</l...
12款非常棒的jquery下拉菜单&导航源码案例汇总下载
12款非常棒的jquery下拉菜单&导航源码案例汇总下载。下拉菜单或导航是我们在网站开发中不可或缺的网站元素之一,使用jquery可以制作...
封装dropdown模块(使用到之前写好的动画组件,封装下拉菜单)
微信扫码,在手机上查看选中内容