All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: February 2009 Fourth published: December 2013
Production Reference: 1181213 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78216-220-9 www.packtpub.com
Cover Image by Aniket Sawant (firstname.lastname@example.org)
Proofreaders Martin Diver
Reviewers Aamir Afridi
Monica Ajmera Mehta
Edward Gordon Production Coordinator
Lead Technical Editor Akshay Nair
Cover Work Aparna Bhagat
Technical Editors Shashank Desai Rosmy George Jinesh Kampani Manal Pednekar
About the Authors Alex Libby is from an IT support background. He has been involved in supporting end users for the last 15 years in a variety of different environments, and currently works as a Technical Analyst, supporting a medium-sized SharePoint estate for an international parts distributor, based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been with the Open Source movement, and in particular experimenting with CSS/CSS3 and HTML5. To date, Alex has written five books based on jQuery, HTML5 Video, and CSS for Packt Publishing, and has reviewed several more (including one on Learning jQuery). jQuery UI 1.10: The User Interface Library for jQuery is Alex's sixth book with Packt Publishing. I would like to give a huge thanks to Dan Wellman for allowing me the opportunity to update one of his books; it has been a pleasure and a privilege. I just hope I've done justice to it! I also thank the reviewers for their help in reviewing the book, along with their constructive feedback. Thanks must also go to family and friends for their support and encouragement; it makes working the long hours all the more worthwhile.
Dan Wellman is an author and frontend engineer living on the South Coast of
About the Reviewers Aamir Afridi is a London-based frontend developer and has a passion for
Islam AlZatary graduated in Computer Information System from Jordan in 2008. He worked for two years as a PHP web developer, and then he was appointed as a frontend engineer at Bayt.com.
Stephen Holsinger has been developing on the Web professionally for over seven years. He has worked for service companies and manufacturers, primarily focusing on e-commerce platform and website development. His experience stretches from backend system integration to frontend web development. He currently works as an independent contractor lending his expertise to clients implementing retail sites on the Demandware Commerce SaaS Platform.
Kristian Mandrup has a master's degree in Computer Science from Copenhagen University.
He has been developing software since he got his first computer at the age of 12 and has always been curious and always asks the hard questions: why? He likes to push the techs to the limits and live on the bleeding edge. He is always on the move, on new adventures and explorations, since the techs and tools never feel quite good enough. He is a toolmaker and an architect more than a traditional software developer. He has crossed various platform boundaries over the year and has lately shifted from the Ruby on Rails platform to the new frontier of Node.js and the MEAN stack. He is currently exploring single-page, real-time applications. He likes to combine many of the best techs available into a high-powered stack. This is where jQuery UI fits in perfectly. You can find Kristian on GitHub at https://github.com/kristianmandrup and his Twitter handle is @kmandrup.
Marjorie Roswell is a web developer from Baltimore, MD. She has been building websites that serve the community for more than a decade.
She wrote the Drupal 5 Views Recipes book for Packt Publishing. She has developed a GIS system for assisting citizen callers to the Baltimore Office of Recycling, and has taught professional classes in desktop publishing, AutoCAD, and Drupal. She currently serves clients as a NationBuilder website developer. While in college, Marjorie received the Betty Flanders Thomson Prize for Excellence in Botany. Her http://FarmBillPrimer.org site is devoted to mapping and charting federal food and farm policy. The author of this book has a masterful knowledge of jQuery UI, and Packt Publishing staff Anugya Khurana and Prachi Bisht have been terrific to work with during the review process.
www.PacktPub.com Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub. com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at email@example.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
• Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Table of Contents Preface1 Chapter 1: Introducing jQuery UI 7 Downloading the library Using the hosted versions of jQuery UI Setting up a development environment Understanding the structure of the library Examining the folder structure in detail Working with ThemeRoller Categorizing the component categories Introducing the widget factory and effects Browser support Using the book examples Library licensing Introducing the API Events and callbacks Callback arguments Summary
Chapter 2: The CSS Framework and Other Utilities
8 10 11 13 14 16 19 21 21 22 22 23 25 26 27
Working with the files that make up the framework 29 jquery.ui.all.css31 jquery.ui.base.css31 jquery.ui.core.css32 Explaining the individual component framework files
jquery.ui.theme.css33 Linking to the required framework files 34 Using the framework classes 35 Working with containers 35 Using interactions 37
Table of Contents
Examining the icons in detail Adding custom icons Using custom icons – a note
40 41 43
Interaction cues 43 Switching themes quickly and easily 45 Overriding the theme 46 The position utility 49 Using the position utility 50 Explaining collision avoidance 52 Positioning with a function 54 Using the position widget in a real-world example 55 The widget factory 57 Summary58
Chapter 3: Using the Tabs Widget
Chapter 4: The Accordion Widget
Implementing a tab widget 60 Styling the Tabs widget 62 Applying a custom theme to the tabs 64 Configuring the Tabs widget 65 Working with tabs 66 Selecting a tab 66 Disabling a tab 67 Adding transition effects 68 Collapsing a tab 69 Working with the Tab events 69 Binding to events 71 Using tab methods 72 Enabling and disabling tabs 73 Adding and removing tabs 74 Simulating clicks 75 Destroying tabs 76 Getting and setting options 77 Working with AJAX tabs 79 Changing the URL of a remote tab's content 80 Displaying data obtained via JSONP 81 Summary83 Structuring the accordion widget Styling the accordion Configuring an accordion
[ ii ]
86 89 90
Table of Contents
Changing the trigger event 91 Changing the default active header 92 Filling the height of its container 93 Using the accordion animation 95 Listing the accordion events 98 Using the change event 99 Configuring the beforeActivate event 100 Explaining the accordion methods 102 Header activation 102 Adding or removing panels 103 Resizing an accordion panel 106 Accordion interoperability 107 Using multiple accordions 109 Summary111
Chapter 5: The Dialog
Chapter 6: The Slider and Progressbar Widgets
Creating a basic dialog Listing the dialog options Showing the dialog Setting a dialog title Configuring the modality option Adding buttons Adding icons to the dialog buttons Enabling dialog animations Configuring the dialog's dimensions Setting the z-index order of dialogs Controlling the focus Handling the dialog's event callbacks Controlling a dialog programmatically Toggling the dialog Getting data from the dialog Exploring dialog interoperability Creating a dynamic image-based dialog Summary
Introducing the slider widget Custom styling Configuring a basic slider Creating a vertical slider Setting the maximum and minimum values Stepping with the slider widget [ iii ]
Animating the slider widget 148 Setting the slider's value 148 Using multiple handles 148 Working with the range option 149 Using the slider's event API 151 Using slider methods 153 Practical uses 156 Creating a color slider 158 Introducing the progressbar widget 160 Listing the progressbar's options 162 Setting the progressbar's value 162 The progressbar's event API 163 Using progressbar methods 165 Adding indeterminate support 166 Responding to user interaction 168 Implementing rich uploads with a progressbar 173 Summary177
Chapter 7: The Datepicker Widget
Implementing the datepicker widget Selecting dates using inline calendars Configurable options of the datepicker Using the basic options Minimum and maximum dates Changing the elements in the datepicker UI Adding a trigger button Configuring alternative animations Displaying multiple months Displaying the datepicker vertically Changing the date format Updating an additional input element Changing the date format Localizing the datepicker widget Implementing custom localization Implementing callbacks Localizing a datepicker dynamically via rollup Introducing the utility methods Listing the datepicker methods Selecting a date programmatically Showing the datepicker in a dialog box