EasyUIのタブに右クリックメニューを追加

2876 ワード

 <div id="mm" class="easyui-menu" style="width:150px;">
         <div id="mm-tabclose" name="1"> </div>
        <div id="mm-tabcloseall" name="2"> </div>
        <div id="mm-tabcloseother" name="3"> </div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright" name="4"> </div>
        <div id="mm-tabcloseleft" name="5"> </div>
    </div>

 
	//  , 
		$('#tt').tabs({
			onContextMenu : function(e, title, index) {
				e.preventDefault();
				//if (index > 0) {
					$('#mm').menu('show', {
						left : e.pageX,
						top : e.pageY
					}).data("tabTitle", title);
				//}
			}
		});
		//  click
		$("#mm").menu({
			onClick : function(item) {
				closeTab(this, item.name);
			}
		});

 
//  Tabs
function closeTab(menu, type) {
	var obj = $('#tt');
	;
	var allTabs = obj.tabs('tabs');
	var allTabtitle = [];
	$.each(allTabs, function(i, n) {
		var opt = $(n).panel('options');
		if (opt.closable) {
			allTabtitle.push(opt.title);
		}
	});
	var curTabTitle = $(menu).data('tabTitle');

//	console.log('curTabTitle:' + curTabTitle)

	var curTabIndex = obj.tabs('getTabIndex', obj.tabs('getTab', curTabTitle));
	/**
	 * <pre>
	 * 	    1: 
	 * 	    2: 
	 * 	    3: 
	 * 	    4: 
	 * 	    5: 
	 * </pre>
	 */
	switch (type) {
	case '1':
		obj.tabs('close', curTabTitle);
		break;
	case '2':
		for (var i = 0, j = allTabtitle.length; i < j; i++) {
			obj.tabs('close', allTabtitle[i]);
		}
		break;
	case '3':
		for (var i = 0, j = allTabtitle.length; i < j; i++) {
			if (curTabTitle != allTabtitle[i]) {
				obj.tabs('close', allTabtitle[i]);
			}
		}
		obj.tabs('select', curTabTitle);
		break;
	case '4':
		for (var i = curTabIndex + 1 ,j = allTabtitle.length; i<j; i++) {
			obj.tabs('close', allTabtitle[i]);
		}
		obj.tabs('select', curTabTitle);
		break;
	case '5':
		for (var i = 0; i < curTabIndex; i++) {
			obj.tabs('close', allTabtitle[i]);
		}
		obj.tabs('select', curTabTitle);
		break;
	}

}