Here two approaches are possible:
1 . If you are using multiview with a switching control (tabbar or segmented), you should treat multiview and a switching control separately. In other words, you should add and remove options for tabbar (segmented button) and at the same time add and remove views for the multiview.
2 . If you are using tabview (integral component that consists of a built-in multiview and tabbar), note that it features dedicated methods to add and remove views together with the corresponding tabs.
Both Tabbar and Segmented Button feature separate parts - tabs or segments - that are defined by the options property.
Each of its options can be connected with a separate view or a separate click handler.
view:"segmented" |
![]() |
view:"tabbar" |
![]() |
Tabs/segments can be added and deleted on the go with the help of the following methods:
MultiView cells can be added and deleted dynamically by using:
Adding
rows:[
{view:"tabbar", id:"tabs", multiview:true, options:[], ..}, //empty tabbar
{view:"multiview", id:"views", cells:[
{template:"..."} //multiview should have at least one cell
]}
]
...
function open_new_tab(id){
var item = $$('list1').getItem(id);
//adding a new cell to multiview
$$("views").addView({ view:"template", id:item.id, template:item.title});
//adding option to the tabbar
$$('tabs').addOption(item.id, item.title, true);
};
Deletion
function del_tab(){
//getting the ID of the active tab
var id = $$("tabs").getValue();
//removing tabbar option
$$("tabs").removeOption(id);
//removing corresponding view
$$("views").removeView(id);
}
Related sample: Dynamic Adding/Deleting of Tabs in Tabbar
The logic of view adding and removing can be studied in detail in the article Dynamic UI Modifications.
TabView is a hybrid of a multiview and tabbar.
It features two methods that allow adding and removing cells together with corresponding tabs.
Each combination of a tab and a cell is configured as:
{ header:"header_title", body:{ ..view config ..}}
The same configuration is passed into the addView() method:
$$("tabview1").addView({
header:"New Tab",
body:{ //webix.uid() generates a random number
template:"New content "+webix.uid()
}
});
The TabView cell can be removed by the removeView() method that requires the ID of this cell:
var id = $$("tabview1").getValue(); //id of active cell
$$("tabview1").removeView(id);
Related sample: Tabview: Adding and Removing Tabs
Webix Tabbar can be equipped with a 'Close' button:
//all tabs
{view:"tabbar", close:true, options:[]}
//some tabs
{view:"tabbar", options:[
{id:1, value:"Tab 1", close:true},
{id:2, value:"Tab 2"}
]}
If a closable tab is used in a separate tabbar, you should provide logic to remove the corresponding view.
tabbar.attachEvent("onOptionRemove", function(id, value){
$$("multiview").removeView(id);
});
Normally, the ID of the tab coincides with the ID of the view.
If a closable tab is used within a tabview, the corresponding tab will be removed from the app automatically.
Back to top