I was able to work out a solution for this, although it's a bit of a hack and could probably be done better.
This code adds a popop button next to the close button on every tab inside #main-tab-bar that has a close button. I specifically did not want tabs that can't be closed to have popup ability. The popup button opens a new browser window containing that tab's content. My popup page uses asp to add the tab content to the page from what was sent through the query string on the url.
I made the following additions to the css:
#main-tab-bar .tabs-closable{ /* only #main-tab-bar has the popup icons, and they only appear on tabs that are closable */
padding-right:18px;
}
.tabs li a.tabs-popup{
position:absolute;
font-size:1px;
display:block;
padding:0px;
width:11px;
height:11px;
top:7px;
right:15px;
opacity:0.85;
filter:alpha(opacity=75);
background: transparent url('../images/skins/all/tabs_popup.gif') no-repeat 2px 1px ! important;
}
.tabs li a:hover.tabs-popup{
opacity:1;
filter:alpha(opacity=100);
cursor:hand;
cursor:pointer;
}
And I wrote the following jquery functions.
//initialize the main tabs
$('#main-tab-bar').tabs();
//other functions not show here add specific tabs & their content to the page
//add events to the main tabs
$('#main-tab-bar').tabs({//for all tabs in the main tab bar
onAdd: function() {//do this on add tab
//for all tab close buttons in #main-tab-bar,
//if they are not preceeded by a popup button, add one
//**Note: this would ideally be checked for just the recently added tab,
//**but I couldn't find a way to grab just that tab. Get 'selected' wasn't
//**fast enough when multiple tabs are being added quickly.
$('#main-tab-bar .tabs-header .tabs-wrap .tabs li .tabs-close').each(function() {//for all tab close buttons in the main tabs
if ($(this).prev().hasClass('tabs-popup')) {//if the popup link already exists
}//do nothing
else {//add the popup link
$(this).before('<a href="javascript:void(0)" class="tabs-popup"><\/a>');//add the popup link before the close link
}//end if popup link exists
});//end for all tab close buttons
}//end on add tab
});//end for all tabs
//end add events to all tabs
//when the tab popup button is clicked, pop up that tab in a new window
$(".tabs-popup").live("click", function(){
//get the title, icon & content of this (the currently selected) tab
var tabTitle = getTabProperty("title");
var tabIcon = getTabProperty("icon");
var tabContent = getTabProperty("content"); //note: this only returns the content if it was added dynamically
//open a new window with that info
var url = "popup_tab.asp?title=" + tabTitle + "&icon=" + tabIcon + "&content=" + tabContent;
url = encodeURI(url);
var windowName = tabTitle;
var windowOptions = "width=1000,height=700,scrollbars=yes,location=yes,menubar=no,resizable=yes,status=yes,toolbar=no";
window.open(url, windowName, windowOptions);
//close the tab that was popped up
$('#main-tab-bar').tabs('close', tabTitle);
});//end handle tab popup
//get a property of a specific tab or of the entire tab group in the main tab bar
function getTabProperty(prop, num) {//property to find, which tab (use selected tab if null)
//usage: getTabProperty("title") or getTabProperty("title", 3)
var selectedTab; //which tab to find the property for
var tabs = $('#main-tab-bar').tabs('tabs'); //get array of all tabs
if (num != undefined) {//if the tab # was sent in, use it
selectedTab = tabs[num]; //get specific tab
}
else {//else use the currently selected tab
selectedTab = $('#main-tab-bar').tabs('getSelected'); //get the currently selected tab
}
switch(prop) {//find the property
//per tab properties
case 'title': return selectedTab.panel('options').title; break; //return tab's title
case 'icon': return selectedTab.panel('options').iconCls; break; //return tab's icon
case 'content': return selectedTab.panel('options').content; break; //return tab's content
case 'href': return selectedTab.panel('options').href; break; //return tab's href
case 'index': //return the tab's number
var tindex = 0; //start at first tab
var tlength = $('#main-tab-bar').tabs('tabs').length; //number of tabs
var ttitle = ""; //title of that tab
for (tindex = 0; tindex < tlength; tindex++) {//for all tabs
ttitle = tabs[tindex].panel('options').title; //get that tab's title
if (ttitle == selectedTab.panel('options').title) {//if that tab's title = the selected tab's title
return tindex; //return that index
}//end if
}//end for
return null; //else return null if not found (although it should be)
break;
//global propties of tab group
case 'width': return $('#main-tab-bar').tabs('options').width; break; //return tab container's width
case 'height': return $('#main-tab-bar').tabs('options').height; break; //return tab container's height
case 'plain': return $('#main-tab-bar').tabs('options').plain; break; //return tab container's plain
case 'fit': return $('#main-tab-bar').tabs('options').fit; break; //return tab container's fit
case 'border': return $('#main-tab-bar').tabs('options').border; break; //return tab container's border
case 'scrollIncrement': return $('#main-tab-bar').tabs('options').scrollIncrement; break; //return tab container's scrollIncrement
case 'scrollDuration': return $('#main-tab-bar').tabs('options').scrollDuration; break; //return tab container's scrollDuration
case 'length': return $('#main-tab-bar').tabs('tabs').length; break; //return tab container's number of tabs
default: return null; //else not found
}//end find the property
}//end get tab property
A better solution would:
(1) Let you specify "popup: true" when creating a tab instead of adding it afterward, or at least find a way to add it to a specific tab after that tab is created, instead of cycling through all tabs.
(2) Apply a class to add the correct padding to the tab title, instead of piggy-backing on the .tabs-closable class.
(3) Find a way to obtain the content of a tab that was NOT added to the tab using "content: 'the content...'" when creating the tab.
(4) The getTabProperty() function probably isn't necessary, you could just use the relevant lines to get the selected title, content & icon. I built it for other uses not related to the popups.
I'm relatively new to jquery, so I'm sure there's other things that could be improved. If anyone does have any suggestions or other solutions, I would be very grateful if you would post them here!
