Print Page - middle click tab to close

Title: middle click tab to close
Post by: jpierce on July 30, 2013, 02:28:21 PM

I'd like the tabs component to have an option for middle click closing. Right now, I've hacked it in by catching clicking on the tabs and looking to see if it's a middle click, then closing it. Unfortunately, there seems to be an unavoidable side effect that the tab is first selected, then closed.

Seems like maybe there should be an option which allows you to set middle click to close, select or do nothing.

Title: Re: middle click tab to close
Post by: stworthy on July 30, 2013, 07:19:31 PM

Similar to this 'Hover Tabs' example http://www.jeasyui.com/demo/main/index.php?plugin=Tabs&theme=default&dir=ltr&pitem=Hover%20Tabs. The middle click functionality can be achieved as:

Code:

$(function(){
	var t = $('#tt');
	var tabs = t.tabs().tabs('tabs');
	for(var i=0; i<tabs.length; i++){
		var topts = tabs[i].panel('options');
		topts.tab.unbind().bind('click',{title:topts.title},function(e){
			if (e.which == 2){
				t.tabs('close', e.data.title);
			} else if (e.which == 1){
				t.tabs('select', e.data.title);
			}
		});
	}
});

Title: Re: middle click tab to close
Post by: jpierce on July 31, 2013, 07:54:00 AM

Thanks! I modified it slightly due to the fact that I'm creating my tabs dynamically. It got a lot shorter. :D

As an aside, I really wish you'd make it where every method that takes an index or a tab title would also take a tab object. So often I already have the tab object and it seems kind of silly to have to look the index back up to pass to the method. (And I can't pass that title because I can have multiple tabs with the same title.)

Title: Re: middle click tab to close
Post by: jpierce on July 31, 2013, 07:56:02 AM

Oh, and one thing I will note is that once you middle-click and close the tab, it appears to call onSelect again. Easy enough to filter out by just checking to see if the tab is already the selected one. But something important to note.

Edit: Ugh, I take that back. Not so easy as I thought since in onSelect, the tab is already selected so I can't just check getSelected. Going to have to keep a separate variable to track the last selected tab. Inelegant.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jpierce on July 30, 2013, 02:28:21 PM