Jquery Ui

jQuery UI

Eric Sarrion

Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo

jQuery UI
by Eric Sarrion
Copyright © 2012 Eric Sarrion. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Onlineeditions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com.

Editor: Simon St. Laurent Production Editor: Rachel Steely Copyeditor: Jasmine Perez Proofreader: Jasmine Perez Revision History for the First Edition:

Cover Designer: Karen Montgomery InteriorDesigner: David Futato Illustrator: Robert Romano

2012-03-09 First release See http://oreilly.com/catalog/errata.csp?isbn=9781449316990 for release details.

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. jQuery UI, the image of a turnstone, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designationsused by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions,or for damages resulting from the use of the information contained herein.

ISBN: 978-1-449-31699-0 [LSI] 1331233105

Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix 1. Introduction to jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . 1
jQuery UI Installation Overview of jQuery UI What Is a CSS Theme? Which Files Should We Include in Our HTML Pages? Uncompressed Files Compressed Files Change the CSS Theme And Now? 1 1 3 4 4 7 8 9

2. Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Basic Principles of Tabs FormattingContent The tabs () Method The tabs (options) Method The tabs (“action”, params) Method The bind () Method Examples of Using Tabs Dynamic Creation of Tabs Modifying the Contents of a Tab Using Ajax Transmitting the Information to the Server via Ajax Using the Tabs add Method Using the tabsadd Event 11 13 15 15 17 17 18 18 19 21 22 24

3. Accordion Menus . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Basic Principles of Accordion Menus Formatting Content The accordion () Method The accordion (options) Method 25 27 29 30

iii

The accordion (“action”, params) Method Event Management in Accordion Menus with bind () Examples of Using Accordion Menus Opening Any Menu Loading the Contents of a Menu with Ajax: Using optionsLoading the contents of a menu with Ajax: Using accordionchange

31 32 32 32 33 35

4. Dialog Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Basic Principles of Dialog Boxes Formatting Content The dialog () Method The dialog (options) Method The dialog (“action”, params) Method Event Handling in Dialog Boxes withbind () Examples of Using Dialog Boxes Opening and Closing a Dialog Box Applying an Effect When Opening or Closing the Dialog Box Verifying the Closure of the Dialog Box Hiding the Close Button Inserting Buttons in the Dialog Box Inserting Content Using Ajax Changing the Behavior of a Dialog Box with Effects 37 39 42 42 45 45 46 46 48 49 50 51 52 54

5. Buttons . . . . . . . . . . . . . . . . ....