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