jquery UI Themes open source community experience distilled Beginner's Guide step-by-step guide Create new themes for your jquery site with this

Transcription

1 jquery UI Themes Beginner's Guide Create new themes for your jquery site with this stepbystep guide Adam Boduch [ PUBLISHING ] open source community experience distilled BIRMINGHAMMUMBAI

2 creating placing Preface 1 Chapter 1: Themeable User Interfaces What is a theme? 7 Themes in the real world 8 Desktop themes 8 Themes on the Web 8 What are widgets? 9 Widget structure 9 Widgets and themes 10 Styling user interfaces 10 a style 10 Style colors 13 Style fonts 13 Theme basics 14 grouping styles 14 Repetitive style properties 16 Group selectors 16 nesting styles 17 Nested selectors 19 Nesting depth 19 Theme layout 20 elements on the page 20 Layout design 23 Consistent layout 23 jquery Ul themes 24 The widget framework 24 The CSS framework 25 Themeready widgets 25 Summary 25 Z

3 building themeroller previewing downloading. Chapter 2: Using Themes. Downloading jquery Ul 27 Minimal downloads Theme structure a download 27 removing downloaded components Development bundle 30 File structure 31 Class structure 32 Using jquery Ul using widgets Widget options 36 Widget methods 37 Widgets and the DOM 37 Widgets and CSS 38 Switching themes 3** exploring the theme switcher widget 39 dev tool 41 Other frameworks 43 Dojo 43 ExtJS 44 Summary 44 Chapter 3: Using the ThemeRoller 47 ThemeRoller basics 47 Instant feedback 48 The dev tool 48 Portability 48 ThemeRoller gallery 49 Viewing themes 49 a theme 49 Downloading themes 50 a theme 50 Themes from scratch 52 Fonts 53 theme fonts 53 Corners 54 the corner radius 55 Headers 56 theme headers 56 Content 58 ^

4 dialog defining adjusting preparing scaling styling Styling border header widget content styles 58 States 60 state styles 60 hover state styles 61 Time for action active state styles 62 Cues 64 the cue 65 the error cue 66 Overlays and shadows 67 overlays 67 shadows 68 Changing existing themes 71 Selecting a theme 71 a theme 71 Summary 73 Chapter 4: Working with Widget Containers 75 What are widget containers? 75 Containers and widgets 76 The uiwidget class 76 the example 77 Widget fonts 78 Time for action widget fonts 78 Scaling widget fonts 79 down font size 80 Widget form fields 81 widget form fields 82 The uiwidgetcontent class 85 Content borders 85 content borders 85 border sides 87 Content links 88 link colors 89 The uiwidgetheader class 91 Header borders 92 header borders 92 sides 94 Header links 95 links 96 Summary 98

5 preparing separating hover active preparing Table ofcontents Chapter 5: Transforming Interaction States 99 What are interaction states? 99 the example 100 The state 101 Default state selectors 102 container selectors 102 link selectors 105 Default state borders 108 border styles 108 Default state font 111 font styles 111 Default state background 114 background styles 115 The hover state 118 Hover state selectors 118 hover container selectors 118 Hovering and focusing 121 the hover and focus states 121 Hover state font 122 font styles 123 The active state 126 Active state selectors 126 active container selectors 126 Active state background 128 background styles 129 Summary 131 Chapter 6: Customizing Interaction Cues 133 What are interaction cues? 133 the example 134 The state 135 Highlight borders 136 message borders 136 button borders 138 Highlight background 139 message background 139 datepicker background 141 Highlight font 142 message font 143 tabs font 144

6 error error accordion error increasing preparing displaying identifying error hover creating The error state 147 Error borders 148 message borders 148 error tabs border 149 Error background 151 message background 152 error background 153 Error font 155 error message font 155 button font 157 The disabled state 159 Disabled opacity 159 disabled opacity 159 Priorities 161 button priorities 161 Summary 163 Chapter 7: Creating Theme Icons 165 What are theme icons? 165 the example 166 Icons in widgets 167 widget icons 167 widget icons 170 Standalone icons 172 the current user 172 entities 173 Icon states 177 icons 177 icons 178 icons 179 icons 180 Sprites 181 What are sprites? 182 Icon categories 182 Theme icon sets 183 new icons 183 Summary 190 Chapter 8: Special Effects 191 Setting up a jquery environment 191 Theme corners 193 The legacy approach 193

7 increasing removing applying altering adjusting basic basic adding theme The style approach 194 The jquery U! approach 196 all corners 196 top corners 197 individual comers 198 corner roundness 200 complex radius values 202 using percentages 204 corners 206 Theme shadows 209 shadows 209 shadows 211 perspectives 212 Theme overlays 213 dialog overlays 214 Summary 216 Chapter 9: Theming Custom Widgets 217 What are custom widgets? 217 Widget JS 218 Widget CSS 218 Implementing widgets 220 The widget 220 markup 221 Goals of the widget 223 JavaScript 223 more behavior 227 Styling widgets 230 widget CSS 230 CSS 236 finishing touches 238 Summary 244 Pop Quiz Answers 245 Index 247