Book Image

Creating Mobile Apps with jQuery Mobile - Second Edition

By : Andy Matthews, Shane Gliser
Book Image

Creating Mobile Apps with jQuery Mobile - Second Edition

By: Andy Matthews, Shane Gliser

Overview of this book

<p>jQuery Mobile is a mobile-centric web framework developed by the jQuery team. The project focuses on building a framework compatible with the ever-increasing variety of smartphones and tablet computers on the market. The jQuery Mobile framework plays well with other frameworks and platforms, such as PhoneGap and Backbone.</p> <p>Automate repetitive tasks easily and painlessly with the Grunt task runner, build a fully responsive, gorgeous photography website, and learn how to mix and match jQuery Mobile 1.4.5 into existing websites and how to deploy those changes to content management systems such as WordPress, Drupal, and HarpJS. jQuery Mobile aims to reach everyone, and so does this book. It will enhance your mobile knowledge and help you to create versatile, unique sites quickly and easily.</p>
Table of Contents (18 chapters)
Creating Mobile Apps with jQuery Mobile Second Edition
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Getting Glyphish and defining custom icons


Glyphish has a license that allows for free use with attribution. The free set (http://www.glyphish.com/download/) has only one size and 200 icons, the Pro set has multiple sizes, 400 icons, and an unlimited license. (For only $25 dollars, that's a no-brainer.)

Creating a button with an icon is simple:

Adding the data-icon attribute will yield a button as shown in the preceding figure:

<a href="index.html" data-role="button" 
data-icon="delete">Delete</a>

Whatever you insert as the value for the data-icon attribute will become a class name on the button. If you have an attribute of data-icon="directions", then the class that is applied by jQM is ui-icon-directions. Naturally, you'll need to craft this in your own custom Cascading Style Sheets (CSS) file as shown in the following code (we'll put this, and others like it, into the css/custom.css file):

.ui-icon-directions{   
    background-image: 
    url(../icons/icons-gray/113-navigation...