jQuery easyUI 添加tab并为tab添加右键菜单---每天多学一点

一、添加tab

$(document).ready(function () {
	    	$('.easyui-accordion li a').click(function () {
	            var tabTitle = $(this).text();
	            var url = $(this).attr("href");
	            addTab(tabTitle, url);
	            $('.easyui-accordion li div').removeClass("selected");
	            $(this).parent().addClass("selected");
	       		}).hover(function () {
	            	$(this).parent().addClass("hover");
	        	}, function () {
	           		$(this).parent().removeClass("hover");
	        });
	
	        function addTab(subtitle, url) {
	            if (!$('#tabs').tabs('exists', subtitle)) {
	                $('#tabs').tabs('add', {
	                    title: subtitle,
	                    content: createFrame(url),
	                    closable: true,
	                    width: $('#mainPanle').width() - 10,
	                    height: $('#mainPanle').height() - 26
	                });
	            } else {
	                $('#tabs').tabs('select', subtitle);
	          	}
	            tabClose();
	        }
	
	        function createFrame(url) {
	            var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
	            return s;
	        }

二、 为tab添加右键菜单

1、添加右键菜单项

<div id="mm" class="easyui-menu" style="width:150px;">
    	<div id="mm-tabupdate" iconCls="icon-reload">刷新</div>
		<div class="menu-sep"></div>
		<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 class="menu-sep"></div>
		<div id="mm-exit">退出</div>                 
 	</div>

2、为整个页面绑定事件

	        //页面初始化绑定事件
	        $(function(){   
	       	 	tabCloseEven();    
				tabClose();
 			});

3、编写JS代码

function tabClose() {
	            /*双击关闭TAB选项卡*/
	            $(".tabs-inner").dblclick(function () {
	                var subtitle = $(this).children("span").text();
	                $('#tabs').tabs('close', subtitle);
	            });
	
	            $(".tabs-inner").bind('contextmenu', function (e) {
	                $('#mm').menu('show', {
	                    left: e.pageX,
	                    top: e.pageY,
	                });
	                var subtitle = $(this).children("span").text();
	                $('#mm').data("currtab", subtitle);
	                return false;
	            });
	        }
	
	        //绑定右键菜单事件
	  		function tabCloseEven() {
	  			//刷新
	  			$('#mm-tabupdate').click(function(){
		  			//alert("1");
		  			var currentTab =$('#tabs').tabs('getSelected');
	        		var iframe = $(currentTab.panel('options').content);
	            	var src = iframe.attr('src');
	           		//alert("2");
	            	$('#tabs').tabs('update', {
	                	tab: currentTab,
	                	options: {
	                   		content: createFrame(src)
	               		}
	            	});
					//alert("3");		
	  			});
	  		
	  			
	            //关闭当前
	    		$('#mm-tabclose').click(function () {
	            	var currtab_title = $('#mm').data("currtab");
	                $('#tabs').tabs('close', currtab_title);
	            });
	
	            //全部关闭
	    		$('#mm-tabcloseall').click(function () {
	                $('.tabs-inner span').each(function (i, n) {
	                   var t = $(n).text();
	                   $('#tabs').tabs('close', t);
	                });
	            });
	
	            //关闭除当前之外的TAB
	            $('#mm-tabcloseother').click(function () {
	                var currtab_title = $('#mm').data("currtab");
	                $('.tabs-inner span').each(function (i, n) {
	                    var t = $(n).text();
	                    if (t != currtab_title)
	                        $('#tabs').tabs('close', t);
	                });
	            });
	
	            //关闭当前右侧的TAB
	            $('#mm-tabcloseright').click(function () {
	                var nextall = $('.tabs-selected').nextAll();
	                if (nextall.length == 0) {
	                   //msgShow('系统提示','后边没有啦~~','error');
	                    alert('后边没有啦~~');
	                    return false;
	                }
	                nextall.each(function (i, n) {
	                    var t = $('a:eq(0) span', $(n)).text();
	                    $('#tabs').tabs('close', t);
	                });
	                return false;
	           });
	           
	            //关闭当前左侧的TAB
	            $('#mm-tabcloseleft').click(function () {
	                var prevall = $('.tabs-selected').prevAll();
	                if (prevall.length == 0) {
	                    alert('到头了，前边没有啦~~');
	                    return false;
	                }
	
	                prevall.each(function (i, n) {
	                    var t = $('a:eq(0) span', $(n)).text();
	                    $('#tabs').tabs('close', t);
	                });
	                return false;
	            });
	            
	            //退出右键菜单
	            $('#mm-exit').click(function(){
	            	$('#closeMenu').menu('hide');
	            });
	        }
	    });