Working with remote tab content
The tabs widget knows how to populate a given tab panel with remote content out of the box. It's all about how we specify the tab links. For example, an href
attribute that points to #tab-content-home
will load the content using the HTML found in that element. But, if instead of pointing to an already-existing element we point to another page, the tabs widget will load the content into the appropriate panel on demand.
This works as expected without passing options to the tabs, but there is the beforeLoad
option should we want to tweak the behavior of the Ajax request in an any way. Let's take a look at some of the ways we can work with remote content using the tabs widget.
How to do it...
First, we'll create the HTML for our tabs widget, which consists of four links. The first three point to existing resources while the fourth doesn't exist, and so the Ajax request will fail.
<div id="tabs"> <ul> <li><a href="ajax/tab1.html">...