How do I add/remove tabs dynamically ?

I wonder, whether it is possible to add/remove a tab dynamically.

The code I have written (which is largely the example dialog modified to my needs) does not work out. What happens is, that the HTA I am using this in suddenly hangs when I execute addTabs(). Is there anything I overlooked ? Thanks.

function addTab() {
iTabsItemCount = iTabsItemCount +1;
aTabsSelected = [iTabsItemCount];
aTabsItemText.push("New Job");
tabs.setItemText(aTabsItemText);
tabs.setItemCount(iTabsItemCount);
tabs.setSelectedItems(aTabsSelected);
tabs.refresh();

// frame must be private. Not sure whether this makes sense or whether I need a unique, persistant object rather than a 'throw-away' one
var frame = new AW.HTML.DIV;
// need to think about a convention to automatically raise the ID
frame.setId("frame2");
document.write(frame);

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

Orke

January 2,

<style>

    #myTabs {width: 100%; height: 30px;}

    #myTabs .aw-list-item {color: blue}

/*	each element has unique ID, check with Firefox DOM Inspector :-) */
    #myTabs-item-1 {font-weight: bold}
    #myTabs-item-2-box-text {border-bottom: 2px solid red}
</style>

<script>
    var obj = new AW.UI.Tabs;
    obj.setId("myTabs");
    var items = ["Home", "Favorites", "Font size", "Search"];
    obj.setItemText(items);
    var images = ["home", "favorites", "fontsize", "search"];
    obj.setItemImage(images);
    obj.setItemCount(4);
    obj.setSelectedItems([1]);
    document.write(obj);
</script>
<div style="border-top: 1px solid #999">
</div>

<p></p>

<script>

    var add = new AW.UI.Button;
    add.setControlText("Add");
    document.write(add);

    add.onClick = function(){
        items[items.length] = "another";
        images[images.length] = "Home";
        obj.setItemCount(items.length);
        obj.setItemText(items);
        obj.setItemImage(images);
        obj.refresh();
    }

    var del = new AW.UI.Button;
    del.setControlText("Del");
    document.write(del);

    del.onClick = function(){
               if(items.length == 0) return;
        items.length = items.length-1;
        images.length = images.length-1;

        obj.setItemCount(items.length);
        obj.setItemText(items);
        obj.setItemImage(images);
        obj.refresh();
    }

</script>

Paulo Cesar (PC from Brazil)

January 2,

Thanks a lot. Will check it out when I am back from bed ;-)

Orke

January 3,

This topic is archived.

How do I add/remove tabs dynamically ?

See also:

Search

New Data Grid

Version 2