Tải bản đầy đủ

jQuery UI 1 10 the user interface library for jquery

www.it-ebooks.info


jQuery UI 1.10:
The User Interface Library for jQuery

Build highly interactive web applications with
ready-to-use widgets

Alex Libby
Dan Wellman

BIRMINGHAM - MUMBAI

www.it-ebooks.info


jQuery UI 1.10:

The User Interface Library for jQuery
Copyright © 2013 Packt Publishing


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 (aniket_sawant_photography@hotmail.com)

www.it-ebooks.info


Credits
Authors

Project Coordinator

Alex Libby

Anugya Khurana

Dan Wellman



Proofreaders
Martin Diver

Reviewers
Aamir Afridi

Samantha Lyon

Islam AlZatary

Sandra Hopper

Stephen Holsinger

Indexers

Kristian Mandrup

Monica Ajmera Mehta

Marjorie Roswell

Priya Subramani

Acquisition Editors

Graphics

Joanne Fitzpatrick

Abhinash Sahu

Edward Gordon
Production Coordinator

Douglas Paterson

Aparna Bhagat

Lead Technical Editor
Akshay Nair

Cover Work
Aparna Bhagat

Technical Editors
Shashank Desai
Rosmy George
Jinesh Kampani
Manal Pednekar

www.it-ebooks.info


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

the UK and working in London. By day he works for Skype and has a blast writing
application-grade JavaScript. By night he writes books and tutorials focused mainly
on frontend web development. He is also a staff writer for the Tuts+ arm of the
Envato network, and occasionally writes for .Net magazine. He's the proud father of
four amazing children, and the grateful husband of a wonderful wife.

www.it-ebooks.info


About the Reviewers
Aamir Afridi is a London-based frontend developer and has a passion for

JavaScript and jQuery. He has been working on different projects for Google,
YouTube, Facebook, and Apple. He is now helping TES in refactoring the frontend
architecture. He is always keen in learning new JavaScript frameworks and
wrote quite a few jQuery plugins and jQuery UI extensions. He can be found at
http://aamirafridi.com/ on the Web. He is aamirafridi on Twitter and GitHub.

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.

He deals with jQuery, jQuery UI, HTML/HTML5, CSS/CSS3, Bootstrap framework,
Mailer engine, JavaScript frameworks (RequireJS, AngularJS), and with all design
approaches (fixed, fluid, responsive, adaptive). He also likes the "mobile first
approach".

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.

www.it-ebooks.info


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.it-ebooks.info


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 service@packtpub.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

http://PacktLib.PacktPub.com

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. 

Why Subscribe?

• 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.

www.it-ebooks.info


www.it-ebooks.info


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

29

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

33

jquery.ui.theme.css33
Linking to the required framework files
34
Using the framework classes
35
Working with containers
35
Using interactions
37

www.it-ebooks.info


Table of Contents

Adding icons

39

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

59

Chapter 4: The Accordion Widget

85

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 ]

www.it-ebooks.info

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

113

Chapter 6: The Slider and Progressbar Widgets

141

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 ]

www.it-ebooks.info

114
116
118
118
120
121
122
123
124
125
126
127
129
130
130
132
134
140
142
143
145
145
146
147


Table of Contents

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

[ iv ]

www.it-ebooks.info

179

180
182
183
187
189
190
192
194
195
197
198
201
202
203
207
208
209
211
212
213
214


Table of Contents

Implementing an AJAX-enabled datepicker
Summary

Chapter 8: The Button and Autocomplete Widgets
Introducing the button widget
Implementing the standard buttons

Creating buttons using the or

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×