Book Image

jQuery UI Themes Beginner's Guide

By : Adam Boduch
Book Image

jQuery UI Themes Beginner's Guide

By: Adam Boduch

Overview of this book

<p>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.</p> <p><em>jQuery UI Themes: Beginner's Guide</em> 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.</p> <p><em>jQuery UI Themes Beginner's Guide</em> 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.</p> <p>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.</p>
Table of Contents (17 chapters)
jQuery UI Themes Beginner's Guide
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action - highlight date-picker background


It's time to see our theme changes from the previous example applied to a date-picker widget:

  1. Edit the index.html file created earlier and replace the content with the following:

    <html xmlns="http://www.w3.org/1999/xhtml">
    
        <head>
    
            <title>Customizing Interaction Cues</title>
    
            <link href="jqueryui/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    
            <script src="jqueryui/js/jquery-1.5.x.min.js" type="text/javascript"></script>
            <script src="jqueryui/js/jquery-ui-1.8.x.custom.min.js" type="text/javascript"></script>
            <script src="index.js" type="text/javascript"></script>
    
        </head>
    
        <body style="font-size: 10px;">
    
            <input id="my_datepicker" type="text"/>
    
        </body>
    
    </html>
  2. Edit the index.js file created earlier and replace the content with the following:

    $...