by Eric Sarrion
A Code Centered-Approach to User Interface Design
O'REILLY
Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo
Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo
 |
| jQuery UI |
Thank you to the O’Reilly team that allowed me to write this book (notably, Simon,
Mike, and Amy), and to Daisaku Ikeda, who gave me the courage and perseverance to
achieve this goal.
How to Contact Us
Please address comments and questions concerning this book to the publisher:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)
We have a web page for this book, where we list errata, examples, and any additional
information. You can access this page at:
http://shop.oreilly.com/product/0636920023159.do
To comment or ask technical questions about this book, send email to:
bookquestions@oreilly.com
For more information about our books, courses, conferences, and news, see our website
at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
Preface
jQuery is a popular JavaScript library that is extensible using plug-ins. Some plug-ins,
specifically those for managing the user interface, have been collected together in the
jQuery UI library. These plug-ins help facilitate interaction with the user, and these
interactions are simpler to manage if you use jQuery only.
This book covers the following extensions in jQuery UI version 1.8:
• Tab management
• Accordion menus
• Dialog boxes
• Buttons
• Progress bars
• Sliders
• Date pickers
• Autocompleters
• Drag-and-drop management
• Selection, resizing, and switching of elements
• New visual effects
Who Should Read This Book
All users of jQuery should read this book! More specifically, this book will interest
people who want to improve the user interface of their websites and enrich them with new features.
Structure of the Book
Each of the features offered by jQuery UI (tabs, accordion menus, etc.) are treated in
a separate chapter. Each chapter is independent of the others, allowing you to implement
the functionality directly.
Conventions Used in This Book
The following typographical conventions are used in this book:
Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program elements
such as variable or function names, databases, data types, environment variables,
statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
Constant width italic
Shows text that should be replaced with user-supplied values or by values determined by context.
Screenshot
Purchase Now !
Just with Paypal
Just with Paypal
Product details
Price
|
|
|---|---|
File Size
| 10,727 KB |
Pages
|
242 p |
File Type
|
PDF format |
ISBN
| 978-1-449-31699-0 |
Copyright
| 2012 Eric Sarrion |
Table of Contents
Preface . . . . . . . . . . . ix
1. Introduction to jQuery UI
jQuery UI Installation 1
Overview of jQuery UI 1
What Is a CSS Theme? 3
Which Files Should We Include in Our HTML Pages? 4
Uncompressed Files 4
Compressed Files 7
Change the CSS Theme 8
And Now? 9
2. Tabs
Basic Principles of Tabs 11
Formatting Content 13
The tabs () Method 15
The tabs (options) Method 15
The tabs (“action”, params) Method 17
The bind () Method 17
Examples of Using Tabs 18
Dynamic Creation of Tabs 18
Modifying the Contents of a Tab Using Ajax 19
Transmitting the Information to the Server via Ajax 21
Using the Tabs add Method 22
Using the tabsadd Event 24
3. Accordion Menus
Basic Principles of Accordion Menus 25
Formatting Content 27
The accordion () Method 29
The accordion (options) Method 30
The accordion (“action”, params) Method 31
Event Management in Accordion Menus with bind () 32
Examples of Using Accordion Menus 32
Opening Any Menu 32
Loading the Contents of a Menu with Ajax: Using options 33
Loading the contents of a menu with Ajax: Using accordionchange 35
4. Dialog Boxes
Basic Principles of Dialog Boxes 37
Formatting Content 39
The dialog () Method 42
The dialog (options) Method 42
The dialog (“action”, params) Method 45
Event Handling in Dialog Boxes with bind () 45
Examples of Using Dialog Boxes 46
Opening and Closing a Dialog Box 46
Applying an Effect When Opening or Closing the Dialog Box 48
Verifying the Closure of the Dialog Box 49
Hiding the Close Button 50
Inserting Buttons in the Dialog Box 51
Inserting Content Using Ajax 52
Changing the Behavior of a Dialog Box with Effects 54
5. Buttons
Basic Principles of Buttons 57
Formatting Content 58
The button () Method 60
The button (options) Method 60
The button (“action”, params) Method 61
Event Handling on Buttons with bind () 61
Radio Buttons 61
Displaying Radio Buttons 62
Improving the Display with buttonset () 63
Checkboxes 64
Displaying Checkboxes 64
Improving the Display with buttonset () 65
Examples of Using Buttons 66
Displaying Icons in Buttons 66
Creating a Calculator 69
6. Progress Bars
Basic Principles of Progress Bars 77
Formatting Content 78
The progressbar () Method 79
The progressbar (options) Method 79
The progressbar (“action”, params) Method 80
Handling Events in Progress Bars with bind () 80
Examples of Using Progress Bars 80
Incrementing a Progress Bar 80
Performing Processing at Different Stages of Completion 81
7. Sliders
Basic Principles of Sliders 83
Formatting Content 84
The slider () Method 85
The slider (options) Method 86
The slider (“action”, params) Method 87
Event Management on the Sliders with bind () 88
Examples of Using Sliders 88
Displaying the Value of One Indicator 88
Displaying the Values of Two Indicators 89
Adjusting the Opacity of an Image Using a Slider 91
8. Datepickers
Basic Principles of Datepickers 93
Formatting Content 94
The datepicker () Method 96
The datepicker (options) Method 97
The datepicker (“action”, params) Method 101
Examples of Using Datepickers 101
Displaying a Calendar in Another Language 101
Displaying Multiple Months in the Calendar 103
Displaying a Static Calendar 106
Indicating Minimum and Maximum Dates 107
Preventing the Selection of Specific Dates 108
Preselecting Any Date 108
Performing an Ajax Request When Selecting a Date 112
9. Autocompletion
Basic Principles of Autocompletion 115
Formatting Content 116
The autocomplete () Method 118
The autocomplete (options) Method 118
The autocomplete (“action”, params) Method 120
Event Management on the List of Suggestions with bind () 120
Examples of Using the Autocompletion Mechanism 121
Specifying the Width of the List of Suggestions 121
Displaying a List of Suggestions at the Opening of the HTML Page 122
Displaying a List of Suggestions at the Entry of the Cursor in the Input
Field 123
Producing an Effect on the Appearance of the List of Suggestions 124
Dynamically Creating a List of Suggestions 125
Dynamically Creating a List of Suggestions Based on the Input Data 126
Inserting Images in the List of Suggestions 128
10. Drag-and-Drop
The draggable () Method 133
The draggable (options) Method 133
The draggable (“action”, params) Method 137
Event Management on the Moved Elements with bind () 138
Examples of Using Drag Functionality 138
Carrying Out a Treatment When Moving 138
Imposing Limits on Displacement 139
Moving an Object by Duplicating 141
The droppable () Method 145
The droppable (options) Method 145
The droppable (“action”, params) Method 148
Event Management on the Elements of Deposit with bind () 148
Examples of Using the Drop Functionality: A Shopping Cart 148
Creating a Shopping Cart with Drag-and-Drop 148
Adding a Visual Effect to Shopping Cart Deposits 151
Removing an Item from the Cart 153
11. Selecting Items
Basic Principles of Selecting Items 155
Formatting Content 156
The selectable () Method 159
The selectable (options) Method 159
The selectable (“action”, params) Method 161
Event Management in the Selection with bind () 161
Examples of Using the Selection Mechanism 161
Displaying the Order of the Events During the Selection 162
Preventing the Selection of an Element 163
Inhibiting Clicks to Select an Item 165
Managing a Shopping Cart 166
12. Permutation of Elements in the Page
Basic Principles of Permutation of Elements 169
Formatting Content 170
The sortable () Method 171
The sortable (options) Method 172
The sortable (“action”, params) Method 177
Event Management of the Permutation with bind () 177
Examples of Using the Permutation Mechanism 178
Displaying the Order in Which Events Appear 178
Dropping any Element in the List 183
13. Resizing
Basic Principles of Resizing 191
Formatting Content 192
The resizable () Method 193
The resizable (options) Method 193
The resizable (“action”, params) Method 196
Handling Events when Resizing with bind () 196
Examples of Using the Resizing Mechanism 197
Displaying Dimensions of the Element When Resizing 197
Displaying the Position of the Element When Resizing 198
Performing an Animation While Resizing 199
Creating a Resizable Text Box 201
14. Visual Effects in jQuery UI
New Visual Effects 205
The effect (effectName, options, duration, callback) Method 205
The blind Effect 206
The bounce Effect 208
The shake Effect 208
The clip Effect 208
The drop Effect 210
The explode Effect 211
The fold Effect 212
The highlight Effect 213
The puff Effect 214
The pulsate Effect 215
The scale Effect 216
The size Effect 217
The slide Effect 218
The show (), hide (), and toggle () Methods 218
The animate () method Improved by jQuery UI 220
CSS Properties for Managing Colors 220
New Values for the easing Option 221
Producing Effects with CSS Classes 221
The addClass (), removeClass (), and toggleClass () Improved Methods 222
The switchClass () Method 223
Example of Using the toggleClass () Method 224
●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●
●❂●
═════● ●═════
