We continue sharing small tricks and tips that enable so many abilities when using our JavaScript widget library – DHTMLX Suite. This time we’ll show you how to load content into tabs on demand.
The described ability allows you to decrease the load on your app. The end-users of your product may not need all the content to be load at once. Nobody will deny that this feature will make your app faster and more efficient.
And now let’s see what we need to do for it.
Step 1. First of all, we init the tabbar:
parent: "tabbarObj",
tabs: [
{id: "a1", text: "Tab 1"},
{id: "a2", text: "Tab 2"},
{id: "a3", text: "Tab 3"}
]
});
Notice that we don’t select any tab yet, because we need to add onSelect even handler at first to call it at the tab selection.
Step 2. Then we attach onSelect event handler to the tabbar:
And also we need the event handler itself:
// check if tab is not inited yet
if (initedTabs[id] != true) {
// init component
var myComponent = myTabbar.cells(id).attachComponent();
myComponent.doSome();
...
// mark tab as inited
initedTabs[id] = true;
}
// return 'true' to allow tab to be selected
return true;
};
In this case we create initedTabs variable and save the data in it about whether the tab is selected 1 time at least:
Step 3. The next and final step is to select the first tab (i.e. selected tab on init), and then force onSelect event trigger (set the 1st param to ‘true’):
When you try to apply our tips, feel free to leave your comments about the received result in the comments section below. We’ll be happy to know that our articles come useful for you.