O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery UI 1.10: The User Interface Library for jQuery

Book Description

Need to learn how to use JQuery UI speedily? Our guide will take you through implementing and customizing each library component in clear, concise steps, all supported by practical examples to make learning faster.

  • 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

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.

Table of Contents

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