JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现
2013-07-04 14:37
525 查看
发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单,只需要简单的几行代码就ok了。
特意做了一个小小的demo供大家参考,还把怎么实现tab的右键菜单附上。
效果图:
源码:
js部分:
html部分:
特意做了一个小小的demo供大家参考,还把怎么实现tab的右键菜单附上。
效果图:
源码:
js部分:
$(function () { //动态菜单数据 var treeData = [{ text : "菜单", children : [{ text : "一级菜单1", attributes : { url : "" } }, { text : "一级菜单2", attributes : { url : "" } }, { text : "一级菜单3", state : "closed", children : [{ text : "二级菜单1", attributes : { url : "" } }, { text : "二级菜单2", attributes : { url : "" } }, { text : "二级菜单3", attributes : { url : "" } } ] } ] } ]; //实例化树形菜单 $("#tree").tree({ data : treeData, lines : true, onClick : function (node) { if (node.attributes) { Open(node.text, node.attributes.url); } } }); //在右边center区域打开菜单,新增tab function Open(text, url) { if ($("#tabs").tabs('exists', text)) { $('#tabs').tabs('select', text); } else { $('#tabs').tabs('add', { title : text, closable : true, content : text }); } } //绑定tabs的右键菜单 $("#tabs").tabs({ onContextMenu : function (e, title) { e.preventDefault(); $('#tabsMenu').menu('show', { left : e.pageX, top : e.pageY }).data("tabTitle", title); } }); //实例化menu的onClick事件 $("#tabsMenu").menu({ onClick : function (item) { CloseTab(this, item.name); } }); //几个关闭事件的实现 function CloseTab(menu, type) { var curTabTitle = $(menu).data("tabTitle"); var tabs = $("#tabs"); if (type === "close") { tabs.tabs("close", curTabTitle); return; } var allTabs = tabs.tabs("tabs"); var closeTabsTitle = []; $.each(allTabs, function () { var opt = $(this).panel("options"); if (opt.closable && opt.title != curTabTitle && type === "Other") { closeTabsTitle.push(opt.title); } else if (opt.closable && type === "All") { closeTabsTitle.push(opt.title); } }); for (var i = 0; i < closeTabsTitle.length; i++) { tabs.tabs("close", closeTabsTitle[i]); } } });
html部分:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } .west{ width:200px; padding:10px; } .north{ height:100px; } </style> </head> <body class="easyui-layout"> <div region="north" class="north" title="____′↘夏悸 http://easyui.btboys.com"> <h1>最简单的左右结构实现,及tab的右键菜单实现,右键查看源码</h1> </div> <div region="center" title="center"> <div class="easyui-tabs" fit="true" border="false" id="tabs"> <div title="首页"></div> </div> </div> <div region="west" class="west" title="menu"> <ul id="tree"></ul> </div> <div id="tabsMenu" class="easyui-menu" style="width:120px;"> <div name="close">关闭</div> <div name="Other">关闭其他</div> <div name="All">关闭所有</div> </div> </body> </html>
相关文章推荐
- JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现
- JQuery EasyUI 最简单的左右布局实现及tab的右键菜单实现
- easyui最简单的左右布局实现,及tab的右键菜单实现
- layout布局和tab的右键菜单实现
- TabLayout+ViewPager+Fragment简单实现横向滑动菜单
- 纯DIV+CSS简单实现Tab选项卡左右切换效果
- XtraTabPage右键菜单(关闭当前页、关闭其它页、所有关闭的实现)
- 使用DrawerLayout实现侧滑菜单,,RadioButton+Fragment实现页面主布局,首页面使用tabLayout+viewPager实现
- JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
- Android 5.x新增控件之--TabLayout实现左右滑动导航菜单
- jQuery EasyUI实现右键菜单变灰不可用效果
- 实现JQuery EasyUI右键菜单变灰不可用效果
- jQuery easyUI 添加tab并为tab添加右键菜单---每天多学一点
- 利用简单的自由布局实现实现下来列表式菜单
- tab菜单的简单实现
- JS简单实现自定义右键菜单实例
- jQuery Easyui实现左右布局
- J2EE系列:右键快捷菜单实现jquery easyui tabs 刷新关闭
- 简单源生JS实现自定义右键菜单效果
- jquery easyui 左右布局关键代码实现