jQuery UI Themes Beginner's Guide


jQuery UI Themes Beginner's Guide
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
$20.39
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
$39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 268 pages [ 235mm x 191mm ]
Release Date : July 2011
ISBN : 184951044X
ISBN 13 : 9781849510448
Author(s) : Adam Boduch
Topics and Technologies : All Books, Web Development, Beginner's Guides, jQuery, Open Source

Table of Contents

Preface
Chapter 1: Themeable User Interfaces
Chapter 2: Using Themes
Chapter 3: Using the ThemeRoller
Chapter 4: Working with Widget Containers
Chapter 5: Transforming Interaction States
Chapter 6: Customizing Interaction Cues
Chapter 7: Creating Theme Icons
Chapter 8: Special Effects
Chapter 9: Theming Custom Widgets
Pop Quiz Answers
Index
  • Chapter 1: Themeable User Interfaces
    • What is a theme?
      • Themes in the real world
      • Desktop themes
      • Themes on the Web
    • What are widgets?
      • Widget structure
      • Widgets and themes
    • Styling user interfaces
    • Time for action - creating a style
      • Style colors
      • Style fonts
    • Theme basics
    • Time for action - grouping styles
      • Repetitive style properties
      • Group selectors
    • Time for action - nesting styles
      • Nested selectors
      • Nesting depth
    • Theme layout
    • Time for action - placing elements on the page
      • Layout design
      • Consistent layout
    • jQuery UI themes
      • The widget framework
      • The CSS framework
      • Theme-ready widgets
    • Summary
    • Chapter 2: Using Themes
      • Downloading jQuery UI
      • Time for action - building a download
        • Minimal downloads
      • Time for action - removing downloaded components
      • Theme structure
        • Development bundle
        • File structure
        • Class structure
      • Using jQuery UI
      • Time for action - using widgets
        • Widget options
        • Widget methods
        • Widgets and the DOM
        • Widgets and CSS
      • Switching themes
      • Time for action – exploring the theme switcher widget
      • Time for action - themeroller dev tool
      • Other frameworks
        • Dojo
        • Ext JS
      • Summary
      • Chapter 3: Using the ThemeRoller
        • ThemeRoller basics
          • Instant feedback
          • The dev tool
          • Portability
        • ThemeRoller gallery
          • Viewing themes
        • Time for action - previewing a theme
          • Downloading themes
        • Time for action - downloading a theme
        • Themes from scratch
          • Fonts
        • Time for action - setting theme fonts
          • Corners
        • Time for action - changing the corner radius
          • Headers
        • Time for action - setting theme headers
          • Content
        • Time for action - setting widget content styles
          • States
        • Time for action - setting default state styles
        • Time for action - setting hover state styles
        • Time for action - setting active state styles
          • Cues
        • Time for action - changing the highlight cue
        • Time for action - changing the error cue
          • Overlays and shadows
        • Time for action - dialog overlays
        • Time for action - defining shadows
        • Changing existing themes
          • Selecting a theme
        • Time for action - adjusting a theme
        • Summary
        • Chapter 4: Working with Widget Containers
          • What are widget containers?
          • Containers and widgets
          • The ui-widget class
          • Time for action - preparing the example
            • Widget fonts
          • Time for action - changing widget fonts
            • Scaling widget fonts
          • Time for action - scaling down font size
            • Widget form fields
          • Time for action - changing widget form fields
          • The ui-widget-content class
            • Content borders
          • Time for action - styling content borders
          • Time for action - border sides
            • Content links
          • Time for action - changing link colors
          • The ui-widget-header class
            • Header borders
          • Time for action - Styling header borders
          • Time for action - border sides
            • Header links
          • Time for action - header links
          • Summary
          • Chapter 5: Transforming Interaction States
            • What are interaction states?
            • Time for action - preparing the example
            • The default state
              • Default state selectors
            • Time for action - default container selectors
            • Time for action - default link selectors
              • Default state borders
            • Time for action - default border styles
              • Default state font
            • Time for action - default font styles
              • Default state background
            • Time for action - default background styles
            • The hover state
              • Hover state selectors
            • Time for action - hover container selectors
              • Hovering and focusing
            • Time for action - separating the hover and focus states
              • Hover state font
            • Time for action - hover font styles
            • The active state
              • Active state selectors
            • Time for action - active container selectors
              • Active state background
            • Time for action - active background styles
            • Summary
            • Chapter 6: Customizing Interaction Cues
              • What are interaction cues?
              • Time for action - preparing the example
              • The highlight state
                • Highlight borders
              • Time for action - highlight message borders
              • Time for action - highlight button borders
                • Highlight background
              • Time for action - highlight message background
              • Time for action - highlight date-picker background
                • Highlight font
              • Time for action - highlight message font
              • Time for action - highlight tabs font
              • The error state
                • Error borders
              • Time for action - error message borders
              • Time for action - error tabs border
                • Error background
              • Time for action - error message background
              • Time for action - accordion error background
                • Error font
              • Time for action - error message font
              • Time for action - error button font
              • The disabled state
                • Disabled opacity
              • Time for action - increasing disabled opacity
              • Priorities
              • Time for action - button priorities
              • Summary
              • Chapter 7: Creating Theme Icons
                • What are theme icons?
                • Time for action - preparing the example
                • Icons in widgets
                • Time for action - default widget icons
                • Time for action - setting widget icons
                • Standalone icons
                • Time for action - displaying the current user
                • Time for action - identifying entities
                • Icon states
                • Time for action - default icons
                • Time for action - highlight icons
                • Time for action - error icons
                • Time for action - hover icons
                • Sprites
                  • What are sprites?
                  • Icon categories
                • Theme icon sets
                • Time for action - creating new icons
                • Summary
                • Chapter 8: Special Effects
                  • Setting up a jQuery environment
                  • Theme corners
                    • The legacy approach
                    • The style approach
                    • The jQuery UI approach
                  • Time for action - setting all corners
                  • Time for action - setting top corners
                  • Time for action - setting individual corners
                  • Time for action - increasing corner roundness
                  • Time for action - complex radius values
                  • Time for action - using percentages
                  • Time for action - removing corners
                  • Theme shadows
                  • Time for action - applying shadows
                  • Time for action - altering shadows
                  • Time for action - changing perspectives
                  • Theme overlays
                  • Time for action - adjusting dialog overlays
                  • Summary
                  • Chapter 9: Theming Custom Widgets
                    • What are custom widgets?
                      • Widget JS
                      • Widget CSS
                    • Implementing widgets
                      • The widget
                    • Time for action – basic markup
                      • Goals of the widget
                    • Time for action – basic JavaScript
                    • Time for action – adding more behavior
                    • Styling widgets
                    • Time for action – widget CSS
                    • Time for action – theme CSS
                    • Time for action – finishing touches
                    • Summary

                    Adam Boduch

                    Adam Boduch has spent the last several years developing user interfaces for large-scale software systems. Starting out as a backend Python developer, he was lured to the frontend by tools like jQuery UI. Adam is passionate about readable code, and writes extensively about jQuery UI widgets, including his previous book jQuery UI Themes Beginner's Guide, Packt Publishing. When Adam isn't coding, reading or writing, you will usually find him playing hockey, or spending time with his family.
                    Sorry, we don't have any reviews for this title yet.

                    Code Downloads

                    Download the code and support files for this book.


                    Submit Errata

                    Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                    Errata

                    - 1 submitted: last submission 29 Aug 2013

                    Errata type: Others | Page number: 80 | Errata date: 06 Sep 2011

                    There's an extra closing div tag () in the sample code

                     

                    Sample chapters

                    You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                    Frequently bought together

                    jQuery UI Themes Beginner's Guide +    Magento 1.8 Development Cookbook =
                    50% Off
                    the second eBook
                    Price for both: £21.95

                    Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                    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

                    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.

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

                    Code Download and Errata
                    Packt Anytime, Anywhere
                    Register Books
                    Print Upgrades
                    eBook Downloads
                    Video Support
                    Contact Us
                    Awards Voting Nominations Previous Winners
                    Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                    Resources
                    Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software