• 欢迎浏览“String me = Creater\忠实的资深Linux玩家;”,请文明浏览,理性发言,有侵犯你的权益请邮件我(creater@vip.qq.com).
  • 把任何的失败都当作一次尝试,不要自卑;把所有的成功都想成是一种幸运,不要自傲。
  •    2年前 (2016-10-11)  php |   抢沙发  15 
    文章评分 0 次,平均分 0.0

    菜单就是easyui的menu组件,使用者可以为菜单选项添加图标,定义样式,甚至可以设置多级结构的菜单。

    <div id="rcmenu" class="easyui-menu" style="">
    	<div data-options="iconCls:'icon-cancel'" id="closecur">
    		关闭
    	</div>
    	<div id="closeall">
    		关闭全部
    	</div>
    	<div id="closeother">
    		关闭其他
    	</div>
    	<div class="menu-sep"></div>
    	<div id="closeright">
    		关闭右侧标签页
    	</div>
    	<div id="closeleft">
    		关闭左侧标签页
    	</div>
    </div>

    easyui-menu的使用请参考官方文档:http://www.jeasyui.com/documentation/menu.php

    $(function(){
    			
    	$(".tabs-header").bind('contextmenu',function(e){
    		e.preventDefault();
    		$('#rcmenu').menu('show', {
    			left: e.pageX,
    			top: e.pageY
    		});
    	});
    	//关闭当前标签页
    	$("#closecur").bind("click",function(){
    		var tab = $('#tab').tabs('getSelected');
    		var index = $('#tab').tabs('getTabIndex',tab);
    		$('#tab').tabs('close',index);
    	});
    	//关闭所有标签页
    	$("#closeall").bind("click",function(){
    		var tablist = $('#tab').tabs('tabs');
    		for(var i=tablist.length-1;i>=0;i--){
    			$('#tab').tabs('close',i);
    		}
    	});
    	//关闭非当前标签页(先关闭右侧,再关闭左侧)
    	$("#closeother").bind("click",function(){
    		var tablist = $('#tab').tabs('tabs');
    		var tab = $('#tab').tabs('getSelected');
    		var index = $('#tab').tabs('getTabIndex',tab);
    		for(var i=tablist.length-1;i>index;i--){
    			$('#tab').tabs('close',i);
    		}
    		var num = index-1;
    		for(var i=num;i>=0;i--){
    			$('#tab').tabs('close',0);
    		}
    	});
    	//关闭当前标签页右侧标签页
    	$("#closeright").bind("click",function(){
    		var tablist = $('#tab').tabs('tabs');
    		var tab = $('#tab').tabs('getSelected');
    		var index = $('#tab').tabs('getTabIndex',tab);
    		for(var i=tablist.length-1;i>index;i--){
    			$('#tab').tabs('close',i);
    		}
    	});
    	//关闭当前标签页左侧标签页
    	$("#closeleft").bind("click",function(){
    		var tab = $('#tab').tabs('getSelected');
    		var index = $('#tab').tabs('getTabIndex',tab);
    		var num = index-1;
    		for(var i=0;i<=num;i++){
    			$('#tab').tabs('close',0);
    		}
    	});
    		
    });
    

    $('.tabs-header')为tabs的hearder对象,通过绑定contextmenu事件,并阻止默认的事件,来实现在header区域右键弹出菜单操作。最后运用官方提供的api,来实现tab标签页的关闭。

     

    除特别注明外,本站所有文章均为String me = "Creater\忠实的资深Linux玩家";原创,转载请注明出处来自http://unix8.net/home.php/5251.html

    关于

    发表评论

    暂无评论

    切换注册

    登录

    忘记密码 ?

    切换登录

    注册

    扫一扫二维码分享