Generally, the JavaScript for creating any of the widgets is very simple and straightforward:
$(selector).widgetType();
Each widget type may require a specific markup structure; for example, the tab widget requires a list with anchors in order to render: Table 8-1 illustrates the code needed initialize each of the jQuery UI widgets.
The widget sets also accept an object for configuring the many available options for fine controlling of the widgets.
1. Button
Browsers use the default OS native button for inputs. While this is certainly a functional choice, you’ll often want to create custom styles to match your site’s overall design. Figure 8-2 illustrates how the jQuery UI button class enhances the native version.
The $.button() style is applied to individual buttons whereas $.buttonset() is applied to button groups like radio inputs and checkboxes. Table 8-2 lists the available methods for both types of button widgets.
Table 8-3 shows the options available for the button and buttonset.
As you can tell from the options list, you can also include icons with the buttons. A button may contain both a primary icon (displayed on the left side) and a secondary icon (displayed on the right side). A valid icon name must be given. For example:
$(selector).button({
text : true,
icons : {
primary : ‘ui-icon-alert’,
secondary : ‘ui-icon-lightbulb’
}
});
Code snippet is from ui-button-icon.txt
2. Tabs
Tabs are a great way to pack a dense amount of information on a single page, and help to organize the content. To create a tab widget, you need a list, either ordered or unordered, with an anchor element in each list item. In addition, each list item must contain a reference to the associated tab content. A simple tab setup would look something like the following code sample. The href attribute of the anchors within our tab list reference their associated tab content element ids.
<div id=”tabs”>
<ul>
<li><a href=”#tab1”>Tab #1</a></li>
<li><a href=”#tab2”>Tab #2</a></li>
</ul>
<div id=”tab1”>Tab Number 1</div>
<div id=”tab2”>Tab Number 2</div>
</div>
Code snippet is from sample-tab-markup.txt
Table 8-4 lists the available $.tab() methods.
The following example demonstrates a tab set with the tabs displayed at the bottom that are also reorderable. The example initializes the tabs, uses $.find() to search for elements with the class ui-tabs-nav, and then applies the $.sortable() method to them.
$.sortable() is a jQuery UI Interaction method that allows elements to be sortable by dragging them with the mouse. You’ll learn about $.sortable() in Chapter 9.
The second line adjusts the CSS classes to allow the tabs to be positioned at the bottom of the content panel.
<!DOCTYPE html>
<html>
<head>
<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css”
rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”>
</script>
<script>
$(function() {
$(“#tabs”)
.tabs()
.find( ’’.ui-tabs-nav” )
.sortable({ axis: “x” });
$( “.tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *”)
.removeClass( “ui-corner-all ui-corner-top” )
.addClass( “ui-corner-bottom” );
});
</script>
<style type=”text/css”>
#tabs {
height: 200px;
}
.tabs-bottom {
position: relative;
}
.tabs-bottom .ui-tabs-panel {
height: 140px;
overflow: auto;
}
.tabs-bottom .ui-tabs-nav {
position: absolute !important;
left: 0; bottom: 0;
right:0;
padding: 0 0.2em 0.2em 0;
}
.tabs-bottom .ui-tabs-nav li {
margin-top: -2px !important;
margin-bottom: 1px !important;
border-top: none;
border-bottom-width: 1px;
}
.ui-tabs-selected {
margin-top: -3px Important;
}
</style>
</head>
<body>
<div id=”tabs” class=”tabs-bottom”>
<ul>
<li><a href=”#t1”>Tech Notes</a></li>
<li><a href=”#t2”>Startup Ideas</a></li>
<li><a href=”#t3”>JS Notes</a></li>
</ul>
<div id=”t1”>
<p>Lorum Bacon</p>
</div>
<div id=”t2”>
<p>Lorum Bacon</p>
</div>
<div id=”t3”>
<p>Blah blah</p>
</div>
</div>
</body>
</html>
Code snippet is from sortabletabs.txt
Table 8-5 lists some of the options available when working with $.tabs(). For the full list of options, see the documentation at http://jqueryui.com/demos/tabs/
3. Accordion
Accordion widgets, similarly to tabs, are a great way to display and categorize a large amount of information. This widget is an expandable/collapsible box. It’s not meant to have all of its content expanded at the same time, but rather to display one “slice” of content at a time.
Table 8-6 illustrates the various accordion methods.
The required markup for an accordion is a div with nested headers, where each header contains a link. The content is placed in a nested div following the header, as the following example illustrates:
<!DOCTYPE html>
<html>
<head>
<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”></script>
<script
$(function() {
$( “taccordion” ).accordion();
});
</script> </head>
<body>
<div id=”accordion”>
<h3><a href=”#”>First header</a></h3>
<div>First content</div>
<h3><a href=”#”>Second header</a></h3>
<div>Second content</div>
</div>
</body>
</html>
Code snippet is from accordion.txt
Table 8-7 lists some of the available options when initializing an accordion widget. For the full list of options, consult the documentation available at http://jqueryui.com/demos/accordion/.
4. Autocomplete
Given the large amount of data on the web, the quicker you can get to your results, the better. The autocomplete feature shows a pre-populated list of selectable options as the user types in characters. If you’ve ever used a search engine, you’ve experience autocomplete. Figure 8-3 shows a familiar implementation of autocomplete functionality in action on Google.com.
The following code sample shows a simple implementation of the autocomplete widget. It leverages the source option to reference a local datasource, in this case an array. Other than that, it’s nothing more than a simple call to $.autocomplete and this powerful feature is immediately available. There’s probably no better illustration of the power of jQuery UI. One line of code and you’ve significantly enhanced the usability of your site or application.
<!DOCTYPE html>
<html>
<head>
<script src=’http://code.jquery.com/jquery-1.7.1.js’></script>
<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
<script src=”js/jquery-ui-1.8.13.custom.min.js”></script>
<script >
$(window).load(function(){
$(function() {
var stageWinners = [
“Eddy Merckx”,”Bernard Hinault”,
“Andre Leducq”,”Lance Armstrong”,
“Andre Darrigade”,”Mark Cavendish”,
“Nicolas Frantz”,”Frangois Faber”,
“Jean Alavoine”,”Jacques Anquetil”,
“Rene Le Greves”,”Charles Pelissier”,
“Freddy Maertens”,”Philippe Thys”,
“Louis Trousselier”,”Gino Bartali”,
“Mario Cipollini”,”Miguel Indurain”,
“Robbie McEwen”,”Erik Zabel”,
“Jean Aerts”,”Louison Bobet”,
“Raffaele Di Paco”,”Maurice Archambaud”, “Charly Gaul”,”Walter Godefroot”,
“Gerrie Knetemann”,”Antonin Magne”, “Henri Pelissier”,”Jan Raas”,
“Joop Zoetemelk”,”Thor Hushovd”
];
$( “#tdf” ).autocomplete({
source: stageWinners
});
});
</script>
</head>
<body>
<div>
<label for=”tags”>Tags: </label>
<input id=”tdf”>
</div>
</body>
</html>
Code snippet is from autocomplete.txt
Table 8-8 lists the full selection of $.autocomplete() methods.
Table 8-9 lists the available autocomplete options.
5. Datepicker
The datepicker is one of the more versatile jQuery UI widgets. Chances are, if you’ve made a reservation online for a flight or hotel, you’ve used a JavaScript datepicker.
The “out of the box” version of the datepicker is incredibly useful, but there’s a mind-numbing amount of additional features and options that extends its capabilities. Besides the various ways of presenting the datepicker, it also includes a set of utility functions and keyboard shortcuts for navigation. You could call the default datepicker like so:
$(selector).datepicker();
and get a really nice widget like the one shown in Figure 8-4.
It looks cool, but you have so much more control over the datepicker outside of the default functionality. Table 8-10 gives the full list of $ . datepicker methods.
Table 8-11 lists all the available options for the datepicker widget.
The following example shows how to create a 2 X 2 datepicker, with a button panel:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”>
</script>
<script>
$(function(){
$(‘input#mainField’).datepicker({
appendText : ‘(mm/dd/yyyy)’,dateFormat : ‘dd/mm/yy’,
closeText : ‘X’,
showOn : ‘button’
currentText : ‘Now’,
numberOfMonths : [2,2],
selectOtherMonths : true,
showOtherMonths : true,
showWeek : true,
weekHeader : ‘Week’
});
});
</script>
</head>
<body>
<input type=”text” id=”mainField”>
</body>
</html>
Code snippet is from datepicker.txt
You should see something similar to Figure 8-5.
6. Dialog
The jQuery UI dialog looks infinitely better than the default JavaScript alert box.
A nice replacement for the native JavaScript alert box might go something like this:
<!DOCTYPE html>
<html>
<head>
<link href=”css/ui-lightness/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
<script src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<script src=”js/jquery-ui-1.8.13.custom.min.js”>
</script>
<script>
$(function() {
$( “#dialog” ).dialog({
modal: true, buttons: {
Ok: function() {
$( this ).dialog( “close” );
}
}
});
});
</script>
</head>
<body>
<div id=”dialog” title=”A sample dialog”>
Message Goes here
</div>
</body>
</html>
Code snippet is from dialog.txt
This displays a dialog box with a message and an OK button. The callback function simply closes the dialog. Of note is the modal property. In this case, it’s set to true, which indicates that the rest of the page will be inaccessible while the dialog is open.
The full list of $.dialog() options can be seen in Table 8-12.
Table 8-13 lists all the available dialog widget options.
Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc