jQuery UI 1.6 The User Interface Library for jQuery phần 2 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (852.78 KB, 43 trang )
Tabs
[ 28 ]
Configurable properties
An object can be passed to the tabs() constructor method to congure different
properties of the tabbed interface. The following table provides the available
properties to congure non-default behaviours when using the tabs widget:
Property Default Value Usage
ajaxOptions {}
Options for remote AJAX tabs
cache "false"
Load remote tab content only once
(lazy-load)
cookie null
Show active tab using cookie data on
page load
disabled []
Disable specied tabs on pageload
idPrefix "ui-tabs-"
Used when a remote tab's link element has no
title attribute
event "click"
Tabs event that triggers display of content
fx null
Specify a transition effect when
changing tabs
panelTemplate
<div></div> A string specifying the elements used for the
content section of a dynamically created tab
selected 0
The tab selected by default when the
widget renders
spinner "Loading&#B230"
Specify the loading spinner for remote tabs
tabTemplate
<li><a href="#{href}
"><span>#{label}
</span></a></li>
A string specifying the elements used when
creating new tabs dynamically
unselect false
Hides an already selected tab when it
is clicked
In addition to these properties, default values for all of the class names for the
different elements and states of the tab widget are also dened:
Property Default Value
disabledCLass "ui-tabs-disabled"
hideClass "ui-tabs-hide"
loadingClass "ui-tabs-loading"
navClass "ui-tabs-nav"
panelClass "ui-tabs-panel"
selectedClass "ui-tabs-selected"
unselectClass "ui-tabs-unselect"
Chapter 2
[ 29 ]
We targeted some of these properties when we wrote our custom stylesheet in the
previous example. These properties make the widget more exible in the class names
that are automatically applied to different elements within it.
Let's look at how these congurable properties can be used. For example, if we
wanted to congure the tabs to initially display the second content panel when the
widget is rendered, we could use the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 3</title>
</head>
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it
is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define config object
var tabOpts = {
selected: 1
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
</script>
</body>
</html>
Tabs
[ 30 ]
Save this as tabs3.html in your jqueryui folder. The different tabs, and their
associated content panels, are represented by a numerical index starting at zero,
much like a standard JavaScript array. Specifying a different tab to open by default
is as easy as supplying its index number as the value for the selected property. You
can also specify that no tabs should open initially by supplying null as the value for
this property.
You may want a particular tab to be disabled until a certain condition is met. This is
easily achieved by manipulating the disabled property of the tabs. This property is
an empty array by default, but you can disable a tab just by adding its index as an
item in this array. Change tabs3.html to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 4</title>
</head>
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it
is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div><script type="text/javascript"
src="jqueryui1.6rc2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define config object
var tabOpts = {
selected: 1,
disabled: [0]
Chapter 2
[ 31 ]
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
</script>
</body>
</html>
Save this as tabs4.html in your jqueryui folder. In this example, we added the
index of the rst tab to the disabled array. We could add the indices of other tabs to
this array as well, separated by a comma, to disable multiple tabs by default. When
the page is loaded in a browser, the rst tab will be permanently styled in the hover
state and will not respond to mouse overs or clicks at all as seen in this example:
Transition effects
We can easily add attractive transition effects, which are displayed when tabs open
and close, using the fx property. This property is congured using another object
literal, or an array, inside our conguration object which enables one or more effects.
Let's enable fading effects using the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 5</title>
</head>
Tabs
[ 32 ]
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it
is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js">
</script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define config object
var tabOpts = {
fx: {
opacity: "toggle",
duration: "slow"
}
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
</script>
</body>
</html>
Save this le as tabs5.html in your jqueryui folder. The fx object we created
has two properties. The rst property is the animation. To use fading, we specify
opacity as this is what is adjusted, to use opening animations we would specify
height as the property name. Toggling the opacity simply reverses its current
setting. If it is currently visible, it is made invisible, and vice-versa.
The second property, duration, species the speed at which the animation occurs.
The values for this property are slow, normal, or fast, with normal being
the default.
As we can see, when we run the le, the tab content slowly fades out as a tab
closes and fades in when a new tab opens. Both animations occur during a single
tab interaction. To only show the animation once, when a tab closes for example,
Chapter 2
[ 33 ]
we would need to nest the fx object within an array. Change the last <script> block
in tabs5.html so that it appears as follows:
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define config object
var tabOpts = {
fx: [{
opacity: "toggle",
duration: "slow"
},
null]
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
</script>
The closing effect is contained within an object in the rst item of the array, and
the opening animation is the second. By specifying null as the second item, we
effectively turn off opening animations.
We can also specify different animations and speeds for opening and closing
animations by adding another object as the second array item if we wish instead
of null. Save this as tabs6.html and view the results in your browser.
Tab events
The tab widget denes a series of useful properties that allow you to add callback
functions to easily perform different actions when certain events exposed by the
widget are detected. The following table lists the conguration properties that are
able to accept executable functions on an event:
Property Usage
add
Execute a function when a new tab is added
disable
Execute a function when a tab is disabled
enable
Execute a function when a tab is enabled
load
Execute a function when a tab's remote data has loaded
remove
Execute a function when a tab is removed
select
Execute a function when a tab is selected
show
Execute a function when the content section of a tab is shown
Tabs
[ 34 ]
Each component of the library has callback properties, such as those in the previous
table, which are tuned to look for key moments in any visitor interaction. These
properties make it very easy to add code that reacts to different situations. Any
functions we use with these callbacks are usually executed before the change
happens. Therefore, you can return false from your callback and prevent the action
from occurring.
The previous technique is the standard means of working with events in the
jQuery UI world. There is also a less common way that may become necessary in
certain situations.
We can also use the standard jQuery bind() method to bind an event handler to
a custom event red by the tabs widget in the same way that we could bind to a
standard DOM event, such as a click.
The reason this is possible is that apart from internally invoking any callback
function specied in one of the properties listed above, custom events are also
red when different things occur.
The following table lists the tab's custom binding events and their triggers:
Event Trigger
tabsselect
A tab is selected
tabsload
A remote tab has loaded
tabsshow
A tab is shown
tabsadd
A tab has been added to the interface
tabsremove
A tab has been removed from the interface
tabsdisable
A tab has been disabled
tabsenable
A tab has been enabled
The rst three events are red in succession in the order in which they appear in
the table. If no tabs are remote, tabsselect and tabsshow are red in that order.
These events are all red after the action has occurred. So, the tabsadd event will re
after the new tab has been added. In our next example, we can look at how easy it
is to react to a particular tab being selected using the standard non-bind technique.
Change the tabs6.html le so that it appears as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
Chapter 2
[ 35 ]
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 7</title>
</head>
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it
is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//alert the id of the tab that was selected
function handleSelect(event, tab) {
alert("The tab at index " + tab.index + " was
selected");
}
//define config object
var tabOpts = {
select:handleSelect
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
</script>
</body>
</html>
Save this le as tabs7.html in your jqueryui folder. We made use of the select
callback in this example, although the principal is the same for any of the other
custom events red by tabs. The name of our callback function is provided as the
value of the select property in our conguration object.
Tabs
[ 36 ]
Two arguments will automatically be passed to the function we dene by the
widget when it is executed. These are the original event object, and a custom
object containing useful properties from the tab which is in the function's scope.
Scope can be a tricky subject, and I'm assuming here that you already have some
knowledge of scope in JavaScript. If you don't, the simple explanation for this
example is that whichever tab is clicked will be in the scope chain in the context
of our callback function.
To tell which of the tabs was clicked, we can look at the index property of the second
object (remember these are zero-based indices). This is added, along with a little
explanatory text, to a standard JavaScript alert.
In this example, the callback function was dened outside of the conguration object,
and was instead referenced by the object. We can also dene these callback functions
inside of our conguration object to make our code more efcient. For example,
our function and conguration object from the previous example could have been
dened like this:
var tabOpts = {
add: function(event, tab) {
alert("The tab at index " + tab.index + " was selected");
}
}
See tabs7inline.html in the code download for this chapter for further clarication
on this way of using event callbacks. Whenever a tab is selected, you should see the
alert before the change occurs as seen below:
Chapter 2
[ 37 ]
Using tab methods
The tabs widget contains many different methods, which means it has a rich set of
behaviours and also supports the implementation of advanced functionality that
allows us to work with it programmatically. Let's take a look at these methods which
are listed in the following table:
Method Usage
add Add a new tab programmatically, specifying the URL of the tab's content, a
label, and optionally its index number as arguments
remove Remove a tab programmatically, specifying the index of the tab
to remove
enable Enable a disabled tab based on index number
disable Disable a tab based on index number
select Select a tab programmatically, which has the same effect as when a visitor
clicks a tab, based on index number
load Reload an AJAX tab's content, specifying the index number of the tab
url Change the URL of content given to an AJAX tab; the method expects the
index number of the tab and the new URL
destroy Completely remove the tabs widget
length Return the number of tabs in the widget
rotate Automatically changes the active tab after a specied number of
milliseconds have passed either once or repeatedly
I mentioned jQuery UI's simplied API in Chapter 1, and in the next few examples,
we'll get to see just how simple using it is.
Enabling and disabling tabs
We can make use of the enable or disable methods to programmatically enable
or disable specic tabs. This will effectively switch on any tabs that were initially
disabled. Let's use the enable method to switch on the rst tab, which we disabled
by default in an earlier example. Change the tabs4.html le as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme.css">
Tabs
[ 38 ]
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 8</title>
</head>
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it
is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
<button id="enable">Enable!</button> <button id="disable">Disable!
</button>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//define config object
var tabOpts = {
selected: 1,
disabled: [0]
};
//create the tabs
$("#myTabs").tabs(tabOpts);
//set click hander for the enable button
$("#enable").click(function() {
//enable the first tab
$("#myTabs").tabs("enable", 0);
});
//set click handler for the disable button
$("#disable").click(function() {
//disbale the second tab
$("#myTabs").tabs("disable", 1);
});
});
</script>
</body>
</html>
Chapter 2
[ 39 ]
Save the changed le as tabs8.html in your jqueryui folder. We use the click
event of the enable button to call the tabs constructor once more. This passes in
the string "enable" which species the enable method and the index number of
the tab we want to enable. The disable method is used in exactly the same way.
You'll see that the second tab cannot be disabled until the rst tab has been enabled
and selected.
All methods exposed by each component are used in this same easy way which
you'll see more of as we progress through the book.
Adding and removing tabs
As well as enabling and disabling tabs programmatically, we can also remove or add
completely new tabs dynamically just as easily. Change tabs8.html to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/tabsTheme2.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 9</title>
</head>
<body>
<div>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab,
it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
</div>
<label>Enter a tab to remove:</label><input id="indexNum"><button
id="remove">Remove!</button><br><br>
<button id="add">Add a new tab!</button><br><br>
<div id="newTab">This content will become part of the tabs when the
above button is clicked!</div>
<script type="text/javascript" src="jqueryui1.6rc2/jquery-1.2.6.js">
</script>
Tabs
[ 40 ]
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//create the tabs
$("#myTabs").tabs();
//add click handler for 'remove' button
$("#remove").click(function() {
//get the index to remove
var indexNumber = $("#indexNum").val() - 1;
//remove the tab
$("#myTabs").tabs("remove", indexNumber);
});
//add click handler for 'add' button
$("#add").click(function() {
//define tab label
var newLabel = "A New Tab!"
//add the new tab
$("#myTabs").tabs("add", "#newTab", newLabel);
});
});
</script>
</body>
</html>
Save this as tabs9.html in your jqueryui folder. The rst change is that we're
now linking to a new stylesheet called tabsTheme2.css. This is identical to the rst
custom theme we used, but with the following selectors and rules:
label { float:left; width:140px; }
input, button {
float:left; display:block; width:90px; margin-right:10px;
}
button { width:79px; }
#add { width:134px; }
Apart from some new JavaScript which is required to invoke the add method, we
also need to encase our tabs and their associated content within a container <div>.
Without this, the new tab will be added as the last element in the <body> instead of
the last element in the tabs widget.
Chapter 2
[ 41 ]
The rst of our new functions handles removing a tab using the remove method. This
method requires one additional argument which is the index number of the tab to be
removed. In this example, we get the value entered into the text box and pass it as
the argument.
The add method, which adds a new tab to the widget, can be made to work in several
different ways. In this example, we've specied that existing content already on
the page (the <div> with an id of newTab) should be added to the tabs widget. In
addition to passing the string "add", and specifying a reference to the element we
wish to add to the tabs, we also specify a label for the new tab.
Optionally, we can also specify the index number where the new tab should be
inserted. If the index is not supplied, the new tab will be added as the last tab. When
you run the page in a browser, you should see that although the <div> we have
specied is added to the tabs interface, it doesn't automatically pick up the styling of
the rest of the widget. It is initially visible before it is added to the widget, as shown
in the following screenshot:
There are several easy ways in which this can be xed. If the tab content does not
need to be visible initially, we can simply add the appropriate class names to the
content's container element:
<div id="newTab" class="ui-tabs-panel ui-tabs-hide">This content will be
part of the tabs when the above button is clicked!</div>
Tabs
[ 42 ]
Now when the page loads, this content will not be visible, and will remain hidden
until it has been added to the tabs and its tab has been selected as seen below:
If the content does need to be shown when the page initially loads, or if it is not
known which elements on the page will be added to the tabs, it is simple enough
to add these classes to the tab content <div> when the button is clicked.
Simulating clicks
There may be times when you want to programmatically select a particular tab
and show its content. This could happen as the result of some other interaction by
the visitor. To do this, we can use the select method, which is completely analogous
with the action of clicking a tab. Alter the nal <script> block in tabs9.html so that
it appears as follows:
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//create the tabs
$("#myTabs").tabs();
//add click handler for 'remove' button
$("#remove").click(function() {
//get the index to remove
var indexNumber = $("#indexNum").val() - 1;
//remove the tab
Chapter 2
[ 43 ]
$("#myTabs").tabs("remove", indexNumber);
});
//add click handler for 'add' button
$("#add").click(function() {
//define tab label
var newLabel = "A New Tab!"
//add the new tab
$("#myTabs").tabs("add", "#newTab", newLabel);
//new tab will be at end, get index
var newIndex = $("#myTabs").tabs("length") - 1;
//select the new tab
$("#myTabs").tabs("select", newIndex);
});
});
</script>
Save this as tabs10.html in your jqueryui folder. Now when a new tab is added, it
is automatically selected. The select method requires just one additional parameter
which is the index number of the tab to select.
As any tab we add will be the last tab in the interface, and as the tab indices are zero
based, all we have to do is use the length method to return the number of tabs and
then subtract 1 from this gure. The result is passed to the select method.
Creating a tab carousel
The last method that we'll look at in this chapter is the rotate method. The rotate
method will make all of the tabs, and their associated content panels, display one
after the other automatically. It's a great visual effect and is useful for ensuring that
all of the tab content gets seen by the visitor. For an example of this kind of effect in
action, see the homepage of .
Like the other methods we've seen, the rotate method is extremely easy to use. In a
new le in your text editor, add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme2.css">
Tabs
[ 44 ]
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 11</title>
</head>
<body>
<div>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab,
it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
</div>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//create the tabs and make them rotate
$("#myTabs").tabs().tabs("rotate", 1000, true);
});
</script>
</body>
</html>
Save this le as tabs11.html in your jqueryui folder. Although we can't call the
rotate method directly using the initial tabs constructor method, we can chain it to
the end like we would methods from the standard jQuery library.
The rotate method is used with two additional parameters. The rst parameter is
an integer which species the number of milliseconds each tab should be displayed
before the next tab is shown. The second parameter is a boolean which indicates
whether the cycle through the tabs should occur once or continuously.
Chaining Widgets
Chaining widget methods is possible because like the methods found in
the underlying jQuery library, they always return the jQuery object.
Chapter 2
[ 45 ]
The tab widget also contains a destroy method. This is a method that is common
to all of the widgets found in jQuery UI. Let's see how it works. Create another new
page and add to it the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme2.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 12</title>
</head>
<body>
<div>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab,
it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
</div>
<button id="destroy">Destroy the tabs!</button>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//create the tabs
$("#myTabs").tabs();
//add click handler for button
$("#destroy").click(function() {
//destroy the tabss
$("#myTabs").tabs("destroy");
});
Tabs
[ 46 ]
});
</script>
</body>
</html>
Save this le as tabs12.html in your jqueryui folder. The destroy method,
which we invoke with a click on the <button>, completely removes the tab widget,
returning the underlying HTML to its original state. After the button has been
clicked, you should see a standard HTML list element and the text from each tab,
just like in the following screenshot:
AJAX tabs
We've looked at adding new tabs from existing content already on the page,
in addition to this, we can also create AJAX tabs that load content from remote les
or URLs. Let's extend our example of adding tabs from earlier so that the new tab
content is loaded from an external le. In a new page in your text editor, create the
following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme2.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 13</title>
</head>
<body>
<div>
<ul id="myTabs">
Chapter 2
[ 47 ]
<li><a href="#0"><span>Tab 1</span></a></li> <li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab,
it is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
</div>
<button id="add">Add a new tab!</button>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//create the tabs
$("#myTabs").tabs();
//add click handler for 'add' button //add click handler for 'add' button
$("#add").click(function() {
//define tab label
var newLabel = "A New Tab!"
//add the new tab
$("#myTabs").tabs("add", "tabContent.html", newLabel);
});
});
</script>
</body>
</html>
Save this as tabs13.html in your jqueryui folder. This time, instead of specifying
an element selector as the second argument of the add method, we supply a relative
le path. Instead of generating an in-page tab from the specied element, the tab
becomes an AJAX tab and loads the contents of the remote le.
You probably won't notice it when running this le locally, but when your page is
up online, you'll see that while the tab is loading its remote content the congured
spinner will be displayed. By default, this appears as loading
Tabs
[ 48 ]
The le used as the remote content in this example is extremely basic and consists of
just the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Content Page</title>
</head>
<body>
<div>This is some new content!</div>
</body>
</html>
Save this as tabContent.html in your jqueryui folder. Instead of using JavaScript
to add the new tab in this way, we can use plain HTML to specify an AJAX tab as
well. In this example, we want the tab which will display the remote content to be
available all the time, not just after clicking a button. In a new page in your text
editor, add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme2.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 14</title>
</head>
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
<li><a href="tabContent.html"><span>AJAX Tab</span></a></li>
</ul> </ul>
<div id="0">This is the content panel linked to the first tab, it
is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
Chapter 2
[ 49 ]
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//create the tabs
$("#myTabs").tabs();
});
</script>
</body>
</html>
Save this as tabs14.html in your jqueryui folder. All we do is specify the path to
the remote le (the same one we created in the previous example) using the href
attribute of a link element in the mark-up from which the tabs are created.
Unlike static tabs, we don't need a corresponding <div> element with an id that
matches the href of the link. The additional elements required for the tab content
will be generated automatically by the widget. We also don't need to wrap our tabs
in an outer container <div>. Here's what the widget will look like:
Tabs
[ 50 ]
I've included the Firebug console in the previous screenshot so you can see where in
the DOM of the page the new tab content is added.
You should note that there is no inherent cross-domain support built into the
AJAX functionality of the tabs widget. So, unless additional PHP, or some other
server-scripting language, is employed as a proxy, or you wish to make use of
JSON structured data, les and URLs should be under the same domain as the
page running the widget.
As well as loading data from external les, it can also be loaded from URLs. This is
great when retrieving content from a database using query strings. Methods related
to AJAX tabs include the load and url methods. The load method is used to load
and reload the contents of an AJAX tab, which could come in handy for refreshing
content that changes very frequently.
The url method is used to change the URL where the AJAX tab retrieves its content.
Let's look at a brief example of these two methods in action. Change tabs13.html so
that it matches the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
tabsTheme2.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 15</title>
</head>
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
<li><a href="tabContent.html"><span>AJAX Tab</span></a></li>
</ul>
<div id="0">This is the content panel linked to the first tab, it
is shown by default.</div>
<div id="1">This content is linked to the second tab and will be
shown when its tab is clicked.</div>
<select id="fileChooser">
<option>tabContent.html</option>
<option>tabContent2.html</option>
</select>
Chapter 2
[ 51 ]
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//define function to be executed on document ready
$(function(){
//create the tabs
$("#myTabs").tabs();
//define handler for change event on select element
$("#fileChooser").change(function() {
//load either file 1 or file 2
this.selectedIndex == 0 ? loadFile1() : loadFile2();
//load the new file
function loadFile1() {
$("#myTabs").tabs("url", 2, "tabContent.html").tabs("load", 2);
}
function loadFile2() {
$("#myTabs").tabs("url", 2, "tabContent2.html").tabs("load", 2);
}
});
});
</script>
</body>
</html>
Save the new le as tabs15.html in your jqueryui folder. We've added a simple
<select> element to the page that lets you choose the content to display in the AJAX
tab. In the JavaScript, we set a change handler for the <select> and specied an
anonymous function to be executed each time the event is detected.
This function checks the selectedIndex of the <select> element and calls either
the loadFile1 or loadFile2 function. The <select> element is in the execution
scope of the function so we can refer to it using the this keyword.
These functions are where things gets interesting. We rst call the url method,
specifying two additional arguments which are the index of the tab whose URL we
want to change followed by the new URL. We then call the load method, which is
chained to the url method, specifying the index of the tab whose content we want
to load.
Tabs
[ 52 ]
You can run the new le in your browser and select the AJAX tab. Then use the
<select> to choose the second le and watch as the content of the tab is changed
as seen here:
You'll also see that the tab content will be reloaded even if the AJAX tab isn't selected
when you use the select element.
Fun with tabs
Let's pull in some external content for our nal tabs example. If we use the tabs
widget, in conjunction with the standard jQuery library getJSON method, we can
by-pass the cross-domain exclusion policy and pull in a feed from another domain
to display in a tab. In a new le in your text editor, create the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " />TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<link rel="stylesheet" type="text/css" href="styles/
flickrTabTheme.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI AJAX Tabs Example</title>
</head>
<body>
<div>
<ul id="myTabs">
<li><a href="#0"><span>Nebula Information</span></a></li>
