Embed a close button in UltraWebTab

One way to improve the look & feel of an ASP.NET web application that uses UltraWebTab is to give the user the ability to customize his workspace. Allowing the user to close tabs that he is not using may improve the usability of your web application. These step-by-step instructions provide this close functionality for an UltraWebTab, using a custom close button embedded right inside the tab.

Additional Information

This is done by embedding HTML in the displayed text of the tab. Use this technique in ASP.NET wherever you want to insert custom client-side scripting or HTML elements in areas that are not exposed as properties of the control (like the selectable tab area in UltraWebTab).

Step-By-Step Example

1. Set the key property for each tab you want to be able to close.
   
   This must be done for our client-side functions to work. This process can be modified to work without keys for each tab, but it works best with the keys set.
   
   
2. Write a JavaScript function to close a tab, given a tab key passed in as an argument.
   
   This function will be called from the custom close button, in the context of the tab containing the button.
   In order for this to work, you must call tab.setEnabled(false) and then tab.setVisible(false). This is because when a tab is selected, it cannot be hidden. Disabling the tab first will ensure that it can be hidden.

javascript code
function closeTab(tabKey) {
var myUltraWebTab = igtab_getTabById('UltraWebTab1');
myUltraWebTab.Tabs[tabKey].setEnabled(false);
myUltraWebTab.Tabs[tabKey].setVisible(false);
}

Create an image for your close button. You will need to provide your own image to represent the custom close button. In this example, a JPEG called "redX.jpg" is used. Embed the following code in the TEXT of each tab: JavaScript (replace "tab1key" with the appropriate tab key): " After doing this, your igtab:tab element should look something like this: ASP.NET:

" >

The images can be added automatically at any time by iterating through the Tabs collection. Place this script in the body.onload event of the document, and the images will all be inserted for you:

function embedCloseButtons() {
var myUltraWebTab = igtab_getTabById('UltraWebTab1');
for (t = 0; t < currenttab =" myUltraWebTab.Tabs[t];" src="http://www.blogger.com/%27redX.jpg%27" onclick="'closeTab("">");
}
}


The effect of this step is: an HTML IMG tag, with the closeTab() function attached to its onclick event, embedded in the text of your tab-- in other words, an embedded Close button for your UltraWebTab.