jQuery UI in Action is a practical guide to using and customizing jQuery UI library components to build rich, user-friendly web applications. By working through numerous engaging examples, you’ll move quickly from placing a datepicker on the page to building a complete user interface that includes fAQuery Ul in actionTJ VANTOLLMANNINGShelter islandFor online information and ordering of this and other Manning books, please visitwww.manning.com.thepublisheroffersdiscountsonthisbookwhenorderedinquantityFor more information, please contactSpecial sales DepartmentManning publications co20 Baldwin RoadPOBoⅹ761Shelter island. nY11964Emailorders@manning.como2015 by Manning Publications Co. All rights reservedNo part of this publication may be reproduced, stored in a retrieval system, or transmitted,inany form or by means electronic, mechanical, photocopying, or otherwise, without prior writtenpermission of the publisher.Many of the designations used by manufacturers and sellers to distinguish their products areclaimed as trademarks. Where those designations appear in the book, and manningPublications was aware of a trademark claim, the designations have been printed in initial capsor all capsRecognizing the importance of preserving what has been written, it is Mannings policy to havethe books we publish printed on acid-free paper and we exert our best efforts to that endRecognizing also our responsibility to conserve the resources of our planet, Manning books areprinted on paper that is at least 15 percent recycled and processed without the use of elementalchlorineManning publications coDevelopment editor: Sean dennis20 Baldwin RoadTechnical development editor: Teresa burgerShelter island. ny11964Copyeditor: Teresa WilsonProofreader: Elizabeth martinTypesetter: Gordan SalinovicCover designer: Marija TudorISBN9781617291937Printed in the United states of america12345678910-EBM-191817161514brief contentsPART1 MEET JQUERY UI…IntroducingQuery UI 32 Enhancing uis with widgets 18PART 2 JQUERY UI COREBuilding complex web forms with jQuery UI 484 Enhancing interfaces with layout and utility widgets 775 Adding interaction to your interfaces 1076 Creating rich animations with effects 1857 Theming and styling applications with jQuery ui 162PARt 3 CUSTOMIZATION AND ADVANCED USAGE..9.....183Using the widget factory to build stateful plugins 1859 Extending widgets with the widget factory 21310 Preparing your application for production 288Building a flight-search application 25912 Under the hood of jQuery UI 287contentsforeword xiiipreface xaacknowledgments xvibout this book xuabout the cover illustration xxiPART I MEET JQUERY UI…Introducing jQuery Ur 3.I What is in jQuery UI? 41. 2 The benefits of using jQuery UI 6Cohesive and consistent APis 6. Comprehensive browser support 7Open source and free to use 7. Thorough documentation 7Powerful theming mechanism 7. Emphasis on accessibility 8Stable and maintenance friendly g1. 3 The limitations ofj Query ui 9Lack of widgets 9. jQuery Ul and mobile devices 101. 4 Getting started with the library 11Versions of the library 11 Downloading from the jQuery Urwebsite 11. Downloading from CDNs 121.5 The first example 12CONTENTS1.6 USing an online testing tool 151. 7 Summary 17Enhancing UIs with widgets 182.1 Creating widgets 192.2 Customizing widgets with options 202.3 Modifying widgets with methods 24Invoking methods 24. Using option( to modify widgets 27Using dialogs to edit lists 282.4 Responding to widget changes with events 31Subscribing to widget events 32. Event handlers uscallbacks 34 Event parameters 352.5 Summary 39PART2 J QUERY UI CORE…e●。●413Building complex web forms with jQuery UI 438.1 The challenges of building modern web forms 448.2 Autocomplete: suggesting input options to users 46Using local data 47 Loading from a remote source 49Using autocomplete with third-party services and APIs 528.3 Button: enhancing native buttons, inputs, and links 553.4 Selectmenu: enhancing native elements to collectnumeric data 693.7 Completing the appointment form 718.8 HTML5 elements vs j Query UI widgets 743.9 Summary 764Enhancing interfaces with layout and utility widgets 774.1 Accordion: creating toggleable content panels 78Configuring the accordion widget 79. Adding and removingpanels 81CONTENTS4.2 Tabs: toggling between content areas 82Loading remote content 83 loading movie information in atabs widgeret 834.3 Menu: creating web menus with semantic markup 884.4 Dialog: displaying content in a pop-up container 914.5 Progressbar: displaying the progress of a task 944.6 Slider: selecting a value using moveable handles 97Building range sliders 98. Adding a font size range 994.7 Tooltip: enhancing native tooltips with a customizablecontrol 101Using custom tooltip content 103 Displaying a preview in atooli1044.8 Summary 1065Adding interaction to your interfaces 1075. 1 Draggable: allowing users to move elements 1085.2 Droppable: creating containers that accept draggables 110Building a drag-and-drop game 110. Building a shoppingcart 1145.3 Sortable: rearranging elements in a list 118Building connected lists 121. Building a fruit and vegetablesorting game 1215. 4 Resizable: allowing users to change the size of elements 125Using custom resize handles 126 Building an appointmentscheduler 1275.5 Selectable: allowing users to select elements from a group 1805.6 Creating multidevice interactions: the importanceof touch 132Why doesn'tjQuery UI support touch events? 132.IntroducingQuery ul Touch Punch 1335. 7 Summary 1346Creating rich animations with effects 1356.1 Using effects and the effect() method 136Customizingeffects with easings 138 Making visualassociations with the transfer effect 140