3.2.0

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 ?
Derek
November 12,
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.
November 12,
Hey man, Thanks for the brilliant solutions
Derek
November 14,
I've got nice results by using the technique described here ( on classic style tabs):

http://www.activewidgets.com/javascript.forum.13178.4/suggestion-for-feature-cell-marker.html

Just substitute "Cell" with "Item".
HTH
Carlos
November 15,
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>
<style>
/* override .aw-list-box overflow style to visible */
.aw-flow-horizontal .aw-list-box {overflow: visible}
</style>

<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>
</div>

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

<script>
// 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.setId('tabHeaders');
tabs.setItemText(tabHeaders);
tabs.setItemValue(tabPages);
tabs.setItemCount(tabHeaders.length);
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.refresh();
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
tabHeaders.push(tab.getAttribute("tabHeader"));
// add tab id to tabPages array
tabPages.push(tab.id);
// add tab to tab pages div
document.getElementById('tabPages').appendChild(tab);

tabs.setItemText(tab.getAttribute("tabHeader"), tabs._itemCount);
tabs.setItemValue(tab.id, tabs._itemCount);
tabs.setItemCount(tabs._itemCount + 1);
tabs.refresh();
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!');
return;
}

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

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

// refresh tabs
tabs.setItemText(tabHeaders);
tabs.setItemValue(tabPages);
tabs.setItemCount(tabHeaders.length);
tabs.refresh();
tabs.setSelectedItems([Math.max(0, indexToDeleted - 1)]);
}
</script>

achadol
May 18,

This topic is archived.

See also:


Back to support forum