Create new themes for your JQuery site with this step-by-step guide Learn the details of the jQuery UI theme framework by example No prior knowledge of jQuery UI or theming frameworks is necessary The CSS structure is explained in an easy-to-understand and approachable way Numerous examples, no unnecessary long explanations, lots of screenshots and diagrams In Detail Web applications today generally use at least some JavaScript to enhance the look and feel of the user interface. The jQuery UI toolkit gives web developers a set of widgets as well as a framework for developing and applying themes. jQuery UI Themes: Beginner's Guide is for web developers who want to design professional-looking applications that are resilient to change. It is a step-by-step guide that goes beyond showing how to switch themes in a user interface built with jQuery UI and offers developers a practical guide to designing their own themes and gives them insight as to how themes work. JQuery UI Themes Beginner's Guide starts with themes in general and why they're important in web applications today. We gradually move forward, covering jQuery UI basics, eventually aiming for a full understanding of the theme framework. The ThemeRoller application is a powerful tool - allowing developers to easily adjust theme settings. In addition to seeing how the ThemeRoller works, we take a more in-depth look at the CSS framework internals allowing readers to develop the ability to adjust themes in ways the ThemeRoller cannot. This includes everything from special effects to theming custom widgets. There is no limit to what your theme can change. Once you've read this book, you'll no only be well-versed in theming jargon, you'll also be able to take one look at any jQuery UI application and understand why and how it looks the way it does. This book gives you the opportunity to create jQuery UI themes, learning by example. What you will learn from this book Understand what themes are and why they matter Learn How The jQuery UI tookit works - what widgets are, and how they relate to themes Understand the details of the ThemeRoller application: how to effectively use this tool to design themes in a timely manor Develop an understanding of the top-level CSS constructs. Apply styles to broad portions of the user interface Change the look and feel of widgets based on user interaction and application events Use cues to inform the user, and effectively apply styles to these messages Use the jQuery UI icon sets as well as designing your own Use special effects to enhance the visual appearance of widgets Customize the look and feel of widgets Approach This book is a step-by-step tutorial aimed at beginners to JQuery UI Themes. There is ready-for-use sample code explained with essential screenshots for better and quicker understanding. Who this book is written for This book is for web application developers and CSS designers who want a better understanding of how to build themes for the jQuery UI toolkit. The reader should have a basic working knowledge of JavaScript and why it is used in web applications. Experience with jQuery UI and a general working knowledge of CSS will speed things along but aren't a requirement. Readers can use this book as a starting point to familiarize themselves with the jQuery UI widget details.
Author(s): Adam Boduch
Publisher: Packt Publishing
Year: 2011
Language: English
Pages: 268
Tags: Библиотека;Компьютерная литература;HTML / CSS / JavaScript;jQuery;
Cover......Page 1
Copyright......Page 3
Credits......Page 4
About the Author......Page 5
About the Reviewers......Page 6
www.PacktPub.com......Page 9
Table of Contents......Page 10
Preface......Page 16
What is a theme?......Page 22
Themes on the Web......Page 23
Widget structure......Page 24
Time for action - creating a style......Page 25
Style fonts......Page 28
Time for action - grouping styles......Page 29
Group selectors......Page 31
Time for action - nesting styles......Page 32
Nesting depth......Page 34
Time for action - placing elements on the page......Page 35
Consistent layout......Page 38
The widget framework......Page 39
Summary......Page 40
Time for action - building a download......Page 42
Time for action - removing downloaded components......Page 44
Development bundle......Page 45
File structure......Page 46
Class structure......Page 47
Time for action - using widgets......Page 48
Widget options......Page 51
Widgets and the DOM......Page 52
Switching themes......Page 53
Time for action – exploring the theme switcher widget......Page 54
Time for action - themeroller dev tool......Page 56
Dojo......Page 58
Summary......Page 59
ThemeRoller basics......Page 62
Portability......Page 63
Time for action - previewing a theme......Page 64
Time for action - downloading a theme......Page 65
Themes from scratch......Page 67
Time for action - setting theme fonts......Page 68
Corners......Page 69
Time for action - changing the corner radius......Page 70
Time for action - setting theme headers......Page 71
Time for action - setting widget content styles......Page 73
Time for action - setting default state styles......Page 75
Time for action - setting hover state styles......Page 76
Time for action - setting active state styles......Page 77
Cues......Page 79
Time for action - changing the highlight cue......Page 80
Time for action - changing the error cue......Page 81
Time for action - dialog overlays......Page 82
Time for action - defining shadows......Page 83
Time for action - adjusting a theme......Page 86
Summary......Page 88
What are widget containers?......Page 90
The ui-widget class......Page 91
Time for action - preparing the example......Page 92
Time for action - changing widget fonts......Page 93
Scaling widget fonts......Page 94
Time for action - scaling down font size......Page 95
Widget form fields......Page 96
Time for action - changing widget form fields......Page 97
Time for action - styling content borders......Page 100
Time for action - border sides......Page 102
Content links......Page 103
Time for action - changing link colors......Page 104
The ui-widget-header class......Page 106
Time for action - Styling header borders......Page 107
Time for action - border sides......Page 109
Header links......Page 110
Time for action - header links......Page 111
Summary......Page 113
What are interaction states?......Page 114
Time for action - preparing the example......Page 115
The default state......Page 116
Time for action - default container selectors......Page 117
Time for action - default link selectors......Page 120
Time for action - default border styles......Page 123
Time for action - default font styles......Page 126
Default state background......Page 129
Time for action - default background styles......Page 130
Time for action - hover container selectors......Page 133
Time for action - separating the hover and focus states......Page 136
Hover state font......Page 137
Time for action - hover font styles......Page 138
Time for action - active container selectors......Page 141
Active state background......Page 143
Time for action - active background styles......Page 144
Summary......Page 146
What are interaction cues?......Page 148
Time for action - preparing the example......Page 149
The highlight state......Page 150
Time for action - highlight message borders......Page 151
Time for action - highlight button borders......Page 153
Time for action - highlight message background......Page 154
Time for action - highlight date-picker background......Page 156
Highlight font......Page 157
Time for action - highlight message font......Page 158
Time for action - highlight tabs font......Page 159
The error state......Page 162
Time for action - error message borders......Page 163
Time for action - error tabs border......Page 164
Error background......Page 166
Time for action - error message background......Page 167
Time for action - accordion error background......Page 168
Time for action - error message font......Page 170
Time for action - error button font......Page 172
Time for action - increasing disabled opacity......Page 174
Time for action - button priorities......Page 176
Summary......Page 178
What are theme icons?......Page 180
Time for action - preparing the example......Page 181
Time for action - default widget icons......Page 182
Time for action - setting widget icons......Page 185
Time for action - displaying the current user......Page 187
Time for action - identifying entities......Page 188
Time for action - default icons......Page 192
Time for action - highlight icons......Page 193
Time for action - error icons......Page 194
Time for action - hover icons......Page 195
Sprites......Page 196
Icon categories......Page 197
Time for action - creating new icons......Page 198
Summary......Page 205
Setting up a jQuery environment......Page 206
The legacy approach......Page 208
The style approach......Page 209
Time for action - setting all corners......Page 211
Time for action - setting top corners......Page 212
Time for action - setting individual corners......Page 213
Time for action - increasing corner roundness......Page 215
Time for action - complex radius values......Page 217
Time for action - using percentages......Page 219
Time for action - removing corners......Page 221
Time for action - applying shadows......Page 224
Time for action - altering shadows......Page 226
Time for action - changing perspectives......Page 227
Theme overlays......Page 228
Time for action - adjusting dialog overlays......Page 229
Summary......Page 231
What are custom widgets?......Page 232
Widget CSS......Page 233
The widget......Page 235
Time for action – basic markup......Page 236
Time for action – basic JavaScript......Page 238
Time for action – adding more behavior......Page 242
Time for action – widget CSS......Page 245
Time for action – theme CSS......Page 251
Time for action – finishing touches......Page 253
Summary......Page 259
Pop Quiz Answers......Page 260
Index......Page 262
