jQuery easyUI--选项卡右键菜单

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>选项卡右键菜单</title><script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script><script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script><link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" /><link rel="stylesheet" href="../js/easyui/themes/icon.css" /><!-- 引入ztree --><script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/><script type="text/javascript">// 页面加载后执行$(function(){// 1、 进行ztree菜单设置var setting = {data: {simpleData: {enable: true // 支持简单json数据格式}},callback: {onClick : function(event, treeId, treeNode, clickFlag){var content = '<div style="width:100%;height:100%;overflow:hidden;">'+ '<iframe src="'+ treeNode.page+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';// 没有page树形菜单，不打开选项卡if(treeNode.page != undefined && treeNode.page != ""){// 如果选项卡已经打开，选中if($("#mytabs").tabs('exists',treeNode.name)){// 选中选项卡$("#mytabs").tabs('select',treeNode.name);}else{// 如果没有打开，添加选项卡$("#mytabs").tabs('add',{title:treeNode.name,content: content,closable :true});}}}}};// 2、提供ztree树形菜单数据var zNodes = [{id:1,pId:0,name:"父节点一"},{id:2,pId:0,name:"父节点二"},{id:11,pId:1,name:"子节点一"},{id:12,pId:1,name:"子节点二"},{id:13,pId:2,name:"你我他学习吧",page:"http://www.itcast.cn"},{id:14,pId:2,name:"百度",page:"https://www.baidu.com"}];// 3、生成菜单$.fn.zTree.init($("#baseMenu"), setting, zNodes);// 对选项卡注册 右键事件$("#mytabs").tabs({onContextMenu: function(e, title,index){// 阻止默认菜单显示e.preventDefault();// 显示自定义右键菜单$("#mm").menu('show',{left : e.pageX,top : e.pageY});}});});</script></head><body class="easyui-layout"><div data-options="region:'north',title:'你我他学习吧管理系统'" style="height: 100px;">北部区域</div><div data-options="region:'west',title:'菜单导航'" style="width: 180px;"><!--折叠面板 --><div class="easyui-accordion" data-options="fit:true"><div data-options="title:'基础菜单'"><!-- 通过ztree 插件，制作树菜单 --><ul id="baseMenu" class="ztree"></ul></div><div data-options="title:'系统菜单'">面板二</div></div></div><div data-options="region:'center'"><!-- 选项卡面板--><div id="mytabs" class="easyui-tabs" data-options="fit:true"><div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div>               <div data-options="title:'选项卡面板二'">选项卡面板二</div></div></div><div data-options="region:'east'" style="width: 80px;">东部区域</div><div data-options="region:'south'" style="height: 80px;">南部区域</div><!-- 菜单 初始化都是隐藏的--><div id="mm" class="easyui-menu" style="width:120px;"><div>关闭当前窗口</div><div>关闭其它窗口</div><div class="menu-sep"></div>  <!-- 分隔线 --><div data-options="iconCls:'icon-cancel'">关闭全部窗口</div></div></body>
</html>

jQuery easyUI--选项卡右键菜单相关推荐

JQuery之ContextMenu(右键菜单)
JQuery之ContextMenu(右键菜单) 插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextme ...
jQuery EasyUI 选项卡面板tabs使用实例精讲
1. 对选项卡面板区域 div 设置 class="easyui-tabs" 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) ...
创建easyui的右键菜单（onRowContextMenu）
第一步: 在HTML页面中设置一个隐藏的菜单(前提是已经使用封装的Easyui) 代码: <div id="contextMenu_jygl" class="eas ...
基于jQuery的鼠标右键菜单
对于自制的鼠标右键功能,我们应该考虑哪些因素呢? 一.涉及因素 1.阻止默认鼠标右键事件. 3.右键事件,使菜单出现. 2.考虑右键菜单出现的位置,是否超出窗口. 4.点击窗口任意位置,菜单消失. 二 ...
easyUI 绑定右键菜单在数据行上显示
easyUI的显示数据的div都有一个样式,如下图所有的表格都有一个datagrid-cell的样式那么这个时候我们就可以利用jquery来做时间的绑定了下面是主要的js代码: /*绑定右键*/$ ...
JSP/SERVLET（6）——Jquery EasyUI 选项卡Tabs的使用方法
以下是easyUI的tabs的简单实用介绍. var e =$('#main').tabs('exists','accordion'); if(e==true){ $('#main').tab ...
jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年...
http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head> <meta http-equiv=&quo ...
easyui打开新的选项卡_Jquery Easyui选项卡组件Tab使用详解（10）
本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 tab1 tab2 tab3 JS调用加载 tab1 tab2 tab3 $(f ...
java 树右键菜单_jQuery实现自定义右键菜单的树状菜单效果
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单, ...

jQuery easyUI--选项卡右键菜单

jQuery easyUI--选项卡右键菜单相关推荐

最新文章

热门文章