We've looked at adding new tabs from already existing content on the page. In addition to this we can also create AJAX tabs that load content from remote files or URLs. Let's extend our previous example of adding tabs so that the new tab content is loaded from an external file. In tabs16.html remove the <label> and the <input> from the page and change the <button> so that it appears as follows:
<button id="add">Add a new tab!</button>
Then change the click-handler so that it appears as follows:
$("#add").click(function() { $("#myTabs").tabs("add", "tabContent.html", "A Remote Tab!"); });
Save this as tabs17.html. This time, instead of specifying an element selector as the second argument of the add method, we supply a relative file path. Instead of generating the new tab from inline content, the tab becomes an AJAX tab and loads the contents of the remote file.
The file used as the remote content in this example is basic and consists of just the following...