Creating a Tab from JavaScript
Another method for creating tab content is to generate it from the JavaScript layer rather than working with HTML markup like we did in the previous example. This approach can be beneficial when your content is generated based on data obtained through an AJAX request to some server-side logic, or when JavaScript logic is required.
Using our base tab gadget, we’ll edit the Content
section to build tabs using JavaScript
logic:
<Content view="canvas"> <![CDATA[ <div id="tabObject"></div> <script type="text/javascript"> //callback to be executed when tab is selected function runCallback(tabID){ var selectedTab = document.getElementById(tabID); selectedTab.style.color = "#da1d1d"; } //create a new tabset object var tabs = new gadgets.TabSet(); //create new tabs var tab = tabs.addTab("My Tab ", { callback: runCallback, contentContainer: document.getElementById("tabObject"), tooltip: "Select this tab for more details" }); tabs.addTab("Content Tab"); //alter the content of the tab var tabContent = "<b>My New Tab</b>"; document.getElementBy(tab).innerHTML = tab1Content; </script> ]]> </Content>
Note
The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_4/creating_tabs_from_javascript.xml.
In this example, we start by creating a div
node, which will house one of our tabs. In
the script
block, we initialize a new
TabSet
object. Following this, we
create two tabs.
With the first tab, we capture ...
Get Programming Social Applications now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.