Book Image

jQuery Mobile Cookbook

By : Chetan Jain
Book Image

jQuery Mobile Cookbook

By: Chetan Jain

Overview of this book

jQuery Mobile is an award winning, HTML5/CSS3 based open source cross-platform UI framework. It offers a very cool and highly customizable UX. It is built on the popular jQuery library and uses declarative coding making it easy to use and learn. It is the market leader today considering the numerous browsers and platforms that it supports."jQuery Mobile Cookbook" presents over a hundred recipes written in a simple and easy manner. You can quickly learn and start writing code immediately. Advanced topics such as using scripts to manipulate, customize, and extend the framework are also covered. These tips address your common everyday problems. The book is very handy for both beginner and experienced jQuery Mobile developers.You start by developing simple apps using various controls and learn to customize them. Later you explore using advanced aspects like configurations, events, and methods.Develop single and multi-page applications. Use caching to boost performance. Use custom transitions, icon sprites, styles, and themes. Learn advanced features like configurations, events, and methods. Explore future trends by using HTML5 new features and semantics with jQuery Mobile."jQuery Mobile Cookbook" is an easy read and is packed with practical tips and screenshots.
Table of Contents (19 chapters)
jQuery Mobile Cookbook
Credits
About the Author
Acknowledgement
About the Reviewers
www.PacktPub.com
Preface
Index

Overriding an existing swatch


The jQueryMobile framework uses the ui-btn-hover class to theme the button hover event. This recipe shows you how to override the style for the button hover event of an existing swatch.

Getting ready

Copy the full code of this recipe from the code/10/button-hover source folder. You can launch this code using the URL: http://localhost:8080/10/button-hover/main.html.

How to do it...

  1. Create main.html, and add the following <style> tag to the <head> section:

    <link rel='stylesheet' href=
      'http://code.jquery.com/mobile/1.1.1/jquery.mobile-
      1.1.1.min.css' />
    <style>
      .ui-btn-hover-a {
        border: 1px solid #115e00;
        background: #51b54a;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 1px 1px #197d19;
        background-image: -webkit-gradient(linear, left top, 
          left bottom, from( #7ad66f), to( #41a343));
        background-image: -webkit-linear-gradient( #7ad66f, 
          #41a343);
        background-image: -moz-linear-gradient( #7ad66f...