:: Forum >>

aw-ui-tabs : How to dynamically adding/removing tab

The effect is much like Yahoo Mail Beta (Though it is using Flash), when double click on a mail subject, a new tab appear. And there is a cross on the tab, clicking on it will remove the tab.

I know this involve DOM to create/remove element ? Is this behaviour supported ? Or will it be added to the future release ?
Sunday, November 12, 2006
Hi Derek.

Actually I do something similar on one of my pages.

I use an array to store what I'd like as tab names.
Get the length of that array to set the number of visible tabs.
Display the tabs.
(noting that on first run it will probably be blank and show no tabs).

As I want to add tabs, I simple add to the array, recalc the length, refresh the tabs (which will now show my addition).
To remove a tab is slightly more complex, but the idea is the same. The only difference is that you need to remove the correct array element.

Hope it helps.
Sunday, November 12, 2006
Hey man, Thanks for the brilliant solutions
Tuesday, November 14, 2006
I've got nice results by using the technique described here ( on classic style tabs):


Just substitute "Cell" with "Item".
Wednesday, November 15, 2006
To add/remove tab dynamically, do followings.

1. add/remove tab name
2. add/remove tab body
3. reset item count
4. refresh tabs

<script src="./ActiveWidgets/runtime/lib/aw.js"></script>
<link href="./ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
/* override .aw-list-box overflow style to visible */
.aw-flow-horizontal .aw-list-box {overflow: visible}

<span id="tabHeaders"></span>
<div id="tabPages" style="font-size: 8pt; font-family: tahoma; border: 1px solid #aaa; padding: 10px; ">
<div id="tab1">tab page 1</div>
<div id="tab2">tab page 2</div>
<div id="tab3">tab page 3</div>

<button onClick='addTab()'>Add tab</button>

// make tabs
var tabHeaders = [ "tab1 <label onClick=\"removeTab('tab1')\">x</label>", "tab2 <label onClick=\"removeTab('tab2')\">x</label>", "tab3 <label onClick=\"removeTab('tab3')\">x</label>" ];
var tabPages = [ "tab1", "tab2", "tab3" ];
var tabs = new AW.UI.Tabs;

tabs.setStyle("font-family", "tahoma");
tabs.setStyle("font-size", "8pt");
tabs.onSelectedItemsChanged = function(selected){
var i, divs = document.getElementById("tabPages").childNodes;

for (i = 0; i < divs.length; i++) {
if (divs[i].style) divs[i].style.display = "none"; // hide all elements

var value = this.getItemValue(selected[0]);
document.getElementById(value).style.display = "block"; // show selected

tabs.setSelectedItems([0]); // load the first page.

function addTab() {
// create tab div element
var tab = document.createElement("DIV");
tab.innerHTML = "some contents";
// set unique id to tab div
tab.id = (new Date()).getTime(); // unix timestamp
tab.setAttribute("tabHeader", "new tab <label onClick=\"removeTab('" + tab.id + "')\">x</label>");

// add tabHeader to tabHeaders array
// add tab id to tabPages array
// add tab to tab pages div

tabs.setItemText(tab.getAttribute("tabHeader"), tabs._itemCount);
tabs.setItemValue(tab.id, tabs._itemCount);
tabs.setItemCount(tabs._itemCount + 1);
tabs.setSelectedItems([tabs._itemCount - 1]);

function removeTab(tabId) {
// if we have two or more tabs, we can remove tab
if (tabs._itemCount == 1) {
alert('At least one tab is needed!');

// remove tab from tabHeaders/tabPages array
for (var i = 0, indexToDeleted = 0, _tabHeaders = [], _tabPages = []; i < tabHeaders.length; i++) {
if (tabPages[i] != tabId) {
} else {
indexToDeleted = i;
tabHeaders = _tabHeaders;
tabPages = _tabPages;

// remove tab div
var tab = document.getElementById(tabId);

// refresh tabs
tabs.setSelectedItems([Math.max(0, indexToDeleted - 1)]);

Friday, May 18, 2007

This topic is archived.

Back to support forum

Forum search