jQuery UI 1.6 The User Interface Library for jQuery phần 2 ppt

Configurable propertiesAn object can be passed to the tabs constructor method to configure different properties of the tabbed interface.. The following table provides the available prope

Trang 1

Configurable properties

An object can be passed to the tabs() constructor method to configure different properties of the tabbed interface The following table provides the available properties to configure non-default behaviours when using the tabs widget:

(lazy-load)

page load

title attribute

changing tabs

content section of a dynamically created tab

widget renders

Trang 2

We targeted some of these properties when we wrote our custom stylesheet in the previous example These properties make the widget more flexible in the class names that are automatically applied to different elements within it.

Let's look at how these configurable properties can be used For example, if we wanted to configure 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" "http://www.w3.org/TR/html4/strict.dtd">

Trang 3

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:

Trang 4

Transition effects

We can easily add attractive transition effects, which are displayed when tabs open and close, using the fx property This property is configured using another object literal, or an array, inside our configuration object which enables one or more effects Let's enable fading effects using the following code:

Trang 5

<body>

setting If it is currently visible, it is made invisible, and vice-versa.

The second property, duration, specifies 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 file, 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,

Trang 6

we would need to nest the fx object within an array Change the last <script> block

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 defines 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 configuration properties that are able to accept executable functions on an event:

Trang 7

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 fired 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 specified in one of the properties listed above, custom events are also fired when different things occur.

The following table lists the tab's custom binding events and their triggers:

The first three events are fired in succession in the order in which they appear in the table If no tabs are remote, tabsselect and tabsshow are fired in that order

These events are all fired after the action has occurred So, the tabsadd event will fire 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 file so that it appears as follows:

<head>

Trang 8

//alert the id of the tab that was selected

function handleSelect(event, tab) {

alert("The tab at index " + tab.index + " was

Save this file 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 fired by tabs The name of our callback function is provided as the value of the select property in our configuration object.

Trang 9

Two arguments will automatically be passed to the function we define 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 defined outside of the configuration object, and was instead referenced by the object We can also define these callback functions inside of our configuration object to make our code more efficient For example, our function and configuration object from the previous example could have been defined like this:

var tabOpts = {

add: function(event, tab) {

alert("The tab at index " + tab.index + " was selected");

}

on this way of using event callbacks Whenever a tab is selected, you should see the alert before the change occurs as seen below:

Trang 10

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:

label, and optionally its index number as arguments

to remove

clicks a tab, based on index number

index number of the tab and the new URL

milliseconds have passed either once or repeatedly

I mentioned jQuery UI's simplified 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 specific tabs This will effectively switch on any tabs that were initially disabled Let's use the enable method to switch on the first tab, which we disabled

by default in an earlier example Change the tabs4.html file as follows:

Trang 11

Trang 12

Save the changed file 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 specifies 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 first 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:

<head>

themes/flora/flora.tabs.css">

<link rel="stylesheet" type="text/css" href="styles/tabsTheme2.css">

<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>

Trang 13

//get the index to remove

var indexNumber = $("#indexNum").val() - 1;

//define tab label

var newLabel = "A New Tab!"

//add the new tab

$("#myTabs").tabs("add", "#newTab", newLabel);

label { float:left; width:140px; }

Trang 14

The first 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 specified 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 specified 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 fixed 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>

Trang 15

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 final <script> block in tabs9.html so that

//get the index to remove

var indexNumber = $("#indexNum").val() - 1;

//remove the tab

Trang 16

$("#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;

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 figure 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 http://www.cnet.com.

Like the other methods we've seen, the rotate method is extremely easy to use In a new file in your text editor, add the following code:

Trang 17

Save this file as tabs11.html in your jqueryui folder Although we can't call the

the end like we would methods from the standard jQuery library.

an integer which specifies 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

Trang 18

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:

<button id="destroy">Destroy the tabs!</button>

Trang 19

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 files

or URLs Let's extend our example of adding tabs from earlier so that the new tab content is loaded from an external file In a new page in your text editor, create the following page:

Trang 20

//define tab label

var newLabel = "A New Tab!"

//add the new tab

$("#myTabs").tabs("add", "tabContent.html", newLabel);

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 file path Instead of generating an in-page tab from the specified element, the tab becomes an AJAX tab and loads the contents of the remote file.

You probably won't notice it when running this file locally, but when your page is

up online, you'll see that while the tab is loading its remote content the configured

spinner will be displayed By default, this appears as loading

Trang 21

The file used as the remote content in this example is extremely basic and consists of just the following code:

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:

<li><a href="tabContent.html"><span>AJAX Tab</span></a></li>

Định dạng
Số trang	43
Dung lượng	852,78 KB