jQuery UI 1.10: The User Interface Library for jQuery

jQuery UI 1.10: The User Interface Library for jQuery
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Packed with clear explanations of how to easily design elegant and powerful frontend interfaces for your web applications
  • A section covering the widget factory including an in-depth example of how to build a custom jQuery UI widget
  • Revised with updated code and targeted at both jQuery UI 1.10 and jQuery 2

Book Details

Language : English
Paperback : 502 pages [ 235mm x 191mm ]
Release Date : December 2013
ISBN : 1782162208
ISBN 13 : 9781782162209
Author(s) : Alex Libby , Dan Wellman
Topics and Technologies : All Books, Web Development, jQuery, Open Source

Table of Contents

Chapter 1: Introducing jQuery UI
Chapter 2: The CSS Framework and Other Utilities
Chapter 3: Using the Tabs Widget
Chapter 4: The Accordion Widget
Chapter 5: The Dialog
Chapter 6: The Slider and Progressbar Widgets
Chapter 7: The Datepicker Widget
Chapter 8: The Button and Autocomplete Widgets
Chapter 9: Creating Menus
Chapter 10: Working with Tooltips
Chapter 11: Drag and Drop
Chapter 12: The Resizable Component
Chapter 13: Selecting and Sorting with jQuery UI
Chapter 14: UI Effects
Appendix: Help and Support
  • Chapter 1: Introducing jQuery UI
    • Downloading the library
      • Using the hosted versions of jQuery UI
    • Setting up a development environment
    • Understanding the structure of the library
      • Examining the folder structure in detail
    • Working with ThemeRoller
    • Categorizing the component categories
      • Introducing the widget factory and effects
    • Browser support
    • Using the book examples
    • Library licensing
    • Introducing the API
      • Events and callbacks
      • Callback arguments
    • Summary
    • Chapter 2: The CSS Framework and Other Utilities
      • Working with the files that make up the framework
        • jquery.ui.all.css
        • jquery.ui.base.css
        • jquery.ui.core.css
          • Explaining the individual component framework files
        • jquery.ui.theme.css
      • Linking to the required framework files
      • Using the framework classes
        • Working with containers
        • Using interactions
        • Adding icons
          • Examining the icons in detail
          • Adding custom icons
          • Using custom icons – a note
        • Interaction cues
      • Switching themes quickly and easily
        • Overriding the theme
      • The position utility
        • Using the position utility
        • Explaining collision avoidance
      • Positioning with a function
      • Using the position widget in a real-world example
      • The widget factory
      • Summary
      • Chapter 3: Using the Tabs Widget
        • Implementing a tab widget
        • Styling the Tabs widget
        • Applying a custom theme to the tabs
        • Configuring the Tabs widget
        • Working with tabs
          • Selecting a tab
          • Disabling a tab
          • Adding transition effects
          • Collapsing a tab
        • Working with the Tab events
          • Binding to events
        • Using tab methods
        • Enabling and disabling tabs
        • Adding and removing tabs
        • Simulating clicks
        • Destroying tabs
        • Getting and setting options
        • Working with AJAX tabs
        • Changing the URL of a remote tab's content
        • Displaying data obtained via JSONP
        • Summary
        • Chapter 4: The Accordion Widget
          • Structuring the accordion widget
          • Styling the accordion
          • Configuring an accordion
          • Changing the trigger event
          • Changing the default active header
          • Filling the height of its container
          • Using the accordion animation
          • Listing the accordion events
          • Using the change event
          • Configuring the beforeActivate event
          • Explaining the accordion methods
            • Header activation
          • Adding or removing panels
          • Resizing an accordion panel
          • Accordion interoperability
            • Using multiple accordions
          • Summary
          • Chapter 5: The Dialog
            • Creating a basic dialog
            • Listing the dialog options
              • Showing the dialog
              • Setting a dialog title
              • Configuring the modality option
            • Adding buttons
              • Adding icons to the dialog buttons
            • Enabling dialog animations
            • Configuring the dialog's dimensions
            • Setting the z-index order of dialogs
              • Controlling the focus
            • Handling the dialog's event callbacks
            • Controlling a dialog programmatically
              • Toggling the dialog
            • Getting data from the dialog
            • Exploring dialog interoperability
            • Creating a dynamic image-based dialog
            • Summary
            • Chapter 6: The Slider and Progressbar Widgets
              • Introducing the slider widget
              • Custom styling
              • Configuring a basic slider
                • Creating a vertical slider
                • Setting the maximum and minimum values
                • Stepping with the slider widget
                • Animating the slider widget
                • Setting the slider's value
                • Using multiple handles
                • Working with the range option
              • Using the slider's event API
                • Using slider methods
              • Practical uses
              • Creating a color slider
              • Introducing the progressbar widget
                • Listing the progressbar's options
                • Setting the progressbar's value
                • The progressbar's event API
                • Using progressbar methods
                • Adding indeterminate support
              • Responding to user interaction
              • Implementing rich uploads with a progressbar
              • Summary
              • Chapter 7: The Datepicker Widget
                • Implementing the datepicker widget
                  • Selecting dates using inline calendars
                • Configurable options of the datepicker
                  • Using the basic options
                • Minimum and maximum dates
                • Changing the elements in the datepicker UI
                  • Adding a trigger button
                • Configuring alternative animations
                  • Displaying multiple months
                  • Displaying the datepicker vertically
                  • Changing the date format
                • Updating an additional input element
                • Changing the date format
                  • Localizing the datepicker widget
                  • Implementing custom localization
                  • Implementing callbacks
                  • Localizing a datepicker dynamically via rollup
                • Introducing the utility methods
                • Listing the datepicker methods
                  • Selecting a date programmatically
                  • Showing the datepicker in a dialog box
                • Implementing an AJAX-enabled datepicker
                • Summary
                • Chapter 8: The Button and Autocomplete Widgets
                  • Introducing the button widget
                    • Implementing the standard buttons
                      • Creating buttons using the <input> or <button> tags
                    • Theming
                    • Exploring the configurable options
                    • Adding the button icons
                    • Input icons
                    • Adding the Button events
                    • Creating button sets
                      • Checkbox button sets
                      • Radio button sets
                    • Working with button methods
                  • Introducing the autocomplete widget
                    • Working with local data sources
                    • Using an array of objects as the data source
                  • Configurable autocomplete options
                    • Configuring minimum length
                    • Appending the suggestion list to an alternative element
                  • Working with autocomplete events
                  • The autocomplete methods
                    • Working with remote data sources
                      • Retrieving content based on input
                    • Passing a function as a source option
                  • Displaying HTML in the list of suggestions
                  • Summary
                  • Chapter 9: Creating Menus
                    • Implementing a basic menu widget
                    • Exploring the menu CSS framework classes
                    • Configuring menu options
                    • Styling menus
                      • Displaying the state of the selected menu options using icons
                      • Adding dividers to menus
                    • Using menu methods
                    • Enabling and disabling menu options programmatically
                    • Adding and removing menu items
                    • Working with menu events
                    • Binding to events
                    • Creating horizontal menus
                    • Combining with other widgets
                    • Designing context menus
                    • Enhancing a select menu
                    • Summary
                    • Chapter 10: Working with Tooltips
                      • Implementing a default tooltip
                      • Exploring the tooltip CSS framework classes
                      • Overriding the default styles
                        • Using prebuilt themes
                        • Creating custom themes with ThemeRoller
                      • Configuring tooltip options
                      • Positioning tooltips accurately
                        • Using the position widget
                      • Tracking mouse movement with tooltips
                      • Displaying certain tooltips
                      • Displaying AJAX content in tooltips
                        • How can we tell if it has worked?
                      • Using effects in tooltips
                      • Working with HTML in tooltips
                        • The dangers of working with HTML
                      • Using tooltip methods
                      • Enabling and disabling tooltips
                      • Displaying tooltips programmatically
                      • Handling tooltip events
                        • Binding to tooltip events
                      • Playing videos
                      • Filling out and validating forms
                      • Summary
                      • Chapter 11: Drag and Drop
                        • The deal with draggables and droppables
                        • Getting started with the draggable widget
                          • Implementing a basic drag
                        • Configuring the draggable options
                          • Using the configuration options
                          • Resetting the dragged elements
                          • Adding the drag handle support
                          • Adding the helper elements
                          • Constraining the drag
                          • Snapping
                        • Draggable event callbacks
                        • Draggable's methods
                        • Getting started with the droppable widget
                        • Configuring droppables
                          • Configuring accepted draggables
                        • Configuring drop tolerance
                        • Understanding the droppable callback options
                          • Setting the scope options for droppable
                          • Configuring the greedy option
                        • Droppable methods
                        • Creating a maze game using the widgets
                        • Summary
                        • Chapter 12: The Resizable Component
                          • Implementing a basic resizable widget
                          • Listing the resizable options
                            • Configuring the resize handles
                            • Adding additional handle images
                            • Defining size limits
                            • Resizing ghosts
                            • Containing the resize
                            • Handling aspect ratio
                            • Resizable animations
                            • Simultaneous resizing
                            • Preventing unwanted resizes
                          • Defining resizable events
                          • Looking at the resizable methods
                          • Creating resizable tabs
                          • Summary
                          • Chapter 13: Selecting and Sorting with jQuery UI
                            • Introducing the selectable widget
                            • Introducing the Selectee class names
                            • Configuring the selectable component
                              • Filtering selectables
                              • Canceling the selection
                            • Handling selectable events
                              • Working with vast amounts of selectables
                            • Working with selectable methods
                              • Refreshing selectables
                            • Creating a selectable image viewer
                              • Adding the behavior
                              • Styling the image selector
                            • Getting started with the sortable widget
                            • Styling the sortable widget
                            • Configuring sortable options
                              • Placeholders
                              • Sortable helpers
                              • Sortable items
                              • Connecting lists
                            • Reacting to sortable events
                            • Connecting callbacks
                            • Listing the sortable methods
                              • Serializing
                            • Exploring widget compatibility
                              • Adding draggables
                            • Summary
                            • Chapter 14: UI Effects
                              • Using the core effects file
                                • Using color animations
                                • Using class transitions
                                • Advanced easing
                              • Highlighting specified elements
                                • Adding additional effect arguments
                              • Bouncing
                              • Shaking an element
                                • Transferring an element's outline
                              • Scaling elements on a page
                              • Exploding elements on a page
                              • Creating a puff effect
                              • Working with the pulsate effect
                              • Adding the drop effect to elements
                              • Implementing the sliding effect
                                • Using easing
                              • Understanding the blind effect
                              • Clipping elements
                              • Folding elements
                              • Summary
                              • Appendix: Help and Support
                                • Downloading jQuery
                                  • Updating the code samples
                                • Getting help
                                • Changing themes
                                • Getting help from the community
                                • Need to ask a question?
                                • Getting help via IRC chat
                                • Asking at Stack Overflow
                                • Reporting a bug in the library

                                Alex Libby

                                Alex Libby is from an IT support background. He has been involved in supporting end users for the last 15 years in a variety of different environments, and currently works as a Technical Analyst, supporting a medium-sized SharePoint estate for an international parts distributor, based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been with the Open Source movement, and in particular experimenting with CSS/CSS3 and HTML5. To date, Alex has written five books based on jQuery, HTML5 Video, and CSS for Packt Publishing, and has reviewed several more (including one on Learning jQuery). jQuery UI 1.10: The User Interface Library for jQuery is Alex's sixth book with Packt Publishing.

                                Dan Wellman

                                Dan Wellman is an author and frontend engineer living on the South Coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the Tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

                                Sorry, we don't have any reviews for this title yet.

                                Code Downloads

                                Download the code and support files for this book.

                                Submit Errata

                                Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

                                Sample chapters

                                You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                                Frequently bought together

                                jQuery UI 1.10: The User Interface Library for jQuery +    Haskell Data Analysis Cookbook =
                                50% Off
                                the second eBook
                                Price for both: €32.25

                                Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                                What you will learn from this book

                                • Theming of the widgets through the CSS framework
                                • Apply themes and widgets to style your interface
                                • Configure the different components, including the new Tooltip and Menu widgets
                                • Understand the different options that each component uses
                                • Learn more about each widget programmatically using its methods and event hooks
                                • Add flair to your interface with animation effects
                                • Discover advanced functionality supported by the different Tabs

                                In Detail

                                jQuery UI, the official UI widget library for jQuery, gives you a solid platform on which to build rich and engaging interfaces quickly, with maximum compatibility, stability, and effort. jQuery UI’s ready-made widgets help to reduce the amount of code that you need to write to take a project from conception to completion.

                                jQuery UI 1.10: The User Interface Library for jQuery has been specially revised for Version 1.10 of jQuery UI. It is written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build up your knowledge, taking you from beginner to advanced user in a series of easy-to-follow steps.

                                Throughout the book, you'll learn how to create a basic implementation of each component, then customize and configure the components to tailor them to your application.

                                Each chapter will also show you the custom events fired by the components covered and how these events can be intercepted and acted upon to bring out the best of the library.

                                We will then go on to cover the use of visually engaging, highly configurable user interface widgets. At the end of this book, we'll look at the functioning of all of the UI effects available in the jQuery UI library.


                                This book consists of an easy-to-follow, example-based approach that leads you step-by-step through the implementation and customization of each library component.

                                Who this book is for

                                This book is for frontend designers and developers who need to learn how to use jQuery UI quickly. To get the most out of this book, you should have a good working knowledge of HTML, CSS, and JavaScript, and should ideally be comfortable using jQuery.

                                Code Download and Errata
                                Packt Anytime, Anywhere
                                Register Books
                                Print Upgrades
                                eBook Downloads
                                Video Support
                                Contact Us
                                Awards Voting Nominations Previous Winners
                                Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                                Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software