O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery UI Themes Beginner's Guide

Book Description

With a working knowledge of JavaScript you can use the JQuery UI toolkit to create professional looking applications. This book is a crash course in understanding how to build Themes, including lots of screenshots and sample code.

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

Table of Contents

  1. jQuery UI Themes
    1. Copyright
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Time for action heading
        1. What just happened?
        2. Pop quiz heading
        3. Have a go hero heading
      6. Reader feedback
      7. Customer support
        1. Downloading the example code for this book
        2. Errata
        3. Piracy
        4. Questions
    7. 1. Themeable User Interfaces
      1. What is a theme?
        1. Themes in the real world
        2. Desktop themes
        3. Themes on the Web
      2. What are widgets?
        1. Widget structure
        2. Widgets and themes
      3. Styling user interfaces
      4. Time for action - creating a style
        1. What just happened?
        2. Style colors
        3. Style fonts
      5. Theme basics
      6. Time for action - grouping styles
        1. What just happened?
        2. Repetitive style properties
        3. Group selectors
        4. Have a go hero
      7. Time for action - nesting styles
        1. What just happened?
        2. Nested selectors
        3. Nesting depth
        4. Have a go hero
        5. Pop quiz - theme basics
      8. Theme layout
      9. Time for action - placing elements on the page
        1. What just happened?
        2. Layout design
        3. Consistent layout
        4. Have a go hero
        5. Pop quiz - theme layout
      10. jQuery UI themes
        1. The widget framework
        2. The CSS framework
        3. Theme-ready widgets
      11. Summary
    8. 2. Using Themes
      1. Downloading jQuery UI
      2. Time for action - building a download
        1. What just happened?
        2. Minimal downloads
      3. Time for action - removing downloaded components
        1. What just happened?
      4. Theme structure
        1. Development bundle
        2. File structure
        3. Class structure
      5. Using jQuery UI
      6. Time for action - using widgets
        1. What just happened?
        2. Have a go hero - change the dialog options
        3. Pop quiz - using jQuery UI
        4. Widget options
        5. Widget methods
        6. Widgets and the DOM
        7. Widgets and CSS
      7. Switching themes
      8. Time for action exploring the theme switcher widget
        1. What just happened?
      9. Time for action - themeroller dev tool
        1. What just happened?
        2. Pop quiz - switching themes
      10. Other frameworks
        1. Dojo
        2. Ext JS
      11. Summary
    9. 3. Using the ThemeRoller
      1. ThemeRoller basics
        1. Instant feedback
        2. The dev tool
        3. Portability
      2. ThemeRoller gallery
        1. Viewing themes
      3. Time for action - previewing a theme
        1. What just happened?
        2. Downloading themes
      4. Time for action - downloading a theme
        1. What just happened?
        2. Pop quiz ThemeRoller basics
      5. Themes from scratch
        1. Fonts
      6. Time for action - setting theme fonts
        1. What just happened?
        2. Corners
      7. Time for action - changing the corner radius
        1. What just happened?
        2. Headers
      8. Time for action - setting theme headers
        1. What just happened?
        2. Content
      9. Time for action - setting widget content styles
        1. What just happened?
        2. States
      10. Time for action - setting default state styles
        1. What just happened?
      11. Time for action - setting hover state styles
        1. What just happened?
      12. Time for action - setting active state styles
        1. What just happened?
        2. Cues
      13. Time for action - changing the highlight cue
        1. What just happened?
      14. Time for action - changing the error cue
        1. What just happened?
        2. Overlays and shadows
      15. Time for action - dialog overlays
        1. What just happened?
      16. Time for action - defining shadows
        1. What just happened?
        2. Have a go hero
      17. Changing existing themes
        1. Selecting a theme
      18. Time for action - adjusting a theme
        1. What just happened?
      19. Summary
    10. 4. Working with Widget Containers
      1. What are widget containers?
      2. Containers and widgets
      3. The ui-widget class
      4. Time for action - preparing the example
        1. What just happened?
        2. Widget fonts
      5. Time for action - changing widget fonts
        1. What just happened?
        2. Have a go hero
        3. Scaling widget fonts
      6. Time for action - scaling down font size
        1. What just happened?
        2. Have a go hero
        3. Widget form fields
      7. Time for action - changing widget form fields
        1. What just happened?
        2. Have a go hero
        3. Pop quiz - the ui-widget class
      8. The ui-widget-content class
        1. Content borders
      9. Time for action - styling content borders
        1. What just happened?
        2. Have a go hero
      10. Time for action - border sides
        1. What just happened?
        2. Have a go hero
        3. Content links
      11. Time for action - changing link colors
        1. What just happened?
        2. Have a go hero
        3. Pop quiz - the ui-widget-content class
      12. The ui-widget-header class
        1. Header borders
      13. Time for action - Styling header borders
        1. What just happened?
      14. Time for action - border sides
        1. What just happened?
        2. Have a go hero
        3. Header links
      15. Time for action - header links
        1. What just happened?
        2. Have a go hero
        3. Pop quiz - the ui-widget-header class
      16. Summary
    11. 5. Transforming Interaction States
      1. What are interaction states?
      2. Time for action - preparing the example
        1. What just happened?
      3. The default state
        1. Default state selectors
      4. Time for action - default container selectors
        1. What just happened?
      5. Time for action - default link selectors
        1. What just happened?
        2. Have a go hero
        3. Default state borders
      6. Time for action - default border styles
        1. What just happened?
        2. Default state font
      7. Time for action - default font styles
        1. What just happened?
        2. Have a go hero
        3. Default state background
      8. Time for action - default background styles
        1. What just happened?
        2. Pop quiz the default state
      9. The hover state
        1. Hover state selectors
      10. Time for action - hover container selectors
        1. What just happened?
        2. Hovering and focusing
      11. Time for action - separating the hover and focus states
        1. What just happened?
        2. Have a go hero
        3. Hover state font
      12. Time for action - hover font styles
        1. What just happened?
        2. Pop quiz the hover state
      13. The active state
        1. Active state selectors
      14. Time for action - active container selectors
        1. What just happened?
        2. Have a go hero
        3. Active state background
      15. Time for action - active background styles
        1. What just happened?
      16. Summary
    12. 6. Customizing Interaction Cues
      1. What are interaction cues?
      2. Time for action - preparing the example
        1. What just happened?
      3. The highlight state
        1. Highlight borders
      4. Time for action - highlight message borders
        1. What just happened?
      5. Time for action - highlight button borders
        1. What just happened?
        2. Highlight background
      6. Time for action - highlight message background
        1. What just happened?
      7. Time for action - highlight date-picker background
        1. What just happened?
        2. Highlight font
      8. Time for action - highlight message font
        1. What just happened?
      9. Time for action - highlight tabs font
        1. What just happened?
        2. Pop quiz the highlight state
      10. The error state
        1. Error borders
      11. Time for action - error message borders
        1. What just happened?
      12. Time for action - error tabs border
        1. What just happened?
        2. Error background
      13. Time for action - error message background
        1. What just happened?
      14. Time for action - accordion error background
        1. What just happened?
        2. Error font
      15. Time for action - error message font
        1. What just happened?
      16. Time for action - error button font
        1. What just happened?
        2. Pop quiz the error state
      17. The disabled state
        1. Disabled opacity
      18. Time for action - increasing disabled opacity
        1. What just happened?
        2. Have a go hero
      19. Priorities
      20. Time for action - button priorities
        1. What just happened?
      21. Summary
    13. 7. Creating Theme Icons
      1. What are theme icons?
      2. Time for action - preparing the example
      3. Icons in widgets
      4. Time for action - default widget icons
        1. What just happened?
      5. Time for action - setting widget icons
        1. What just happened?
      6. Standalone icons
      7. Time for action - displaying the current user
        1. What just happened?
      8. Time for action - identifying entities
        1. What just happened?
      9. Icon states
      10. Time for action - default icons
        1. What just happened?
      11. Time for action - highlight icons
        1. What just happened?
      12. Time for action - error icons
        1. What just happened?
      13. Time for action - hover icons
        1. What just happened?
        2. Have a go hero
      14. Sprites
        1. What are sprites?
        2. Icon categories
      15. Theme icon sets
      16. Time for action - creating new icons
        1. What just happened?
        2. Pop quiz creating theme icons
      17. Summary
    14. 8. Special Effects
      1. Setting up a jQuery environment
      2. Theme corners
        1. The legacy approach
        2. The style approach
        3. Pop quiz theme corners
        4. The jQuery UI approach
      3. Time for action - setting all corners
        1. What just happened?
      4. Time for action - setting top corners
        1. What just happened?
        2. Have a go hero
      5. Time for action - setting individual corners
        1. What just happened?
      6. Time for action - increasing corner roundness
        1. What just happened?
        2. Have a go hero
      7. Time for action - complex radius values
        1. What just happened?
      8. Time for action - using percentages
        1. What just happened?
      9. Time for action - removing corners
        1. What just happened?
      10. Theme shadows
      11. Time for action - applying shadows
        1. What just happened?
      12. Time for action - altering shadows
        1. What just happened?
      13. Time for action - changing perspectives
        1. What just happened?
      14. Theme overlays
      15. Time for action - adjusting dialog overlays
        1. What just happened?
      16. Summary
    15. 9. Theming Custom Widgets
      1. What are custom widgets?
        1. Widget JS
        2. Widget CSS
        3. Pop quiz jQuery UI widgets
      2. Implementing widgets
        1. The widget
      3. Time for action basic markup
        1. What just happened?
        2. Goals of the widget
      4. Time for action basic JavaScript
        1. What just happened?
      5. Time for action adding more behavior
        1. What just happened?
      6. Styling widgets
      7. Time for action widget CSS
        1. What just happened?
      8. Time for action theme CSS
        1. What just happened?
      9. Time for action finishing touches
        1. What just happened?
        2. Have a go hero
      10. Summary
    16. A. Pop Quiz Answers
      1. Chapter 1
        1. Theme layout
      2. Chapter 2
        1. Using jQuery UI
      3. Chapter 3
        1. ThemeRoller basics
      4. Chapter 4
        1. The ui-widget class
      5. Chapter 5
      6. Chapter 6
        1. The highlight state
      7. Chapter 7
        1. Creating theme icons
      8. Chapter 8
        1. Theme corners
      9. Chapter 9
        1. jQuery UI widgets