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);
}

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

Forum search