Attaching HTML

There is a possibility to attach HTML objects and HTML strings to a tab. Several HTML objects can be attached at a time.

Attaching HTML object

<div id="objId">Some text</div>

// attach by id
myTabbar.tabs(id).attachObject("objId");

// or attach by link
var obj = document.getElementById("objId");
myTabbar.tabs(id).attachObject(obj);

in this mode a tab doesn't render scrolls by default, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

This way is the same as attaching an object, but the current tab's content isn't removed:

myTabbar.tabs(id).appendObject("otherObjId");

In this mode a tab will add scrolls automatically, so there's no need to specify width/height for the attached object.

myTabbar.tabs(id).attachHTMLString('<div id="objId">Some text</div>');

In this mode scrolls aren't rendered by default as well, so you need to add CSS to your object manually:

div#objId {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

Any attached object or an HTML string can be detached from a tab with the help of the detachObject method:

// attaching an object
myTabbar.tabs(id).attachObject("objId");
 
// detaching it later
myTabbar.tabs(id).detachObject(true);

If the first parameter is set to "true", the object will be removed from DOM, otherwise it will be moved to document.body.