大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。
在C/S中可能非常easy实现右键弹框,但在B/S中直到今天我才搞定,小小得瑟一下。只一个html页面,导入相关的Easy-UI类库就能搞定,Easy-UI类库下载地址
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/icon.css" rel="stylesheet" type="text/css" /> <link href="css/demo.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.easyui.min.js" type="text/javascript"></script> </head> <body> <h2>点下右键试试</h2> <div style="margin:20px 0;"></div> <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">新建</div> <div> <span>打开</span> <div style="width:150px;"> <div><b>Word</b></div> <div>Excel</div> <div>PowerPoint</div> <div> <span>M1</span> <div style="width:120px;"> <div>sub1</div> <div>sub2</div> <div> <span>Sub</span> <div style="width:80px;"> <div onclick="javascript:alert('sub21')">sub21</div> <div>sub22</div> <div>sub23</div> </div> </div> <div>sub3</div> </div> </div> <div> <span>Window Demos</span> <div style="width:120px;"> <div data-options="href:'window.html'">Window</div> <div data-options="href:'dialog.html'">Dialog</div> <div><a href="http://www.jeasyui.com" target="_blank">EasyUI</a></div> </div> </div> </div> </div> <div data-options="iconCls:'icon-save'">保存</div> <div data-options="iconCls:'icon-print',disabled:true">Print</div> <div class="menu-sep"></div> <div>退出</div> </div> <script> $(function () { $(document).bind('contextmenu', function (e) { e.preventDefault(); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }); }); </script> </body> </html>
效果图例如以下:
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118189.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...