Using Widgets
Widgets are interface items you can drop into your application with a minimum of fuss and complication.
Accordion
The accordion widget lets a user expand a list of <div> elements by opening just one at a time, leaving the remaining ones reduced to just a title bar.
First you need to add the data in the semantic layer, using pairs of headers and content panels:
<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>
Next you can activate the accordion by calling the accordion() method on the outer container element:
$(function() {
$("#accordion").accordion();
});
Below code shows a sample application, here dividing the lunch options of a restaurant menu into separate folds of an accordion.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
jquery-ui.css"/>
<title>Menu Choices</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<h2>Choose from the following menu options:</h2>
<div id="accordion">
<h3><a href="#">Starters</a></h3>
<div>
<ul>
<li>Clam Chowder</li>
<li>Ham and Avocado Salad</li>
<li>Stuffed Mushrooms</li>
<li>Chicken Liver Pate</li>
</ul>
</div>
<h3><a href="#">Main Courses</a></h3>
<div>
<ul>
<li>Scottish Salmon</li>
<li>Vegetable Lasagne</li>
<li>Beef and Kidney Pie</li>
<li>Roast Chicken</li>
</ul>
</div>
<h3><a href="#">Desserts</a></h3>
<div>
<ul>
<li>Chocolate Sundae</li>
<li>Lemon Sorbet</li>
<li>Fresh Fruit Salad</li>
<li>Strawberry Cheesecake</li>
</ul>
</div>
</div>
</body>
</html>
This snapshot shows the accordion widget in action. An accordion doesn’t allow multiple content panels to be open at the same time; clicking on the Starters heading will open that section, at the same time closing Main Courses.
Date Picker
Expecting visitors to correctly fill out date fields has always been a tricky business, mainly due to the wide range of possible date formats that may be used.
A date picker is a pop-up calendar widget that allows the user to simply click on the required day, leaving the widget to format the selected date and enter the appropriate data into the correct input field.
Suppose you have a form field to accept a date:
<input type="text" id="datepicker">
You can implement a date picker widget for that field with a single line of code:
$("#datepicker").datepicker();
Below has a complete example you can try.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
jquery-ui.css"/>
<title>Date Picker</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <input type="text" id="datepicker">
</body>
</html>
In the previous section you saw how to use an accordion widget to save some page area by showing just one panel of information from a list of options.
Another common way to achieve such a saving of space is by using a tabbed interface. Once again jQuery makes it a snap. Take a look at the code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
jquery-ui.css"/>
<title>Tabs</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Home</a></li>
<li><a href="#tabs-2">About Us</a></li>
<li><a href="#tabs-3">Products</a></li>
</ul>
<div id="tabs-1">
<p>Welcome to our online store....</p>
</div>
<div id="tabs-2">
<p>We've been selling widgets for 5 years ...</p>
</div>
<div id="tabs-3">
<p>We sell all kinds of widgets ...</p>
</div>
</div>
</body>
</html>
The tabs are contained in an unordered list:
<ul>
<li><a href="#tabs-1">Home</a></li>
...
</ul>
The title of each tab is wrapped inside an anchor element, the href of which points to the ID of the <div> containing the content for that panel:
<div id="tabs-1">
<p>Welcome to our online store....</p>
</div>
The whole of the preceding is wrapped within a div container with id="tabs", and to activate the tabbed interface all you need to do is call the tabs() method against this container element:
$( "#tabs" ).tabs();
Once activated, the interface looks like this.
