Tabstrip control with a Tabstrip control

The code below (sorry it is long) shows a Tab with a Tab.

I am having one problem with the code - click off the 1st tab then click back to the first tab, it does not refresh the tab at the bottom (running this makes it clearer).

Any help would be appreciated...

Here is the code:
Note: href and script src pathes must match where you installed ActiveWidgets

<HTML>
<HEAD>
<link href="/temp/activewidgets/activewidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
<script src="/temp/activewidgets/activewidgets/runtime/lib/aw.js"></script>
<style>
.aw-system-control {position: absolute}

#box {left: 0px; top: 0px; width: 800px; height: 520px; border: 1px solid #999; background: #ece9d8; position: absolute;}
#frame {left: 6px; top: 28px; width: 785px; height: 484px; border: 1px solid #999; background: #f9f8f4; position: absolute;}
#tabs {left: 6px; top: 6px; width: 785px; height: 22px;}
#group_tabs_1a {left: 21px; top: 40px; width: 757px; height: 60px;}
#group_tabs_1b {left: 21px; top: 110px; width: 757px; height: 60px;}
#label_tabs_1a {left: 30px; top: 65px; width: 400px; height: 20px; font-family:Arial, Helvetica; font-size:16px;}
#label_tabs_1b {left: 80px; top: 133px; width: 50px; height: 20px; font-family:Arial, Helvetica; font-size:12px;}
#combo_tabs_1 {left: 122px; top: 133px;}
#group_tabs_2a {left: 21px; top: 40px; width: 757px; height: 60px;}
#group_tabs_2b {left: 21px; top: 110px; width: 757px; height: 60px;}
#label_tabs_2a {left: 30px; top: 65px; width: 400px; height: 20px; font-family:Arial, Helvetica; font-size:16px;}
#label_tabs_2b {left: 80px; top: 133px; width: 50px; height: 20px; font-family:Arial, Helvetica; font-size:12px;}
#frame2 {left: 26px; top: 205px; width: 747px; height: 290px; border: 1px solid #999; background: #fff; position: absolute;}
#tabs2 {left: 26px; top: 183px; width: 585px; height: 22px;}
#label_tabs2_1a {left: 30px; top: 220px; width: 100px; height: 16px; font-family:Arial, Helvetica; font-size:12px;}
#input_tabs2_1a {left: 85px; top: 215px; width: 150px; height: 25px}
#label_tabs2_2a {left: 80px; top: 300px; width: 400px; height: 20px; font-family:Arial, Helvetica; font-size:16px;}
</style>
</head>

<BODY>

<script>
var box = new AW.HTML.DIV;
box.setId("box");
document.write(box);

var tabs = new AW.UI.Tabs;
tabs.setId("tabs");
tabs.setItemText(["Tabs 1","Tabs 2"]);
tabs.setItemCount(2);
tabs.setSelectedItems([0]);
document.write(tabs);

var frame = new AW.HTML.DIV;
frame.setId("frame");
document.write(frame);

var container = new AW.HTML.SPAN;
document.write(container);

var group_tabs_1a = new AW.UI.Group;
group_tabs_1a.setId("group_tabs_1a");
group_tabs_1a.setControlText("Tabs 1 Group a");

var group_tabs_1b = new AW.UI.Group;
group_tabs_1b.setId("group_tabs_1b");
group_tabs_1b.setControlText("Tabs 1 Group b");

var label_tabs_1a = new AW.UI.Label;
label_tabs_1a.setId("label_tabs_1a");
label_tabs_1a.setControlText("Blah blah blah blah...");

var label_tabs_1b = new AW.UI.Label;
label_tabs_1b.setId("label_tabs_1b");
label_tabs_1b.setControlText("Select:");

var itemTextArray = ["Choice #1", "Choice #2"];
var combo_tabs_1 = new AW.UI.Combo;
combo_tabs_1.setControlSize(200, 22);
combo_tabs_1.setId("combo_tabs_1");
combo_tabs_1.setItemText(itemTextArray);
combo_tabs_1.setItemCount(2);
combo_tabs_1.refresh();

var group_tabs_2a = new AW.UI.Group;
group_tabs_2a.setId("group_tabs_2a");
group_tabs_2a.setControlText("Tabs 2 Group a");

var group_tabs_2b = new AW.UI.Group;
group_tabs_2b.setId("group_tabs_2b");
group_tabs_2b.setControlText("Tabs 2 Group b");

var label_tabs_2a = new AW.UI.Label;
label_tabs_2a.setId("label_tabs_2a");
label_tabs_2a.setControlText("Etc etc etc...");

var label_tabs_2b = new AW.UI.Label;
label_tabs_2b.setId("label_tabs_2b");
label_tabs_2b.setControlText("More information here");

var tabs2 = new AW.UI.Tabs;
tabs2.setId("tabs2");
tabs2.setItemText(["Tabs2 1","Tabs2 2"]);
tabs2.setItemCount(2);
tabs2.setSelectedItems([0]);

var frame2 = new AW.HTML.DIV;
frame2.setId("frame2");

var container2 = new AW.HTML.SPAN;

var label_tabs2_1a = new AW.UI.Label;
label_tabs2_1a.setId("label_tabs2_1a");
label_tabs2_1a.setControlText("Label 1:");

var input_tabs2_1a = new AW.UI.Input;
input_tabs2_1a.setId("input_tabs2_1a");

var label_tabs2_2a = new AW.UI.Label;
label_tabs2_2a.setId("label_tabs2_2a");
label_tabs2_2a.setControlText("In Tabs 2 tab 2");

var page1 = [group_tabs_1a, group_tabs_1b, label_tabs_1a, label_tabs_1b, combo_tabs_1,frame2,container2,tabs2];
var page2 = [group_tabs_2a, group_tabs_2b, label_tabs_2a, label_tabs_2b];
var pages = [page1,page2];

var page1a = [label_tabs2_1a,input_tabs2_1a];
var page2a = [label_tabs2_2a];
var pagesa = [page1a,page2a];

container.element().innerHTML = page1.join("");
container2.element().innerHTML = page1a.join("");

tabs2.onCurrentItemChanged = function(i)
{
container2.element().innerHTML = pagesa[i].join("");

if (container2.$browser=="opera")
{
document.body.className += ""
}
}

tabs.onCurrentItemChanged = function(i)
{
container.element().innerHTML = pages[i].join("");

if (container.$browser=="opera")
{
document.body.className += ""
}
}
</script>

</BODY>
</HTML>

DC

February 27,

This was the last of our evaluation. We were excited about ActiveWidgets. Since we could not make this work, and the forum seems to be the only means of help, we will start looking at another product (I will not mention which).

I hope ActiveWidgets good luck - I enjoyed my evaluation. Sorry I could not get it working.

DC

March 5,

This can be solved with a single line ( worth to try others anyway?) ;-)

tabs.onCurrentItemChanged = function(i){
container.element().innerHTML = pages[i].join("");
/// refreshes child tabs content on main tab change
container2.element().innerHTML = pagesa[tabs2.getSelectedItems()].join("");
}

Carlos

March 5,

Carlos,

Thanks, that worked.

I believe we will recommend ActiveWidgets to our management.

DC

March 6,

This topic is archived.

Tabstrip control with a Tabstrip control

See also:

Search

New Data Grid

Version 2