Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

jQuery UI 1.7: The User Interface Library for jQuery: Build highly interactive web applications with ready-to-use widgets from the jQuery User Interface library

eBook
$25.99 $28.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

jQuery UI 1.7: The User Interface Library for jQuery

Chapter 1. Introducing jQuery UI

Welcome to jQuery UI 1.7: The User Interface Library for jQuery. This resource aims to take you from your first steps to an advanced usage of the JavaScript library of UI widgets and interaction helpers built on top of the hugely popular and easy-to-use jQuery.

jQuery UI extends the underlying jQuery library to provide a suite of rich and interactive widgets along with code-saving interaction helpers, built to enhance the user interfaces of your websites and web applications. It's the official UI library for jQuery and although it is not the only library built on top of jQuery, in my opinion it is without a doubt the best.

jQuery has quickly become one of the most popular JavaScript libraries in use today and jQuery UI will definitely become the extension library of choice, thanks to its ever-growing range of common UI widgets, high levels of configurability, and its exceptional ease of implementation.

jQuery UI runs on top of jQuery and hence the syntax used to initialize, configure, and manipulate the different components is in the same comfortable, easy-to-use style as jQuery. We automatically get all of the great jQuery functionality at our disposal as well. The library is also supported by a range of incredibly useful tools, such as the CSS framework that provides a range of helper CSS classes, and the excellent ThemeRoller application that allows us to visually create our own custom themes for the widgets.

Over the course of this book we'll look at each of the existing components that make up the library. We will also be looking at their configuration options and trying out their methods in order to fully understand how they work and what they are capable of. By the end of the book, you'll be an expert in its implementation.

We already have a basic working knowledge of the components when we add a new component because of the consistency in how we implement the different components that make up the library. Therefore, we only need to learn any widget-specific functionality.

This chapter will cover the following topics:

  • How to obtain a copy of the library

  • How to set up a development environment

  • The structure of the library

  • ThemeRoller

  • The format of the API

  • Browser support

  • How the library is licensed

Downloading the library


To obtain a copy of the library, we should visit the download builder at http://jqueryui.com/download, which gives us a range of different options for building a download package that is tailored for our particular implementational requirements. The following screenshot shows the download builder:

We can either download the complete current release of the library, or a complete package of the legacy 1.6 version, or we can select the components that we want and download a custom package.

Note

This book is specifically tailored towards version 1.7 of jQuery UI (at the time of writing the current stable release is 1.7.2) and is not compatible with legacy versions of the library. jQuery UI 1.7 requires jQuery 1.3.

The page is laid out in a really friendly and easy-to-use way. It lists all of the different components in their respective groupings (core, interaction helpers, and widgets) and allows us to choose from one of 25 different predesigned themes along with providing information about the package (including both its compressed and uncompressed size).

We'll look at the different files found within the library in just a moment, but for now we should download the complete library. It will contain everything we need, including the JavaScript and CSS files, as well as any images from the current theme that different components rely on. It even contains the latest version of jQuery itself, so we don't need to worry about downloading this separately.

For now, just use the Current (stable) link at the top of the page. This will give us the default theme that is called smoothness. We'll look at downloading and using other themes in the next chapter.

Tip

Hosted Files

In reality, we don't even need to download the library in order to implement it in a production web application. Both jQuery and jQuery UI are hosted on Google's content delivery network (CDN), so we can include <script> elements that link to these files instead of using local versions. Only the complete library (not individual components) is available, although there are a range of different releases.

On a live site that receives a lot of international traffic, using a CDN will help ensure that the library files are downloaded to a visitor's computer from a server that is geographically close to them. This helps in making the response quicker for them and saving our own bandwidth. This is not recommended for local development however.

Setting up a development environment


We'll need a location to unpack the jQuery UI library in order to easily access the different parts of it within our own files. We should first create a project folder, into which all of our example files, as well as all of the library and other associated resources can be saved.

Create a new directory on your C: drive, or in your home directory, and call it jqueryui. This will be the root folder of our project and will be the location where we store all of the example files from the code download.

To unpack the library, open it in a compression program, such as the open source 7zip, and choose the extract or unzip command. When prompted for a location to unpack the archive to, choose the jqueryui folder that we just created.

The code examples that we'll be looking at use other resources, mostly images, but occasionally some PHP files too. The accompanying code download available on Packt's website contains all of the images that we'll be using. You should download this now if you can, visit: http://www.packtpub.com/support/book/user-interface-library-for-jquery. You'll need to create a new folder within the jqueryui project folder and call it img, then unpack all of the subdirectories within the img folder in the archive to this new folder.

The code download also contains all the examples files as well as the library itself. It would be incredibly easy to unpack the entire code download to a local directory and run each of the examples as they are.

These files are provided in the hope that they will be used for reference purposes only! I'd urge you to follow the examples in the book on the fly, manually creating each file as it is shown instead of just referring to the files in the code download. The best way to learn code is to code.

This is all we need to do, no additional platforms or applications need to be installed and nothing needs to be configured or set up. As long as you have a browser and some kind of code or text editor then everything is in place to begin developing with the library.

The structure of the library


Let's take a moment to look at the structure of the unpacked library. This will give us a feel for its composition and structure. Open up the jqueryui folder where we unpacked the library. The contents of this folder should be as follows:

  • A css directory

  • A development-bundle directory

  • A js directory

  • An index file

The css folder is used to store the complete CSS framework that comes with the library. Within this folder will be a directory that has the name of the theme we chose when building the download package. Inside this is single file that contains all of the CSS, and a folder that holds all the images used by the theme. We can also store the CSS files we'll be creating in the css directory.

The js folder contains minified versions of jQuery and the complete jQuery UI library, with all components rolled into this one file. In a live project, it is the js and css folders that we'd want to drop into our site.

The index is an HTML file that gives a brief introduction to the library and displays all of the widgets along with some of the CSS classes. If this is the first time you've ever used the library, you can take a look to see some of the things that we'll be working with throughout the course of this book.

The development-bundle directory contains a series of resources to help us develop with the library and contains the following subdirectories:

  • A demos folder

  • A docs folder

  • An external folder

  • A themes folder

  • A ui folder

Also present in the directory are the license files, documents showing the version of the library and its main contributors. An uncompressed version of jQuery is also present.

The demos folder contains a series of basic examples showing all of the different components in action. The docs folder contains API documents for each of the different components.

The external folder contains a set of tools that may be of use to developers. They are as follows:

  • The bgiframe plugin

  • The cookie plugin

  • A JavaScript implementation of the diff algorithm jsDiff

  • The unit testing suite qunit

  • The simulate plugin

The bgiframe plugin is used to fix the issue in IE6 where <select> elements appear above other content, regardless of z-index. This plugin is due to be removed in release 1.8 of jQuery UI and replaced with the stackfix utility. The cookie plugin makes it easy to use browser cookies. jsDiff is the JavaScript implementation of an algorithm that can be used to compare two strings and show the differences between them.

qunit is jQuery's unit testing suite and can be used to run unit tests on widgets and plugins that we may create. For more information on QUnit visit: http://docs.jquery.com/QUnit. The simulate plugin simulates mouse and keyboard events and allows the functionality of widgets or plugins to be tested automatically.

Other than the cookie plugin (which we use in Chapter 12), we won't be using any of these tools in the examples we'll look at.

The themes folder contains two different themes—the first is the base theme that is a neutral, minimal theme of grey tones. The second is the smoothness theme, which we chose when building our download. It is very similar to the base theme.

The ui folder contains the individual, uncompressed source files of each of the different components of the library.

ThemeRoller


ThemeRoller is a custom tool written with jQuery and PHP. It allows us to visually produce our own custom jQuery UI theme and package it up in a convenient, downloadable archive, which we can drop into our project with no further coding (other than using the stylesheet in a HTML <link> element of course).

ThemeRoller was created by Filament Group, Inc. and makes use of a number of jQuery plugins released into the open source community. It can be found at http://ui.jquery.com/themeroller.

ThemeRoller is certainly the most comprehensive tool available for creating your own jQuery UI themes. We can very quickly and easily create an entire theme comprised of all of the styles needed for targeting elements, including the images we'll need.

If you looked at the index.html file a little earlier on then the ThemeRoller landing page will instantly be familiar as it shows all of the UI widgets on the page, skinned with the default smoothness theme.

The page features an interactive menu on the left that is used to work with the application. Each item within the menu expands to give you access to the available style settings for each part of the widget, such as the content and the clickable elements.

Here we can create our custom theme with ease and see the changes instantly as they are applied to the different visible parts of each widget on the page:

When you're not feeling particularly inspired while creating a theme, there is also a gallery of preconfigured themes that you can instantly use to generate a fully configured theme. Aside from this convenience, the best thing about these preselected themes is that when you select one, it is loaded into the left menu. Therefore, you can easily make little tweaks as required:

Without a doubt, this is the best way to create a visually appealing custom theme that matches the UI widgets to your existing site, and is the recommended method of creating custom skins.

Installing and using the new theme is as easy as selecting or creating it. The Download theme button in the above screenshot takes us back to the download builder, which has the CSS and images for the new theme integrated into the download package.

If it's just the new theme we want, we can deselect the actual components and just download the theme. Once downloaded the css folder within the downloaded archive will contain a folder that has the name of the theme. We can simply drag this folder into our own local css folder, and then link to the stylesheet from our own pages.

We won't be looking at this tool in much detail throughout the book. We'll be focusing instead on the style rules that we need to manually override in our own stylesheet to generate the desired look of the examples.

Component categories


There are two types of components found within the jQuery UI library—low-level interaction helpers that are designed to work primarily with mouse events, and there are the widgets that produce visible objects on the page, which are designed to perform a specific function.

The interaction helpers category includes the following components:

  • Draggable

  • Droppable

  • Resizable

  • Selectable

  • Sortable

The higher-level widgets included (at the time of writing) are as follows:

  • Accordion

  • Datepicker

  • Dialog

  • Progressbar

  • Slider

  • Tabs

The ui.core.js file that is required by all other library components, comes under neither category, but could nevertheless be seen as the core component of the library. This file sets up the construct that all widgets use to function and adds some core functionality which is shared by all of the library components. This file isn't designed to be used standalone, and exposes no functionality that can be used outside of another component.

Apart from these components, there is also a series of UI effects that produce different animations or transitions on targeted elements on the page. These are excellent for adding flair and style to our pages, in addition to the strong functionality of the components. We'll be looking at these effects in the final chapter of the book.

I'd like to add here that the jQuery UI library is currently undergoing a rapid period of expansion and development. It is also constantly growing and evolving with bug fixes and feature enhancements continually being added. It would be impossible to keep entirely up-to-date with this aggressive expansion and cover components that are literally about to be released.

The great thing about jQuery UI's simplified API is that once you have learned to use all of the existing components (as this book will show you), you'll be able to pick up any new components very quickly. As this book is being written, there are already a number of new components nearing release, with many more in the pipeline and all of these components will automatically be ThemeRoller-ready.

Browser support


Like jQuery itself, jQuery UI supports all of the major browsers in use today including the following:

  • IE6, IE7, and IE8

  • Firefox 2 and Firefox 3

  • Opera 9 and Opera 10

  • Safari 3 and Safari 4

  • Chrome 1, Chrome 2, and Chrome 3

This is by no means a comprehensive list, but I think that it includes the most common browsers currently in use, making jQuery UI very well supported.

The widgets are built from semantically correct HTML elements generated as needed by the components. Therefore, we won't see excessive or unnecessary elements being created or used.

Book examples


The library is as flexible as standard JavaScript, and by this I mean that there is often more than one way of doing the same thing, or achieving the same end. For example, the callback properties used in the configuration objects for different components, can usually take either references to functions or inline anonymous functions, and use them with equal ease and efficiency.

In practice, it is advisable to keep your code as minimal as possible (which jQuery really helps with anyway). But to make the examples more readable and understandable, we'll be separating as much of the code as possible into discrete modules. Therefore, callback functions and configuration objects will be defined separately from the code that calls or uses them.

To reduce the number of files that we have to create and work with, all of the JavaScript will go into the host HTML page on which it runs, as opposed to in separate files. Please keep in mind that this is not advisable for production websites. I'd also just like to make it clear that the main aim throughout the course of this book is to learn how to use the different components that make up jQuery UI. If an example seems a little convoluted, it may simply be that this is the easiest way to expose the functionality of a particular method or property, as opposed to a situation that we would find ourselves coding for in regular implementations.

Library licensing


Like jQuery, the jQuery UI library is dual licensed under the MIT and GPL open source licenses. These are both very unrestrictive licenses that allow the creators of the library to take credit for its production and retain intellectual rights over it, without preventing us as developers from using the library in any way that we like.

The MIT license explicitly states that users of the software (jQuery UI in this case) are free to use, copy, merge, modify, publish, distribute, sublicense, and sell. This lets us do pretty much whatever we want with the library.

The only requirement imposed by this license is that we must keep the original copyright and warranty statements intact.

This is an important point to make. You can take the library and do whatever you like with it. Build applications on top of the library and then sell those applications, or give them away for free. Put the library in embedded systems like cell phone OSs and sell those. But whatever you do, leave the original text file with John Resig's name in it present. You may also duplicate it word for word in the help files or documentation of your application.

The MIT license is very lenient, but because it is not copyrighted itself, we are free to change it. We could therefore demand that users of our software give attribution to us instead of the jQuery team, or pass off the code as our own.

The GPL license is copyrighted, and offers an additional layer of protection for the library's creators and the users of our software. jQuery is provided free and open source and the GPL license ensures that it will always remain free and open source, regardless of the environment it may end up in, and that the original creators of the library are given the credit they deserve. Again, the original GPL license file must be available within your application.

The licenses are not there to restrict us in any way and are not the same as the kind of license that comes with software you might install on your computer. In most cases, how the library is licensed will not be a consideration when using it.

API introduction


The version 1.5 release of jQuery UI was a milestone in the library's history. This was the release in which the API for each component was significantly simplified, making the library both easier to use and more powerful.

Once you've worked with one of the components from the library, you'll instantly feel at home when working with any of the other components since the methods of each component are called in exactly the same way.

The API for each component consists of a series of different methods. While these are all technically methods, it may be useful to categorize them based on their particular function.

The plugin method

This method is used to initialize the component and is simply the name of the component followed by parentheses. I will refer to this throughout the book as the plugin method or widget method.

Common methods

The destroy method can be used with any of the components to completely disable the widget being used and in most cases returns the underlying HTML to its original state. The option method is used by all components to get or set any configuration option after initialization. The enable and disable methods are used by most library components.

Specialized methods

Each component has one or more methods unique to that particular component that performs specialized functions.

Methods are consistently called throughout each of the different components by passing the method that we'd like to call as a simple string to the component's plugin method, with any arguments that the method accepts passed as strings after the method name.

For example, to call the destroy method of the accordion component, we would simply do as follows:

$("#someElement").accordion("destroy");

See how easy that was? Every single method exposed by all of the different components is called in this same simple way.

Some methods, like standard JavaScript functions, accept arguments that trigger different behavior in the component. If we wanted to call the disable method on a tab in the tabs widget for example, we would do the following:

$("#someElement").tabs("disable", 1);

The disable method, when used in conjunction with the tabs widget, accepts an integer which refers to the index of the individual tab within the widget.

Similarly, to enable the tab again we would use the enable method:

$("#someElement").tabs("enable", 1);

Again we supply an argument to modify how the method is used. Sometimes the arguments that are passed to the method vary between components. The accordion widget for example does not enable or disable individual accordion panels, only the whole widget, so no additional arguments following the method name are required.

The option method is slightly more complex than the other common methods, but it's also more powerful and is just as easy to use. The method is used to either get or set any configurable option after the component has been initialized.

To use the option method in getter mode to retrieve the current value of an option, we could use the following code:

$("#someElement").accordion("option", "navigation");

This code would return the current value of the navigation option of the accordion widget. So to trigger getter mode we just supply the option name that we'd like to retrieve.

In order to use the option method in setter mode instead, we can supply the option name and the new value as arguments:

$("#someElement").accordion("option", "navigation", "true");

This code would set the value of the navigation option to true. As you can see, although the option method gives us the power to both get and set configuration options, it still retains the same easy to use format of the other methods.

Using jQuery UI feels just like using jQuery and having built up confidence coding with jQuery, moving on to jQuery UI is the next logical step to take.

Events and callbacks

The API for each component also contains a rich event model that allows us to easily react to different interactions. Each component exposes its own set of unique custom events, yet the way in which these events are used is the same, regardless of which event is used.

We have two ways of working with events in jQuery UI. Each component allows us to add callback functions that are executed when the specified event is fired, as values for configuration options. For example, to use the select event of the tabs widget that is fired any time a tab is selected, we could use the following code:

var config = {
  select: function() {
  }
};

The name of the event is used as the option name and an anonymous function is used as the option value. We'll look at all of the individual events that are used with each component in later chapters.

The other way of working with events is to use jQuery's bind() method. To use events in this way, we simply specify the name of the component followed by the name of the event.

$("#someElement").bind("tabsselect", function() {
});

Usually, but not always, callback functions used with the bind() method are executed after the event has been fired, while callbacks specified using configuration options are executed directly before the event is fired.

The callback functions are called in the context of the DOMElement that triggers the event. For example, in a tabs widget with several tabs, the select event will be fired from the actual tab that is clicked, not the tabs widget as a whole. This is extremely useful to us as developers, because it allows us to associate the event with a particular tab.

Some of the custom events fired by jQuery UI components are cancellable and if stopped can be used to prevent certain actions taking place. The best example of this (which we'll look at later in the book) is preventing a dialog widget from closing by returning false in the callback function of the beforeclose event.

beforeclose: function() {
  if (readyToClose === false) {
    return false
  }	
}

If the arbitrary condition in this example was not met, false would be returned by the callback function and the dialog would remain open. This is an excellent and powerful feature that can give us fine-grained control over the widget's behavior.

Callback arguments

Any anonymous functions that we supply as callback functions to the different events are automatically passed two objects, the original event object, and an object containing useful information about the widget. The information contained with the second object varies between components, we'll look at this in greater detail in later chapters.

To use these two objects we just specify them as arguments to the function.

var config = {
  select: function(e, ui) {

    e.target

    ui.index
  }
};

Every single component will automatically supply these objects to any callback functions we define.

Summary


jQuery UI removes the difficulty of building engaging and effective user interfaces. It provides a range of components that can quickly and easily be used out of the box with little configuration. They each expose a comprehensive set of properties and methods for integration with your pages or applications if a more complex configuration is required.

Each component is designed to be efficient, lightweight, and semantically correct along with making use of the latest object-oriented features of JavaScript. When combined with jQuery, it provides an awesome addition to any web developer's toolkit.

So far, we've seen how the library can be obtained, how your system can be set up to utilize it, and how the library is structured. We've also looked at how the different widgets can be themed or customized, how the API simply and consistently exposes the library's functionality, and the different categories of component.

We've covered some important topics during the course of this chapter, but now, thankfully, we can get on with using the components of jQuery UI and get down to some proper coding!

Left arrow icon Right arrow icon

Key benefits

  • Organize your interfaces with reusable widgets: accordions, date pickers, dialogs, sliders, tabs, and more
  • Enhance the interactivity of your pages by making elements drag-and-droppable, sortable, selectable, and resizable
  • Packed with examples and clear explanations of how to easily design elegant and powerful front-end interfaces for your web applications
  • Revised and targeted at jQuery UI 1.7

Description

Modern web application user interface design requires rapid development and proven results. jQuery UI, a trusted suite of official plug-ins for the jQuery JavaScript library, gives you a solid platform on which to build rich and engaging interfaces with maximum compatibility and stability, and minimum time and effort. jQuery UI has a series of ready-made, great-looking user interface widgets and a comprehensive set of core interaction helpers designed to be implemented in a consistent and developer-friendly way. With all this, the amount of code that you need to write personally to take a project from conception to completion is drastically reduced. Specially revised for version 1.7 of jQuery UI, this book has been written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build upon your knowledge, taking you from beginner to advanced usage in a series of easy-to-follow steps. In this book, you'll learn how each component can be initialized in a basic default implementation and then see how easy it is to customize its appearance and configure its behavior to tailor it to the requirements of your application. You'll look at the configuration options and the methods exposed by each component's API to see how these can be used to bring out the best of the library. Events play a key role in any modern web application if it is to meet the expected minimum requirements of interactivity and responsiveness, and each chapter will show you the custom events fired by the component covered and how these events can be intercepted and acted upon.

Who is this book for?

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.

What you will learn

  • How the brand-new CSS framework styles each of the library components
  • Organizing different sections of related content as tabs and accordions to save space on your page while maximizing its content
  • Displaying messages, images, and interactive content like forms using the dialog widget
  • Using sliders for volume and color control of your applications by dynamically scrolling left and right, displaying different ranges
  • Allowing your site visitors to select dates from the calendar using the date picker widget
  • Adding an attractive and effective deterministic progress bar to give visitors essential feedback on how much longer a process has left to complete
  • Providing a drag-and-drop mechanism to let users directly rearrange elements around the page
  • Making a range of elements of a group selectable and taking collective actions on them
  • Creating a page with content boxes that can be sorted into various positions to suit the visitor s personal preference
  • Adding flair to your actions with animation effects
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Nov 09, 2009
Length: 392 pages
Edition : 1st
Language : English
ISBN-13 : 9781847199720
Languages :
Concepts :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Publication date : Nov 09, 2009
Length: 392 pages
Edition : 1st
Language : English
ISBN-13 : 9781847199720
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 103.98
Network Analysis using Wireshark Cookbook
$54.99
jQuery UI 1.7: The User Interface Library for jQuery
$48.99
Total $ 103.98 Stars icon

Table of Contents

13 Chapters
Introducing jQuery UI Chevron down icon Chevron up icon
The CSS Framework Chevron down icon Chevron up icon
Tabs Chevron down icon Chevron up icon
The Accordion Widget Chevron down icon Chevron up icon
The Dialog Chevron down icon Chevron up icon
Slider Chevron down icon Chevron up icon
Datepicker Chevron down icon Chevron up icon
Progressbar Chevron down icon Chevron up icon
Drag and Drop Chevron down icon Chevron up icon
Resizing Chevron down icon Chevron up icon
Selecting Chevron down icon Chevron up icon
Sorting Chevron down icon Chevron up icon
UI Effects Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.4
(5 Ratings)
5 star 60%
4 star 20%
3 star 20%
2 star 0%
1 star 0%
Ben Nadel Nov 23, 2009
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This weekend, I finished reading jQuery UI 1.7 [The User Interface Library For jQuery] by Dan Wellman (released by PACKT Publishing). It's a follow-up to his jQuery UI 1.6 book, which I reviewed in early 2009. With a technology that is evolving as fast as jQuery, it's important that the documentation keep up such that we may know how to best leverage the tools that we have available; Dan's latest book, jQuery UI 1.7, does just that - bringing us completely up-to-speed with all aspects of the jQuery UI library.One thing that I was thrilled to see when reading this book was that after a brief introduction to jQuery and jQuery UI, Dan dives directly into the jQuery UI CSS framework. With the 1.7 release of jQuery UI, the library has become completely standardized in the way that the markup and CSS classes are applied to the library widgets. Not only does this make it easy to uniformly skin the widgets (via tools like ThemeRoller), it provides a good structure for anyone hoping to create their own custom user interface widgets.Dan covered the CSS framework in chapter 2, but I was very happy to find the CSS framework being brought up as a consistent theme throughout the book; each widget-based chapter takes time to examine the programmatically-generated HTML of each widget instance as well as how the phenotype of each widget might be overridden with some simple CSS rules. Whether through the configuration options or through customized CSS, Dan really does a great job of painting a picture of flexibility; as with any library, it's important to not feel like you've locked yourself into a corner, and Dan takes great care to drive home the point that jQuery UI is empowering, not constraining.The CSS exploration in this book was very good and it made me greedy; I wanted to see more. Particularly, I would have loved to have seen a chapter dedicated to the concept of authoring your own jQuery UI widgets. Throughout the book, Dan touches on this concept, showing us were we might use a ui-widget-header or ui-widget-content class to theme our own markup, but authoring as a topic was never really fleshed out. Of course, I have a suspicion that an exploration in authoring widgets would fill another book, not just another chapter (hint hint ;)).Beyond the CSS framework and all that it entails (which is something that I was particular interested in), the book provides exhaustive documentation of how the UI widgets and UI behaviors work. Starting each widget with the out-of-the-box default configuration, Dan discusses what each option, callback, and event binding does and how we can leverage them to enhance the user experience. When it comes to the UI behaviors (drag, drop, resize, select, sort), which are by nature less tangible, Dan takes extra care to step through examples with increasing complexity, describing real-world scenarios in which the various behaviors might be used (ex. maze game, task list, image viewer, Google-style portal).In addition to the focused explanation of each widget and behavior, Dan also demonstrates the high-intercompatability of the various library components. Whether it's nesting tabbed interfaces within accordions, accordion interfaces within modal windows, date pickers as modal prompts, or applying sortability behaviors to tabbed interfaces, I was very happy to see that the underlying structure of the jQuery UI library was so well thought out that nesting one widget within another causes no complications.Overall, jQuery UI 1.7 [The User Interface Library For jQuery] is a very thorough book and definitely a solid resource for anyone looking to become familiar with the ins and outs of the library. Dan Wellman has a clear and easy-to-follow writing style and lays out his examples with increasing complexity in a way that everyone can understand. He appears to have a good grasp on the underlying CSS framework, and in fact, this is a topic on which I'd like to see him write a lot more.
Amazon Verified review Amazon
Filipe Munhoz Jan 26, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Usefull book
Amazon Verified review Amazon
J. Mccollum Feb 25, 2010
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book is intended to take you step by step through the jQuery UI library, an official suite of plugins that will take your web apps to the next level. It covers the high and low level widgets that make up the UI library, and the CSS and effects frameworks too.The book will be easy enough for relative beginners to pick up the book (although some knowledge of HTML, CSS, and basic jQuery is required). Each chapter starts with the most basic usage example so that everyone can get up and running quickly. More options and methods are gradually introduced (with plenty of code samples along the way. Each piece of code can also be downloaded from the publisher's web site to save you having to type it!) Each chapter ends with a more advanced example which shows off an imaginative use of the library.The book is engaging and well-written, and will serve as a great reference book after you read it through once. I would heartily recommend this title for beginner to intermediate users of jQuery UI.
Amazon Verified review Amazon
Scott L. Petrovic Jan 25, 2012
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
I didn't finish this book, but read about 40% of it. After you read that much of it, you can pretty much see all of the patterns that jQuery UI uses and use it for any of the components. The book talks about the structure and framework of jQuery UI at the beginning, then goes on to the different components and tells you how to style and make them function. It isn't a javascript programming book, so it doesn't get too fancy with clever ways you can use the jQuery UI framework. It is a good reference book that can get you started with the API and get something up running quick.Learning the basics of jQuery isn't that difficult if you are decent at programmer - which is great for a designer like me. If you get this book, the beginning chapters are the most useful, and the later chapters will turn into more of a reference if you decide to use a component that you haven't used. Then again, the online jQuery documentation is pretty dang good with examples and source, so you will probably end up using the jQuery website after you are somewhat comfortable with everything.
Amazon Verified review Amazon
AM Jan 30, 2011
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
The content: I was expecting a book that would tell me *how* to use jQuery UI effectively, much like "Learning JQuery" might help one learn JQuery --- reading that book made me feel "Oh, cool, I didn't realize that it is so easy to do this very useful thing with JQuery!". I was expecting insights. What I found in this book, instead, was more or less dry documentation. So now I know how to use the tabs widget --- but I saw nary a word about when to use it. Sure, I understand that this is not a book dedicated to UI design theory, but any insights about when to use the various widgets was conspicuously absent. Even if the author did not wish to go far or explicitely down that path, the very choice of examples can help. All examples here are dry. For example, all examples in the chapter on "Dialogs" use "Lorem ipsum dolor ... ". Go read online tutorials and then the docs.Very unprofessional downloadable code: I started downloading and unpacking the code. Not yet finished, since it has only been half an hour. Why, one wonders, can code from a 350 page book be 25 MB zipped? Here is why: There are 13 chapters, and a folder for each in the downloadable code. Each folder contains about 5 MB of unzipped code. *Each* chapter contains the full development bundle of Jscript UI containing all demos, all documentation, multiple copies of some themes, and about 10kb of actual code. I am quite angry at the un-professionalism here: what should have taken 5 minutes to find, unzip and start using is still an hour from completing unzipping (on my fast computer --- my description above was based only on the first 5 chapters being unzipped. I am not sure what horrors lurk in later chapters).
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela