jQuery UI

jQuery UI

by Eric Sarrion
Released March 2012
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449316990

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

With the jQuery UI library, you can apply the power and standards of jQuery to user interface design, complete with interactive elements, animation, and themeable widgets. This concise, code-heavy guide demonstrates how to harness interactive features that HTML5 lacks, including tabs, accordions, and dialog boxes. You’ll also learn how to program common but complex tasks, such as managing drag and drop and autocomplete, that make it easier for users to interact with your site.

Publisher resources

Download Example Code

Table of contents

  1. jQuery UI
  2. Preface
    1. Who Should Read This Book
    2. Structure of the Book
    3. Conventions Used in This Book
    4. Using Code Examples
    5. Safari® Books Online
    6. How to Contact Us
    7. Acknowledgments
  3. 1. Introduction to jQuery UI
    1. jQuery UI Installation
    2. Overview of jQuery UI
    3. What Is a CSS Theme?
    4. Which Files Should We Include in Our HTML Pages?
      1. Uncompressed Files
        1. JavaScript files
        2. CSS files
        3. Sample HTML page including uncompressed files
      2. Compressed Files
        1. JavaScript files
        2. CSS files
        3. Sample HTML page including compressed files
    5. Change the CSS Theme
    6. And Now?
  4. 2. Tabs
    1. Basic Principles of Tabs
    2. Formatting Content
    3. The tabs () Method
      1. The tabs (options) Method
        1. Tab appearance and behavior
        2. Managing events associated with tabs
      2. The tabs (“action”, params) Method
    4. The bind () Method
    5. Examples of Using Tabs
      1. Dynamic Creation of Tabs
      2. Modifying the Contents of a Tab Using Ajax
      3. Transmitting the Information to the Server via Ajax
      4. Using the Tabs add Method
      5. Using the tabsadd Event
  5. 3. Accordion Menus
    1. Basic Principles of Accordion Menus
    2. Formatting Content
    3. The accordion () Method
      1. The accordion (options) Method
        1. Options for managing accordion menus
        2. Managing the height of the menu contents
        3. Managing events related to menus
      2. The accordion (“action”, params) Method
    4. Event Management in Accordion Menus with bind ()
    5. Examples of Using Accordion Menus
      1. Opening Any Menu
      2. Loading the Contents of a Menu with Ajax: Using options
      3. Loading the contents of a menu with Ajax: Using accordionchange
  6. 4. Dialog Boxes
    1. Basic Principles of Dialog Boxes
    2. Formatting Content
    3. The dialog () Method
      1. The dialog (options) Method
        1. Managing the visual effects on the dialog box
        2. Managing the behavior of the dialog box
        3. Managing events in the dialog box
      2. The dialog (“action”, params) Method
    4. Event Handling in Dialog Boxes with bind ()
    5. Examples of Using Dialog Boxes
      1. Opening and Closing a Dialog Box
      2. Applying an Effect When Opening or Closing the Dialog Box
      3. Verifying the Closure of the Dialog Box
      4. Hiding the Close Button
      5. Inserting Buttons in the Dialog Box
      6. Inserting Content Using Ajax
      7. Changing the Behavior of a Dialog Box with Effects
  7. 5. Buttons
    1. Basic Principles of Buttons
    2. Formatting Content
    3. The button () Method
      1. The button (options) Method
      2. The button (“action”, params) Method
    4. Event Handling on Buttons with bind ()
    5. Radio Buttons
      1. Displaying Radio Buttons
      2. Improving the Display with buttonset ()
    6. Checkboxes
      1. Displaying Checkboxes
      2. Improving the Display with buttonset ()
    7. Examples of Using Buttons
      1. Displaying Icons in Buttons
      2. Creating a Calculator
        1. Basic program
        2. Improving the program
  8. 6. Progress Bars
    1. Basic Principles of Progress Bars
    2. Formatting Content
    3. The progressbar () Method
      1. The progressbar (options) Method
      2. The progressbar (“action”, params) Method
    4. Handling Events in Progress Bars with bind ()
    5. Examples of Using Progress Bars
      1. Incrementing a Progress Bar
      2. Performing Processing at Different Stages of Completion
  9. 7. Sliders
    1. Basic Principles of Sliders
    2. Formatting Content
    3. The slider () Method
      1. The slider (options) Method
        1. Managing the appearance and behavior of sliders
        2. Managing the values of cursors
        3. Managing events on the slider
      2. The slider (“action”, params) Method
    4. Event Management on the Sliders with bind ()
    5. Examples of Using Sliders
      1. Displaying the Value of One Indicator
      2. Displaying the Values of Two Indicators
      3. Adjusting the Opacity of an Image Using a Slider
  10. 8. Datepickers
    1. Basic Principles of Datepickers
    2. Formatting Content
    3. The datepicker () Method
      1. The datepicker (options) Method
        1. Managing the appearance and visual effects associated with the calendar
        2. Internationalization options
        3. Managing date selection
        4. Managing events on the calendar
      2. The datepicker (“action”, params) Method
    4. Examples of Using Datepickers
      1. Displaying a Calendar in Another Language
      2. Displaying Multiple Months in the Calendar
      3. Displaying a Static Calendar
      4. Indicating Minimum and Maximum Dates
      5. Preventing the Selection of Specific Dates
      6. Preselecting Any Date
        1. Using options.defaultDate
        2. Using datepicker (“setDate”, date)
        3. Special case of dates in foreign formats
      7. Performing an Ajax Request When Selecting a Date
  11. 9. Autocompletion
    1. Basic Principles of Autocompletion
    2. Formatting Content
    3. The autocomplete () Method
      1. The autocomplete (options) Method
        1. Managing autocompletion
        2. Managing events in the list of suggestions
      2. The autocomplete (“action”, params) Method
    4. Event Management on the List of Suggestions with bind ()
    5. Examples of Using the Autocompletion Mechanism
      1. Specifying the Width of the List of Suggestions
      2. Displaying a List of Suggestions at the Opening of the HTML Page
      3. Displaying a List of Suggestions at the Entry of the Cursor in the Input Field
      4. Producing an Effect on the Appearance of the List of Suggestions
      5. Dynamically Creating a List of Suggestions
      6. Dynamically Creating a List of Suggestions Based on the Input Data
      7. Inserting Images in the List of Suggestions
  12. 10. Drag-and-Drop
    1. The draggable () Method
      1. The draggable (options) Method
        1. Specifying the movable elements
        2. Managing element movement
        3. Managing the effect at the end of displacement
        4. Managing displacement constraints
        5. Managing window scroll
        6. Managing movable element events
      2. The draggable (“action”, params) Method
    2. Event Management on the Moved Elements with bind ()
    3. Examples of Using Drag Functionality
      1. Carrying Out a Treatment When Moving
      2. Imposing Limits on Displacement
        1. Constraining the displacement to a given space
        2. Constraining the displacement horizontally or vertically
      3. Moving an Object by Duplicating
    4. The droppable () Method
      1. The droppable (options) Method
        1. Managing the behavior of the elements of deposit
        2. Indicating which elements can be dropped
        3. Managing the appearance of elements of deposit
        4. Managing events on the elements of deposit
      2. The droppable (“action”, params) Method
    5. Event Management on the Elements of Deposit with bind ()
    6. Examples of Using the Drop Functionality: A Shopping Cart
      1. Creating a Shopping Cart with Drag-and-Drop
      2. Adding a Visual Effect to Shopping Cart Deposits
      3. Removing an Item from the Cart
  13. 11. Selecting Items
    1. Basic Principles of Selecting Items
    2. Formatting Content
    3. The selectable () Method
      1. The selectable (options) Method
        1. Managing selected items
        2. Managing events on selected items
      2. The selectable (“action”, params) Method
    4. Event Management in the Selection with bind ()
    5. Examples of Using the Selection Mechanism
      1. Displaying the Order of the Events During the Selection
      2. Preventing the Selection of an Element
      3. Inhibiting Clicks to Select an Item
      4. Managing a Shopping Cart
  14. 12. Permutation of Elements in the Page
    1. Basic Principles of Permutation of Elements
    2. Formatting Content
    3. The sortable () Method
      1. The sortable (options) Method
        1. Specifying and managing the movable elements
        2. Specifying and managing swappable elements
        3. Managing empty spaces
        4. Managing effects at the end of displacement
        5. Managing displacement constraints
        6. Managing window scrolling
        7. Managing events on swappable elements
      2. The sortable (“action”, params) Method
    4. Event Management of the Permutation with bind ()
    5. Examples of Using the Permutation Mechanism
      1. Displaying the Order in Which Events Appear
        1. When swapping in one list
        2. When switching between two lists
      2. Dropping any Element in the List
        1. Inserting images into a list of titles
        2. Adding a visual treatment
  15. 13. Resizing
    1. Basic Principles of Resizing
    2. Formatting Content
    3. The resizable () Method
      1. The resizable (options) Method
        1. Managing resizable elements
        2. Managing resizing effects
        3. Managing events on resized elements
      2. The resizable (“action”, params) Method
    4. Handling Events when Resizing with bind ()
    5. Examples of Using the Resizing Mechanism
      1. Displaying Dimensions of the Element When Resizing
      2. Displaying the Position of the Element When Resizing
      3. Performing an Animation While Resizing
      4. Creating a Resizable Text Box
        1. Input on a single line
        2. Multi-line input
  16. 14. Visual Effects in jQuery UI
    1. New Visual Effects
      1. The effect (effectName, options, duration, callback) Method
      2. The blind Effect
      3. The bounce Effect
      4. The shake Effect
      5. The clip Effect
      6. The drop Effect
      7. The explode Effect
      8. The fold Effect
      9. The highlight Effect
      10. The puff Effect
      11. The pulsate Effect
      12. The scale Effect
      13. The size Effect
      14. The slide Effect
    2. The show (), hide (), and toggle () Methods
    3. The animate () method Improved by jQuery UI
      1. CSS Properties for Managing Colors
      2. New Values for the easing Option
    4. Producing Effects with CSS Classes
      1. The addClass (), removeClass (), and toggleClass () Improved Methods
      2. The switchClass () Method
      3. Example of Using the toggleClass () Method
  17. About the Author
  18. Copyright

Product information

  • Title: jQuery UI
  • Author(s): Eric Sarrion
  • Release date: March 2012
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449316990