Spry Tabs with Dynamic Content

In the beginner Tabs tutorial we looked at how to create a Spry Tabbed panel from HTML markup that is all on the same page, and while in some situations may be useful in other situations we don't want all the information on the same page. This is typically the case if you have rather large amounts of information that you want to display in each tab. The page would load rather slowly since it would need to load all the information right away.

Enter Spry Tabs with Dynamic Content. With tabs built this way the information is only loaded when the user clicks on the tab, this way your page loads faster since only the information in the first tab will be loaded right away. Additionally we will be using the SpryHTMLPanel which allows us to load external html into our page.

What You Need

For this tutorial you will need SpryHTMLPanel.js, SpryTabbedPanel.js and their associated CSS files.

The Javascript

We first set up our basic tabbed panel as normal and then we create a HTMLPanel for each tab passing the ID's of our TabbedPanel content DIV's to the HTMLPanel constructor function. Lastly we call the loadContent function of the HTMLPanel for tab1 passing it the URL (relative URL in this case) to the file we want to load into the first Tab. We do this because the first tab will be displayed by default and we want to make sure that the data is there when the page is finished loading.

The HTML

The HTML markup for this tabbed panel tutorial is not much different than the beginner tutorial with the exception of the onclick events that we have attached to the tabs. Since we only want to load the data for a tab once the user clicks on the actual tab we simply add a call to the loadContent function on each tab.

The Result