TJ VanToll FOREWORD BY Scott González M A N N I N G jQuery UI in Action Licensed to tracy moore <[email protected]> Licensed to tracy moore <[email protected]> jQuery UI in Action TJ VANTOLL MANNING Shelter Island Licensed to tracy moore <[email protected]> For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: [email protected] ©2015 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editor: Sean Dennis 20 Baldwin Road Technical development editor: Teresa Burger Shelter Island, NY 11964 Copyeditor: Teresa Wilson Proofreader: Elizabeth Martin Typesetter: Gordan Salinovic Cover designer: Marija Tudor ISBN 9781617291937 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – EBM – 19 18 17 16 15 14 Licensed to tracy moore <[email protected]> brief contents P 1 M Q UI ............................................................1 ART EET J UERY 1 ■ Introducing jQuery UI 3 2 ■ Enhancing UIs with widgets 18 P 2 Q UI C ..........................................................41 ART J UERY ORE 3 ■ Building complex web forms with jQuery UI 43 4 ■ Enhancing interfaces with layout and utility widgets 77 5 ■ Adding interaction to your interfaces 107 6 ■ Creating rich animations with effects 135 7 ■ Theming and styling applications with jQuery UI 162 P 3 C ............................183 ART USTOMIZATION AND ADVANCED USAGE 8 ■ Using the widget factory to build stateful plugins 185 9 ■ Extending widgets with the widget factory 213 10 ■ Preparing your application for production 238 11 ■ Building a flight-search application 259 12 ■ Under the hood of jQuery UI 287 v Licensed to tracy moore <[email protected]> Licensed to tracy moore <[email protected]> contents foreword xiii preface xv acknowledgments xvi about this book xviii about the cover illustration xxi P 1 M Q UI...................................................1 ART EET J UERY 1 Introducing jQuery UI 3 1.1 What is in jQuery UI? 4 1.2 The benefits of using jQuery UI 6 Cohesive and consistent APIs 6 ■ Comprehensive browser support 7 Open source and free to use 7 ■ Thorough documentation 7 Powerful theming mechanism 7 ■ Emphasis on accessibility 8 Stable and maintenance friendly 9 1.3 The limitations of jQuery UI 9 Lack of widgets 9 ■ jQuery UI and mobile devices 10 1.4 Getting started with the library 11 Versions of the library 11 ■ Downloading from the jQuery UI website 11 ■ Downloading from CDNs 12 1.5 The first example 12 vii Licensed to tracy moore <[email protected]> viii CONTENTS 1.6 Using an online testing tool 15 1.7 Summary 17 2 Enhancing UIs with widgets 18 2.1 Creating widgets 19 2.2 Customizing widgets with options 20 2.3 Modifying widgets with methods 24 Invoking methods 24 ■ Using option() to modify widgets 27 Using dialogs to edit lists 28 2.4 Responding to widget changes with events 31 Subscribing to widget events 32 ■ Event handlers vs. callbacks 34 ■ Event parameters 35 2.5 Summary 39 P 2 Q UI C .................................................41 ART J UERY ORE 3 Building complex web forms with jQuery UI 43 3.1 The challenges of building modern web forms 44 3.2 Autocomplete: suggesting input options to users 46 Using local data 47 ■ Loading from a remote source 49 Using autocomplete with third-party services and APIs 52 3.3 Button: enhancing native buttons, inputs, and links 55 3.4 Selectmenu: enhancing native <select> elements 59 3.5 Datepicker: selecting dates from a pop-up calendar 62 Parsing and formatting dates 64 ■ Handling date globalization 67 3.6 Spinner: enhancing native <input> elements to collect numeric data 69 3.7 Completing the appointment form 71 3.8 HTML5 elements vs. jQuery UI widgets 74 3.9 Summary 76 4 Enhancing interfaces with layout and utility widgets 77 4.1 Accordion: creating toggleable content panels 78 Configuring the accordion widget 79 ■ Adding and removing panels 81 Licensed to tracy moore <[email protected]> CONTENTS ix 4.2 Tabs: toggling between content areas 82 Loading remote content 83 ■ Loading movie information in a tabs widget 83 4.3 Menu: creating web menus with semantic markup 88 4.4 Dialog: displaying content in a pop-up container 91 4.5 Progressbar: displaying the progress of a task 94 4.6 Slider: selecting a value using moveable handles 97 Building range sliders 98 ■ Adding a font size range 99 4.7 Tooltip: enhancing native tooltips with a customizable control 101 Using custom tooltip content 103 ■ Displaying a preview in a tooltip 104 4.8 Summary 106 5 Adding interaction to your interfaces 107 5.1 Draggable: allowing users to move elements 108 5.2 Droppable: creating containers that accept draggables 110 Building a drag-and-drop game 110 ■ Building a shopping cart 114 5.3 Sortable: rearranging elements in a list 118 Building connected lists 121 ■ Building a fruit and vegetable sorting game 121 5.4 Resizable: allowing users to change the size of elements 125 Using custom resize handles 126 ■ Building an appointment scheduler 127 5.5 Selectable: allowing users to select elements from a group 130 5.6 Creating multidevice interactions: the importance of touch 132 Why doesn’t jQuery UI support touch events? 132 ■ Introducing jQuery UI Touch Punch 133 5.7 Summary 134 6 Creating rich animations with effects 135 6.1 Using effects and the effect() method 136 Customizing effects with easings 138 ■ Making visual associations with the transfer effect 140 Licensed to tracy moore <[email protected]>