Dynamically Adding/Editing/Deleting Tabs on Tabbed Panels

Question

I am using the tabbed panels and need to know how to
dynamically create a new tab with javascript with some content
inside ( and switch to it ). Also, I need to figure out how I can
delete tabs at "runtime"? I have tried many things to do this, but
everytime, it has been failing. I need a functions just like this:
addTab(title, innerHTMLcontent);
deleteTab(currIndex);
Also, I think all of the Spry Widgets should have an easy way
to dynamically change content.

Answer 1

Hi,
here is the js file. I am also attaching a sample (I named it
as Spry.Widget.ExtendedTabbedPanels, may be you could change it).
Let me know if you face any issues.
===================START-JS
FILE==============================
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget
= {};
Spry.Widget.ExtendedTabbedPanels = function(element, opts) {
Spry.Widget.TabbedPanels.call(this, element, opts);
Spry.Widget.ExtendedTabbedPanels.prototype = new
Spry.Widget.TabbedPanels();
Spry.Widget.ExtendedTabbedPanels.prototype.constructor =
Spry.Widget.ExtendedTabbedPanels;
Spry.Widget.ExtendedTabbedPanels.prototype.addTab = function
(tabname, tabcontent, position) {
var tabs = this.getTabs();
if((!position && position != 0)|| position >
tabs.length)
position = tabs.length;
var newtab = tabs[tabs.length - 1].cloneNode(true);
this.setElementNodeValue(newtab, tabname);
this.getTabGroup().insertBefore(newtab, tabs[position]);
var tabContents = this.getContentPanels();
var newContentPanel = tabContents[tabContents.length -
1].cloneNode(false);
newContentPanel.innerHTML = tabcontent;
this.getContentPanelGroup().insertBefore(newContentPanel,
tabContents[position]);
this.addPanelEventListeners(newtab, newContentPanel);
this.showPanel(position);
Spry.Widget.ExtendedTabbedPanels.prototype.removeTab =
function(tabindex) {
var tabs = this.getTabs();
if((tabs.length == 1) || (!tabindex && tabindex !=
0) || tabindex >= tabs.length)
return false;
var tabToRemove = tabs[tabindex];
this.getTabGroup().removeChild(tabToRemove);
var contentPanelToRemove =
this.getContentPanels()[tabindex];
this.getContentPanelGroup().removeChild(contentPanelToRemove);
this.removePanelEventListeners(tabToRemove,
contentPanelToRemove);
if(this.getCurrentTabIndex() == tabindex) {
if(this.getTabs().length <= tabindex)
this.showPanel(this.getTabs().length - 1);
else
this.showPanel(tabindex);
Spry.Widget.ExtendedTabbedPanels.removeEventListener =
function(element, eventType, handler, capture)
try
if (element.removeEventListener)
element.removeEventListener(eventType, handler, capture);
else if (element.detachEvent)
element.detachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.ExtendedTabbedPanels.prototype.removePanelEventListeners
= function(tab, panel)
var self = this;
Spry.Widget.ExtendedTabbedPanels.removeEventListener(tab,
"click", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(tab,
"mouseover", function(e) { return self.onTabMouseOver(e, tab); },
false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(tab,
"mouseout", function(e) { return self.onTabMouseOut(e, tab); },
false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex
dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to
enable keyboard navigation
// by default.
// Find the first element within the tab container that has
a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() ==
"a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.ExtendedTabbedPanels.removeEventListener(this.focusElement,
"focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(this.focusElement,
"blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.ExtendedTabbedPanels.removeEventListener(this.focusElement,
"keydown", function(e) { return self.onTabKeyDown(e, tab); },
false);
Spry.Widget.ExtendedTabbedPanels.prototype.setElementNodeValue
= function(element, nodevalue) {
var currentElement = element;
var tmpElement = this.getElementChildren(element);
while(tmpElement.length != 0) {
currentElement = tmpElement[0];
tmpElement = this.getElementChildren(tmpElement[0]);
currentElement.innerHTML = nodevalue;
====================END JS
FILE==================================
===================SAMPLE
TEST===================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryExtendedTabbedPanels.js"
type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<div class="TabbedPanelsTabGroup">
<span class="TabbedPanelsTab"
tabindex="0"><b>Tab 1</b></span>
<span class="TabbedPanelsTab" tabindex="0">Tab
2</span>
</div>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<input type="text" id="tabname" />
<input type="text" id="tabcontent" />
<input type="text" id="position" />
<input type="button" value="add tab" onclick="add();"
/>
<input type="button" value="delete tab"
onclick="TabbedPanels1.removeTab(parseInt(document.getElementById('position').value));"
/>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.ExtendedTabbedPanels("TabbedPanels1");
function add() {
var tabTitle = document.getElementById("tabname").value;
var tabcontent = document.getElementById("tabcontent").value;
var position = document.getElementById("position").value;
TabbedPanels1.addTab(tabTitle, tabcontent,
parseInt(position));
//-->
</script>
</body>
</html>
===================SAMPLE TEST
END=======================