Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Mastering jQuery Mobile
Mastering jQuery Mobile

Mastering jQuery Mobile: Design and develop cutting-edge mobile web applications using jQuery Mobile to work across a number of platforms

Arrow left icon
Profile Icon Chip Lambert Profile Icon Patwardhan
Arrow right icon
$54.99
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (11 Ratings)
Paperback Jul 2015 262 pages 1st Edition
eBook
$9.99 $43.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Chip Lambert Profile Icon Patwardhan
Arrow right icon
$54.99
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (11 Ratings)
Paperback Jul 2015 262 pages 1st Edition
eBook
$9.99 $43.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$9.99 $43.99
Paperback
$54.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

Mastering jQuery Mobile

Chapter 1. Getting Started

Are you all excited, as we are, to get started? Well, before we start writing some code, we have a few things we need to do first. These first couple of chapters may be light on code, but are rich in concepts and ideas that you will need on your journey to master jQuery Mobile.

Before we begin, let's talk briefly about what jQuery Mobile is and, more importantly, what it isn't. It is an extension of jQuery that will allow you to create cross-browser web applications and websites that will look the same, regardless of the mobile browser used to view them and the underlying mobile OS. jQuery Mobile provides wide browser and device coverage using progressive enhancement, making your website accessible on the widest range of devices and browsers. It also enhances the form inputs and UI widgets to be touch-friendly. It is not a framework that will allow you to build native applications, but you can use this framework to build hybrid mobile applications. In one of the last chapters of this book, we will look at using one such framework—Apache's Cordova.

Now that we have got that out of the way, grab your drink of choice, fire up your computer, and let's rock 'n' roll.

Overview

In this chapter, we will look at installing the XAMPP server stack for both Windows and Mac OS X, installing the Aptana Studio integrated development environment (IDE), and then start looking at using jQuery Mobile and the various methods you can use in your project to include the framework. We will then create a small application to get our feet wet with jQuery Mobile. For some of you this could be a simple refresher, but for others this could be a crash course introduction.

You may be asking yourself, "Why am I installing a full server stack, and is jQuery Mobile usage tied to PHP or any of the technology in the XAMPP stack?" While this book is focused on development with jQuery Mobile, we will be doing a very small bit of PHP with MySQL, just to show the interaction between the two, and so we will be setting up our XAMPP stack. However, the usage of jQuery Mobile is completely independent of PHP and any other technology in the XAMPP stack, so developers should feel free to use any other server stack that they prefer for development. If you are not a PHP pro, don't worry; the code will be basic and we will explain it all. If you wish to enhance your PHP skills, check out any of the number of PHP titles Packt has published.

Also by no means are you bound to using your local machine. If you have a web server, feel free to use it; we just find it easier to develop on a local machine so we don't have to worry about making a change, uploading, testing, and repeating.

Installing XAMPP for Windows

XAMPP is a fully functional server stack by the folks at Apache Friends, which includes Apache, PHP, MySQL, Perl, Tomcat, phpMyAdmin, and much more in one installation package. By installing it, you don't have to worry about manually setting up each component of a WAMP stack, you simply execute the installer and choose the components you wish to install.

To get started, we will need to download the latest stable XAMPP installer from https://www.apachefriends.org/index.html. We recommend using the installer rather than the ZIP file method for this book.

After we have it downloaded, the installation is pretty straightforward:

  1. Double-click on the installation file and you will be asked to select a language. Make your choice and choose OK.
  2. If you are using Windows Vista or higher, and User Account Control (UAC) is enabled, you will see a warning that some functionality may be limited if installed to the Program Files directory. Click OK.
  3. Another warning may pop up prompting you to install the Microsoft Visual Studio 2008 redistributable package. Click Yes and you will be taken to a Microsoft downloads page where you can download this redistributable from. Download it and install it before continuing with the XAMPP installation.
  4. Click on Next and you will be shown all the components that make up the XAMPP package. Select the features you want but for this book, be sure to pick at least Apache, PHP, MySQL, and phpMyAdmin, as they will be utilized at some point in this book.
  5. The default directory should be fine, so leave it as is and click Next.
  6. This screen will ask you if you wish to learn more about Bitnami; this is your choice, so if you do not want to see more information, simply uncheck the checkbox and click Next.
  7. The installation itself will take several minutes to complete. Once it is finished, click on Finish from the screen that pops up.
  8. You will now see a screen that will inform you that all the services can be controlled through the XAMPP control panel. It will ask you if you want to open that screen now; click on Yes.
  9. In the control panel, you will be able to start, stop, and restart all the services that were installed with XAMPP. By default, some of these services may be turned off. For now, let's make sure that Apache and MySQL are both running by clicking on Start next to the service name.

Installing XAMPP for Mac OS X

XAMPP also has a package available for those running Mac OS X and it is a million times easier to install than its Windows counterpart.

Download XAMPP from the same page as the Windows binaries: https://www.apachefriends.org/index.html. Double-click on the .DMG file that you just downloaded, and drag the XAMPP folder into the Applications directory. After this is completed, open the XAMPP control panel found in Applications and start the Apache and MySQL services.

Regardless of what OS you installed XAMPP, we can verify the installation on both in the same way. Open up your browser and go to the address http://localhost/xampp. If all went well, you will see a screen similar to the following:

Installing XAMPP for Mac OS X

Congratulations! You now have a full-blown testing/development server ready for use to go with this book. If you don't see a screenshot like the preceding one, double check to make sure you did not miss a step.

Note

Important XAMPP Notes

There are a couple things you need to be aware of with regards to XAMPP. First off, it is a great product for situations like this when you need to set up a quick development environment, but it should be used for just that: a development environment. You should not use XAMPP as a production server. Instead, you should install and configure each component individually for various security reasons.

XAMPP for Mac is still listed as being in beta, therefore you could come across some bugs. If running beta software on your Mac scares you a bit, there are other alternatives such as MAMP, which is a very popular Mac stack available at http://www.mamp.info/en/index.html.

There is also a version of XAMPP for Linux, so if that is your OS of choice, feel free to download and install it for the purposes of this book.

Installing Aptana Studio

Aptana Studio is a free, open source IDE built off of Eclipse. We will be using Aptana Studio 3 for this book and you can download it from http://www.aptana.com/products/studio3/download.html.

To install Aptana Studio 3 on a Windows machine, follow these instructions:

  1. Double-click on the installer file and select Next to get the installation started.
  2. Choose I Agree to accept the license agreement.
  3. The default directory should be fine, as should the default programs group, so hit Next on these two steps.
  4. The installer will now prompt you to choose which file extensions Aptana should be the default editor for. Leave the default settings on this screen. You can change them later in the IDE settings if you need to. Click on Next.
  5. Click on Install to start the installation. Once the installation is finished, click on Next and then on Close.

Installing Aptana Studio on Mac is just as easy as it was for installing XAMPP. After you download the .DMG file, open it up and drag the indicated folder into your Applications folder.

Now that Aptana Studio is installed, open it up and you will be presented with a dialog box asking you to set up your default workspace directory. Go ahead and set this to be your htdocs folder of your XAMPP installation. For you folks on Windows, that directory will be c:\xampp\htdocs (provided you used the default directory). For the Mac users, this will be /Applications/XAMPP/htdocs. By setting this default workspace, any new projects we create will automatically be created and saved here, making it easier for us to test.

Also for you Mac users, there are some further steps that you may need to do for Apatana Studio to work correctly. By default, the XAMPP htdocs folder is owned by root, and because of this, it is set to read-only. In order for you to create and save to this directory, we will need to change those permissions.

  1. Click on the folder in Finder and then choose Get Info from the File menu.
  2. Click on the triangle next to Sharing and Permissions to display the permissions for the selected file or folder.
  3. Click on the lock and authenticate with an administrator account.
  4. Use the menus next to users and groups to change the permissions.
  5. Once you are finished, close the Info window.

Of course, if you need further assistance with Aptana Studio or even XAMPP, refer to their respective websites for support. If you happen to fall in love with Aptana Studio and wish to learn more about it, check out Aptana Studio Beginner's Guide, Thomas Deuling, Packt Publishing.

Tip

We chose to use Aptana Studio 3 as an IDE for this book, so that you can follow along without having to purchase the same IDE we use (we use Zend Studio). Aptana Studio is free so if you have never used an IDE before, you now have an option. If you have an IDE already that you use on a daily basis, use it for the book. Just adjust any steps listed for Aptana to fit your own IDE.

Downloading jQuery Mobile

Now we finally get to the meat and potatoes of what this book is about: jQuery Mobile. First thing we need to do is download the framework to use it in our projects. You have two ways of doing this. You can download a prebuilt ZIP file containing the latest stable release and everything you will need to use jQuery Mobile. The second option is that you can build a package that contains only the pieces you need, including earlier versions or unstable branches.

In this book, we will be using the complete package. There are couple reasons for this. First of all, we will be using and looking at so many different aspects of the framework that it would take a lot of space here for us to tell you which pieces to select in the builder. More importantly, as noted on the jQuery Mobile website, the builder is currently in alpha and is not recommended for production environments. Yes, we realize that we are not in a production environment here, but we don't want to try to master a framework by using code that could be unstable. We believe that's enough babbling, let's start downloading!

Go to http://jquerymobile.com. On the top right- hand side of the page, you will see the links to download the latest stable version (which at the time of writing this book is 1.4.5) and a link to the download builder. Click on the link for the latest stable. After the ZIP file is downloaded, go ahead and open it up and you should see the following:

Downloading jQuery Mobile

That's quite daunting, isn't it! No worries at all though; we will only be referencing a few of the files here, but let's talk about the overall contents of the ZIP file so that you will have a better understanding of what you just downloaded:

  • demos: We highly recommend that you look at and play around with the contents of this folder. You will find numerous examples here of the different elements of jQuery Mobile. Go now, spend some time with it and then come back—we'll wait.
  • images: This directory contains all of the icons that jQuery Mobile uses throughout the framework. You won't have to reference these directly, rather jQuery Mobile does so through CSS and its core JavaScript files.
  • *.css files: These are several style sheets that make up the overall jQuery Mobile framework. They control the preceding icons, the theme (more on that later), structure, and more.
  • jquery.mobile-1.4.5.css: This is the main and most important CSS file of the download and the one that you will reference and use in your applications.
  • jquery.mobile-1.4.5.js: This is the core JavaScript of the framework.

    Note

    You may have noticed that there are two versions of each file. One that has .min appended to the filename and one that does not. Those with .min are compressed minified files. This means they do not have any white spaces, new line characters, and comments in them. They are the absolute smallest in size that they can be and are hard to read as they do not have any formatting. Uncompressed files, or those without .min, contain comments, spacing, and more things that make them easier to read.

    As a rule of thumb, you should develop with the uncompressed files; that way, if you have any questions or need to see how something works, you can easily read the file. When you deploy the application, use the .min files so that the application size is smaller.

    A smaller web application will load faster, uses less bandwidth, and any little bit helps in a time where we have metered bandwidth on mobile devices. Google checks for the page load time as part of SEO. Faster loading JavaScript and CSS files will help you score brownie points and hence minified (.min) files should be preferred in the production environment.

Using the framework via the CDN

There is a third way to acquire and use the framework. In the previous section, we looked at two different ways in which we can download and include the framework locally in our project. In addition to downloading jQuery Mobile, you can also use it via a content delivery network (CDN).

When using a CDN such as Google or even jQuery's own, you do not have the files stored on your local server. Instead, when the user loads your web application or site, it makes a connection to the CDN and uses it from there. This offers a few advantages over having it on the server. One of the biggest advantages is that it increases parallelism. Typically your browser can only download a couple of files at a time from the same server. So if you load the jQuery files, jQuery Mobile framework JavaScript and CSS files, a few custom CSS, and JavaScript files, this can cause a bottleneck as you will have to wait for all the files to download. If you use a CDN, your application makes a connection to Google's server, for example, and downloads a couple of files while your local ones load. This may not seem like a lot of benefit since the files are so small, but it can make a world of difference to your end user. Some other advantages are as follows:

  • If the user visits other sites that use the same CDN, the framework files could already be cached, thereby decreasing your load time even more.
  • It reduces the load on your web server. If you have a heavily used site or application, this could decrease the use of your own server resources.
  • Using a CDN can also allow the user to download the framework files even faster since there may be a CDN mirror closer to the user location than your web server.

So with all these cool advantages, why in the world would we ever want to use it locally? I mean, it sounds like we'd be stupid to ever download it again. Well, my friends, as with many things in life, there is always a downside.

Obviously, the biggest downfall is offline applications. If you are expecting or even adding the slightest bit of offline functionality to your project, then you cannot have the project going off server to use the framework from a CDN. It would have to be stored locally. If the user is offline, they won't be able to download it from the CDN and therefore would not be able to use the project that you worked so hard on.

Okay, so you're not planning on any offline functionality of your project. What else could stop you from using it via a CDN? Well, my friends we have a few more downfalls:

  • If your project is on a company intranet, there may be ACLs or firewalls in place that could prevent your internal webserver from accessing the outside world.
  • If your website is using an SSL certificate, the user will get a warning that they are accessing information from an unsecure site. This could spook many users and they may not trust your website.
  • If you make custom changes or add new functionality to the framework, you will obviously need to store it locally unless you're an absolute rock star and get your changes rolled into the main builds.

Well, we assume that we have covered the advantages and disadvantages of the usage of CDN well enough, so let's look at how and from where we can load jQuery Mobile.

There are three main CDNs we can use in our projects. They are Google, Microsoft, and of course, jQuery itself. Are there advantages to using one over the other? Possibly, but I think the differences would be small. Google may offer more mirrors but more people may use jQuery's own CDN meaning more people would have it cached, so in the end there may be no difference in efficiency.

We will look at the code for each of the CDNs and you can pull it from whichever one you wish to use.

Google's CDN

Google's CDN code is as follows:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

Microsoft's CDN

Microsoft's CDN code is as follows:

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

jQuery's CDN

jQuery's CDN code is as follows:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

So what are we doing in each of these blocks? Well, the first line of each block <link rel...> is loading in the CSS file we need for the project. The first <script src...> loads jQuery itself into our project. With the current version of jQuery Mobile, you can use jQuery versions 1.8 to 1.11 or 2.1. You will have to make sure that for every jQuery Mobile application, you will need to refer to the jQuery library before you refer to the jQuery Mobile JavaScript file.

Tip

This brings up a good point: even though we are using jQuery Mobile, we still need to load jQuery core. jQuery Mobile is not a replacement for jQuery proper but more of an extension, much like jQuery UI is.

The final <script src…> file loads jQuery Mobile itself. So let's get our feet wet in code now.

Seeing the framework in action

So far in this chapter we have done nothing but talk about jQuery Mobile, how we get it, why we should do things a certain way, blah blah. You're a developer; you want to see this in action and now you will. We are going to make a simple jQuery Mobile application. We'll see the code and then we'll explain what is going on within each piece of code:

  1. Go ahead and fire up Aptana Studio 3.
  2. Navigate to File | New | Web Project.
  3. Pick the default template
  4. Name the project whatever you like.

Don't worry too much about everything in Aptana Studio right now, as we'll look at it in more detail in the next chapter.

Right-click on your project and navigate to New | File from the pop-up menu. Name the file index.html. Add the following code to the file:

<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
      <title>jQuery Mobile: Getting Started</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h3>Web Development Books</h3>
      </div>
      <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true" data-divider-theme="b">
          <li data-role="list-divider">JavaScript</li>
          <li>
            <a href="#">Object Oriented JavaScript</a>
          </li>
          <li>
            <a href="#">JavaScript Unit Testing</a>
          </li>
          <li data-role="list-divider">PHP</li>
          <li>
            <a href="#">RESTful PHP Web Services</a>
          </li>
          <li>
            <a href="#">Instant RESS</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

When we execute this code, open up your browser and you should see the output similar to what we will see in the following screenshots on a mobile device:

Seeing the framework in action

That wasn't so hard, was it? Now, it's time to break down the code and see what's going on under the hood:

<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
      <title>jQuery Mobile: Getting Started</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head> 

This is your standard HTML5 header with us loading the jQuery Framework from the jQuery CDN. Also notice in-keeping with tradition, we are loading the compressed jQuery and jQuery Mobile files so that we have the smallest possible footprint we can have:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">

Now, you may or may not know this line, depending on how much mobile development experience you have. This line is important as it really makes a difference to how your website or application looks on a mobile browser. Apple started it for use on iOS Safari but has since been adopted by others. If you did not have this line in your project, the page we have would be rendered "zoomed out" basically. The user would have to double-click or zoom in via other means to see the page. By having this, we make sure mobile browsers are on their best behavior in helping your project look fabulous when the user visits:

<div data-role="page">

This is the start of jQuery Mobile specific code. For the most part, our project is straight HTML5. There is very little actual JavaScript involved, but we have these weird div lines sprinkled throughout. These are jQuery Mobile tags. It uses the standard div tag but adds on these things called data roles. In this instance, we are giving div the role of a page. The page role is the main role in jQuery Mobile. We'll discuss this in more detail in another chapter. For now, let's keep moving.

<div data-role="header">
<h3>Web Development Books</h3>
</div>

Here we are using another role, the header role. This allows us to display "Web Development Books" in a different manner than the rest of the page. As you might have noticed in the preceding screenshots, the entire text in the header is not visible. Whenever the text in the header is long, it will be truncated and appended by the ellipses (...). So make sure that you do not have really long names in the header. However, if long names cannot be averted, you can override the jQuery Mobile CSS to make sure that the text in the header is not truncated.

<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-divider-theme="b">
    <li data-role="list-divider">JavaScript</li>
    <li>
      <a href="#">Object Oriented JavaScript</a>
    </li>
    <li>
      <a href="#">JavaScript Unit Testing</a>
    </li>
    <li data-role="list-divider">PHP</li>
    <li>
      <a href="#">RESTful PHP Web Services</a>
    </li>
    <li>
      <a href="#">Instant RESS</a>
    </li>
  </ul>
</div>

This is the heart of our page, the content. Within the div tags, we are creating an unordered list, which jQuery Mobile then renders for us as buttons almost. If we had the links going to existing pages rather than the dummy link, the user could click the list items and navigate through the project. Again, we will be discussing these in much greater detail in another chapter.

Are you still with us? Everything might seem a bit overwhelming right now, even though we hope it doesn't, but as we go and you write more code, things will get easier and you'll see how powerful jQuery Mobile is without having to write a lot of complicated code.

Summary

In this chapter, we set up a local development server using XAMPP, and we installed an IDE to use for the book with Aptana Studio 3. We looked at the different ways you can download jQuery Mobile for local use in your project and then you saw how we can use it from the different CDNs, along with the advantages and disadvantages of using a CDN. Once all the basic setup was completed, we created our first jQuery Mobile project.

In the chapter that follows, we will take a look at the different tools and techniques that will help us not just in the development process, but also help us test our application as we develop it.

Left arrow icon Right arrow icon

Description

You've started down the path of jQuery Mobile, now begin mastering some of jQuery Mobile's higher level topics. Go beyond jQuery Mobile's documentation and master one of the hottest mobile technologies out there. Previous JavaScript and PHP experience can help you get the most out of this book.

What you will learn

  • Create a theme for your jQuery Mobile application by using the ThemeRoller tool
  • Test your application on a variety of resolutions through Screenfly
  • Master pages, panels, popups, toolbars, and navbars in jQuery Mobile
  • Understand how mobile web design best practices can enhance your mobile web application
  • Allow your users to navigate pages with a swipe gesture and add transitions and effects to the page changes
  • Discover how to create jQuery Mobile widgets that will extend the framework to suit your needs
  • See how Apache Cordova can turn your web application into a native Android or iOS app
  • Use jQuery Mobile with other popular JavaScript frameworks and technologies such as Backbone.js and Node.js
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 30, 2015
Length: 262 pages
Edition : 1st
Language : English
ISBN-13 : 9781783559084
Category :
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Publication date : Jul 30, 2015
Length: 262 pages
Edition : 1st
Language : English
ISBN-13 : 9781783559084
Category :
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 109.98
Mastering jQuery Mobile
$54.99
Mastering jQuery UI
$54.99
Total $ 109.98 Stars icon
Banner background image

Table of Contents

11 Chapters
1. Getting Started Chevron down icon Chevron up icon
2. Tools and Testing Chevron down icon Chevron up icon
3. Mobile Design Chevron down icon Chevron up icon
4. Call to Action – Our Main Project Chevron down icon Chevron up icon
5. Navigation Chevron down icon Chevron up icon
6. Controls and Widgets Chevron down icon Chevron up icon
7. Working with Data Chevron down icon Chevron up icon
8. Finishing Touches Chevron down icon Chevron up icon
9. The Next Level Chevron down icon Chevron up icon
10. Mobile Best Practices and Efficiency Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
(11 Ratings)
5 star 45.5%
4 star 27.3%
3 star 18.2%
2 star 0%
1 star 9.1%
Filter icon Filter
Top Reviews

Filter reviews by




Kindle Customer Aug 21, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I was (am) really surprised with this book because not only lays out the basics of a mobile app but ensures the reader gets the whole scope of a complete one, making sure one uses the right tools, from the IDE (Aptana) which also was a nice surprise (I used it around 4 years ago) to the Android Developer Tools and Apache Cordova and even NodeJs. Of course this book is intended for a seasoned developer (which I'm not) or at least someone (like myself) familiar with the technologies / frameworks mentioned, and / or in the process of creating or learning to create an app.
Amazon Verified review Amazon
Winston Sep 05, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Loved it! jQuery is used by millions of websites to to write javascript that would take many lines of code to produce without this terrific library. jQuery mobile does the same and more for mobile development. Mastering jQuery Mobile walks readers through projects that can be used on iOS, Android, and more.
Amazon Verified review Amazon
Mark King Sep 08, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I have been learning jquery mobile for the past few weeks using online tutorials. I found most of them confusing because they assume I already know a lot of the basics of how jquery mobile works. I decided to order this book hoping it would take me step by step from the beginning. I received the book a few days ago and have been following along chapter by chapter and I have not been disappointed yet. It provides me a lot of information about the ideas and concepts around jquery mobile which makes a BIG difference. I feel like I am finally starting to get the full concept of how jquery mobile works. I'm only half way through the book and loving it! I would recommend this book to anyone that is just started learning jquery mobile or that has been using it for some time and is looking to get a good idea of how the foundation of jquery mobile works.
Amazon Verified review Amazon
Sunny Oct 03, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book is awesome, really easy to learn, and improved my skills.If you are looking for a book that's easy to read and is a great book then this is the book for you.
Amazon Verified review Amazon
Alistair Meney Aug 13, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book offers an advanced guide to developing with jQuery Mobile, using the latest versions of the jQuery Mobile and jQuery libraries. The book presents real world examples and assumes some knowledge of CSS3, HTML5 and Javascript (jQuery). Examples are given for both multi-page and single-page templates. There is also an excellent guide to creating web apps with Cordova, both for iOS and Android. It's a good source of reference for responsive layout design with JQM (works fine with desktops too). Also welcome is the coverage of HTML5 features using modernizr and Wurfl for device detection. The data examples are PHP-centric, but are clearly written and easy to understand. More advanced is the discussion of getting jQuery Mobile to play nicely with Node.js, Express and Jade templates. The book also offers a very useful discussion on 'best practice' in mobile design and delivery. The examples provided are managed using Aptana studio, but this isn't required and the complete source code is available for download anyway. All in all the book offers an extensive coverage of the practical possibilities of JQM and one I'd highly recommend.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela