You are previewing jQuery UI Themes Beginner's Guide.
O'Reilly logo
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