jQuery has been a phenomenal success, with many newcomers to the world of JavaScript frameworks choosing it, and many developers moving to it from other frameworks. jQuery UI is tipped to follow suit, and has already seen massive growth and take-up, with more success to follow. By learning how to use it now, you can be a part of its success.
jQuery UI is a collection of engaging widgets and essential interaction-helpers that can help drastically reduce the amount of code you need to write and the amount of time you need to spend developing. Each component comes with a wide range of easy-to-use configurable properties and methods. The components all share a common programming interface that quickly becomes second nature to work with.
Development of the library is ongoing, with highly-skilled developers building it to ever greater levels. New components are being added between major releases, and bug fixes/updates are constantly being tested and applied. jQuery UI is very much a community-driven site, with the team relying on and building upon bug reports and feature requests submitted by the wider development community. Additionally, new components are often derived from the most useful jQuery plug-ins.
This book will give you a head start in learning jQuery UI; exposing the APIs behind the complete range of components as of version 1.5.4, and including much of the functionality of version 1.6 of the library. Each component is methodically and consistently looked at, with many functional examples. Each chapter ends with a full implementational example, looking at ways in which the components can be used in real-world scenarios.
Chapter 1 A general overview of jQuery UI. You'll find out exactly what the library is, where it can be downloaded from and where resources for it can be found. You'll look at the freedom the license gives you to use the library, and how the API has been simplified to give the components a consistent and easy-to-use programming model.
Chapter 2 We begin our journey through jQuery UI by looking at the high-level user interface widgets, focusing on the tabs component; a simple but effective means of presenting structured content in an engaging and interactive widget.
Chapter 3 Next, we take a look at the accordion widget. This is another component dedicated to the effective display of content. Highly engaging and interactive, the accordion makes a valued addition to any web page and its API is exposed in full to show exactly how it can be used.
Chapter 4 In this chapter, we focus on the dialog widget. The dialog behaves in the same way as a standard browser alert, but it does so in a much less intrusive and visitor-friendly manner. We look at how it can be configured and controlled to provide maximum benefit and appeal.
Chapter 5 The slider widget provides a less commonly used, but no less valued, user interface tool for collecting input from your visitors. We look closely at its API throughout this chapter to see the variety of ways in which it can be implemented.
Chapter 6 Next, we look at the date picker. This component packs a huge amount of functionality and appeal into an attractive and highly usable tool allowing your visitors to effortlessly select dates. We look at the wide range of configurations that its API makes possible as well as seeing how easy common tasks, such as skinning and localization, are made.
Chapter 7 The last widget we look at is the auto-complete; a highly professional and desired addition to any page. We'll look at the different data sources you can provide and how to customize the widget, in addition to seeing which properties and methods we have at our disposal. At the time of writing, the latest stable version of the UI library is 1.5.4, but this widget is part of 1.6 release, a sneak preview of what we've got to look forward to.
Chapter 8 We begin looking at the low-level interaction helpers in this chapter, tackling first the related draggable and droppable components. We look at how they can be implemented individually and how they can be used together for maximum effect.
Chapter 9 In this chapter, we look at resizing component and see how it is used with the dialog widget. We see how it can be applied to any element on the page to allow it to be resized in a smooth and attractive way.
Chapter 10 Next, we look at the selectable component, which allows us to add behavior to elements on the page and allow them to be selected individually or as a group. We see that this is one component that really brings the desktop and the browser together as application platforms.
Chapter 11 We look at the final interaction helper in this chapter – the sortable component. This is an especially effective component that allows you to create lists on a page that can be reordered by dragging items to a new position on the list. This is another component that can really help you to add a high level of professionalism and interactivity to your site with a minimum of effort.
Chapter 12 The last chapter of the book is dedicated solely to the special effects that are included with the library. We look at an array of different effects that allow you to show, hide, move, and jiggle elements in a variety of attractive and appealing animations. There is no 'fun with' section at the end of this chapter; the whole chapter is a 'fun with' section.
Very little is required in order to start using jQuery UI. Specifically, you will need the following environment:
A text editor; be it Notepad, or a full-blown development application like Dreamweaver
A browser
A copy of jQuery and a copy of jQuery UI
An internet connection for dynamic data retrieval in some of the examples
This book is for front-end designers and developers who need to quickly learn how to use the jQuery UI User Interface Library. To get the most out of this book, you should have a good working knowledge of HTML, CSS, and JavaScript, and will need to be comfortable using jQuery, the underlying foundation of jQuery UI.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "It is easy to achieve this by manipulating the disabled property of the tabs."
A block of code will be set as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/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>When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be made bold:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/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]
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
</script>
</body>
</html>New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: "Another problem we have with our test page is that clicking the Enable! button while the accordion is already enabled does nothing."
Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an email to <[email protected]>, making sure to mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Visit http://www.packtpub.com/files/code/5128_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to the list of existing errata. The existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide the location address or website name immediately so we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with some aspect of the book, and we will do our best to address it.