EasyUI基本使用——(tabs右键菜单)
2015-07-12 00:02
531 查看
本文只记录一些使用要点代码段,非使用教程。
使用方法:
首先定义tabs
然后使用
即可。
tab上加右键菜单
$.fn.contextMenus=function(){ var $tabs=$(this); var temphtml='<div id="tabs-contextmenuparent"><div id="tabs-contextmenu" class="easyui-menu" style="width:150px">'+ '<div id="mm-tabclose">关闭</div>'+ '<div id="mm-tabcloseall">关闭全部</div>'+ '<div id="mm-tabcloseother">关闭其他</div>'+ '<div class="menu-sep"></div>'+ '<div id="mm-tabcloseright">关闭右侧标签</div>'+ '<div id="mm-tabcloseleft">关闭左侧标签</div>'+ '</div></div>'; $("body").append(temphtml); $.parser.parse($('#tabs-contextmenuparent')); var $menus=$("#tabs-contextmenu"); $(document).on("dblclick",".tabs-inner",function(){ var currtab_title = $(this).children("span").text(); var $link=$(".tabs-title:contains("+currtab_title+")",$tabs); if($link.is('.tabs-closable')){ $tabs.tabs('close',currtab_title); } }); $(document).on("contextmenu",".tabs-inner",function(e){ $menus.menu('show', { left: e.pageX, top: e.pageY }); var subtitle =$(this).children("span").text(); $menus.data("currtab",subtitle); return false; }); //关闭当前 $('#mm-tabclose',$menus).click(function() { var currtab_title = $menus.data("currtab"); var $link=$(".tabs-title:contains("+currtab_title+")",$tabs); if ($link.is('.tabs-closable')) { $tabs.tabs('close', currtab_title); } }); //全部关闭 $('#mm-tabcloseall',$menus).click(function() { $('.tabs-inner span',$tabs).each(function(i, n) { if ($(this).is('.tabs-closable')) { var t = $(n).text(); $tabs.tabs('close', t); } }); }); //关闭除当前之外的TAB $('#mm-tabcloseother',$menus).click(function() { var currtab_title = $('tabs-contextmenu').data("currtab"); $('.tabs-inner span').each(function(i, n) { if ($(this).is('.tabs-closable')) { var t = $(n).text(); if (t != currtab_title) $tabs.tabs('close', t); } }); }); //关闭当前右侧的TAB $('#mm-tabcloseright',$menus).click(function() { var currtab_title = $('tabs-contextmenu').data("currtab"); var $li=$(".tabs-title:contains("+currtab_title+")",$tabs).parent().parent(); var nextall = $li.nextAll(); if (nextall.length == 0) { jAlert('已经是最后一个了'); return false; } nextall.each(function(i, n) { if ($('a.tabs-close', $(n)).length > 0) { var t = $('a:eq(0) span', $(n)).text(); $tabs.tabs('close', t); } }); return false; }); //关闭当前左侧的TAB $('#mm-tabcloseleft',$menus).click(function() { var currtab_title = $menus.data("currtab"); var $li=$(".tabs-title:contains("+currtab_title+")",$tabs).parent().parent(); var prevall =$li.prevAll(); if (prevall.length == 1) { jAlert('已经是第一个了'); return false; } prevall.each(function(i, n) { if ($('a.tabs-close', $(n)).length > 0) { var t = $('a:eq(0) span', $(n)).text(); $tabs.tabs('close', t); } }); return false; }); };
使用方法:
首先定义tabs
$('#div-tabs').tabs({ });
然后使用
$("#div-tabs").contextMenus();
即可。
相关文章推荐
- Android UI开发篇之 ViewPager+九宫格布局 实现左右滑动
- UESTC_敢说就敢做 CDOJ 631
- No suitable driver found for jdbc:mysql://localhost/dbname
- request.setCharacterEncoding 和常用内置对象 跳转
- 数据类型 -- uint32_t 类型
- LeetCode Implement Queue using Stacks
- UI基础:UITableView表视图
- mysql的错误:The server quit without updating PID file /usr/local/mysql/data/door.pid).
- mysql的错误:The server quit without updating PID file /usr/local/mysql/data/door.pid).
- UI-字体
- Unique Binary Search Trees II
- Implement Queue using Stacks(leetcode 232)
- UITextField
- 3.UItableView常用方法
- java类文件中的ConstantValue的问题
- 1.UITableView使用介绍
- HDU 1711 Number Sequence(算法验证)
- 2.UITableView表视图左滑 删除
- UI基础:UINavigationController、界面通信
- Algorithms—62.Unique Paths