of x

Jquery Mobile Web Development Essentials-Third Edition - Sample Chapter

Published on 5 days ago | Categories: Documents | Downloads: 0 | Comments: 0




C o m m u n i t y

E x p e r i e n c e

D i s t i l l e d

 jQuery Mobile Mobile Web Web Development Essentials Third Edition Build a powerful and practical jQuery-based framework in order to create mobile-optimized websites

Raymond Camden Andy Matthews



In this package, you will find:   The authors biography   A preview chapter from the book, Chapter 1 'Preparing Your First jQuery Mobile Project'    A synopsis of the book’s content  content    More information on jQuery Mobile Mobile Web Development Development Essentials - Third Third Edition 


 About the Authors Raymond Camden is a developer advocate for IBM. His work focuses on the StrongLoop platform, Bluemix, hybrid mobile development, Node.js, HTML5, and web standards in general. He's a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog (http://www.raymondcamden.com), @raymondcamden on Twitter, or via e-mail at [email protected] Raymond Camden is the author of many development books, including Apache including Apache Cordova in Action, Action, Manning Publications Publications and  and Client-Side Data Storage, Storage, O'Reilly  Media, Inc. Inc.

Andy Matthews has been working as a software engineer for nearly 20 years with experience in a wide range of industries and a skillset that includes UI/UX, graphic design, and programming. He is the coauthor of the books Creating Mobile Apps with  jQuery Mobile and Mobile and jQuery  jQuery Mobile Web Development Essentials Essentials by  by Packt Publishing. He has written for online publications, such as Adobe, NetTuts, and .NET Magazine. He has spoken at conferences all over the country, and has developed a number of projects for the open source community.


Preface What is jQuery Mobile? On August 11, 2010, nearly six years ago, John Resig (creator of jQuery) announced the jQuery Mobile project. While it focused on the UI framework, it was also a recognition of jQuery itself as a tool for mobile websites and that work would be done to the core framework itself to make it work better on devices. Release after release, the jQuery Mobile project evolved into a powerful framework, encompassing more platforms, more features, and better performance with every update. But what do we mean when we say a UI framework? framework? What does it mean for developers and designers? jQuery Mobile provides a way to turn regular HTML (and CSS) into mobile-friendly websites. As you will see soon in the first chapter, you can take a regular HTML page, add the required bits for jQuery Mobile (essentially, lines of HTML), and your page is transformed into a mobile-friendly version instantly. Unlike other frameworks, jQuery Mobile is focused on HTML. In fact, for a framework tied to jQuery, you can do a heck of a lot of work without writing one line existing of JavaScript. It'sdeveloper a powerful, way adapt of creating mobile that any HTML canpractical pick up and within a few websites hours. Compare this to other frameworks, such as Sencha Touch. Sencha Touch is also a powerful framework, but its approach is radically different, using JavaScript to help define and layout pages. jQuery Mobile is much friendlier to people who are more familiar with HTML as opposed to JavaScript. jQuery Mobile is touch-friendly touch-friendly,, which will make sense to anyone who has used a smartphone and struggled to click the exact spot on a website with tiny text and hard-to-spot links. It will make sense to anyone who has accidentally clicked on a Reset button instead of Submit. jQuery Mobile will enhance your content to help solve these issues. Regular buttons become large, fat, and easy-to-hit buttons. Links can be turned into list-based navigation systems. Content can be split into virtual pages with smooth transitions. You will be surprised s urprised  just how jQuery Mobile works without without writing much code at all.



What's the cost? Ah, the million dollar question. Luckily, this one is easy to answer: nothing. jQuery Mobile, like jQuery itself, is completely free to use for any purpose. Not only that, it's open source. Don't like how something works? You can change it. Want something not supported by the framework? You can add it. To be fair, digging deep into the code base is probably something most folks will not be comfortable doing. However, the fact that if youtoneed to, and thebyfact other people can, will lead to a product thatyou willcan be open development thethat community at large.

What do you need to know? Finally, along with not paying a dime to get, and work with, jQuery Mobile, the best thing is that you probably already have all the skills necessary to work with the framework. As you will see in the upcoming chapters, jQuery Mobile is an HTML-based framework. If you know HTML, even just simple HTML, you can use the jQuery Mobile framework. Knowledge of CSS and JavaScript is a plus, but not entirely required (while jQuery Mobile uses a lot of CSS and JavaScript behind the scenes, you don't actually have to write any of this yourself!).

What about native apps?  jQuery Mobile does not create native native applications. You'll see later in the book how you can combine jQuery Mobile with hybrid mobile technologies, mobile technologies, such as Apache Cordova, to create native apps; but in general, jQuery Mobile is for building websites. The question on whether to develop a website or a mobile app is not something this book can answer. You need to look at your business needs and see what will satisfy them. Because we are not building mobile apps themselves, you do not have to worry about setting up any accounts with Google or Apple, or paying any fees for the marketplace. Any user with a mobile device that includes a browser will be able to view your mobile-optimized websites. Again, if you want to develop true mobile apps with jQuery Mobile, it's definitely an option.

Help! While we'd like to think that this book will cover every single possible topic you would need for all your jQuery Mobile needs, most likely there will be things we can't cover. If you need help, there are a couple of places you can try.



First, the jQuery Mobile docs (http://jquerymobile.com/demos/) cover syntax, features, and development in general, much like this book. While the material may cover some of the same ground, if you find something confusing here, try the official docs. Sometimes, a second explanation can really help. Second, the jQuery Mobile forum (http://forum.jquery.com/jquery-mobile) is an open-ended discussion list for jQuery Mobile topics. This is the perfect place to ask questions. a good placethem. to learn other people are having. You mayAlso, even it's be able to help Oneabout of theproblems best ways to learn a new topic is by helping others.

What this book covers Chapter 1, 1, Preparing Your First jQuery Mobile Project, Project, works you through your first  jQuery Mobile project. It details details what must be added to your your project's directory and source code. Chapter 2, 2, Working with jQuery Mobile Pages, Pages, continues the work in the previous chapter and introduces the concept of jQuery Mobile pages. Chapter 3, 3, Enhancing Pages with Headers, Footers, and Toolbars Toolbars,, explains how to enhance your pages with nicely formatted headers and footers. Chapter 4, 4, Working with Lists, Lists, describes how to create jQuery Mobile list views. These are mobile-optimized lists, which are especially great for f or navigation. Chapter 5, 5, Getting Practical – Building a Simple Hotel Mobile Website, Website, walks you through creating your first real (albeit simple) jQuery Mobile application. Chapter 6, 6, Working with Forms and jQuery Mobile, Mobile, explains the process of using jQuery Mobile-optimized forms. Layout and special form features are covered in detail. Chapter 7 , Creating Grids, Panels, and Other Widgets, Widgets, walks you through special jQuery Mobile UI items for creating grid-based layouts and other common UI elements. Chapter 8, 8, Moving Further with the Notekeeper Mobile Mobile Application Application,, walks you through the process of creating another website, an HTML5-enhanced note-taking application. Chapter 9, 9, jQuery Mobile Con fi  guration, Utilities, and JavaScript JavaScript Methods Methods,, describes the various JavaScript-based utilities your code may have need of. Chapter 10, 10, Working with Events, Events, details the events thrown by various jQuery Mobile-related features, like pages loading and unloading.



Chapter 11, 11, Enhancing jQuery Mobile, Mobile, demonstrates how to change the default appearance of your jQuery Mobile websites by selecting and creating unique themes. Chapter 12, 12, Creating Native Applications, Applications, takes what you've learned previously and shows how to use the open source PhoneGap project to create real native applications. Chapter 13, 13, Becoming an Expert – Building an RSS Reader Application Application,, expands upon the previous chapter by creating an application that lets you add and read RSS feeds on mobile devices.


Preparing Your First jQuery Mobile Project You know what jQuery Mobile is, the history of it, as well as its features and goals. Now, we're actually going to build our first jQuery Mobile website (well, web page) and see how easy it is to use. In this chapter, we will be covering the following topics: •

Cr Crea eati ting ng a ssim impl plee H HTM TML Lp pag agee

Ad Addi ding ng jQue jQuery ry Mo Mobi bile le to the the p pag agee

Upd Updati ating ng th thee HTM HTML L to m make ake u use se of tthe he da data ta at attri tribut butes es jQ jQuer uery y Mobile recognizes

Important preliminary points You can find all the source code for this chapter in the c1 folder of the ZIP file you downloaded from GitHub. If you wish to type everything out by hand, we recommend you to use similar filenames.

Building an HTML page Let's begin with a simple web page that is not mobile-optimized. To be clear, we aren't saying it can't be viewed on a mobile device. Not at all! But it may not be  on a mobile device. It may be hard to read (the text may be too small). It may usable on usable be too wide. It may use forms that don't work well on a touchscreen. We don't know the kinds of problems we will face until we start testing (and we've all tested our websites on mobile devices to see how well they work, right?).

[ 1 ]


Preparing Your First jQuery Mobile Project

Let's have a look at Listing 1-1: Listing 1-1: test1.html <html>   <head>   <title>First Mobile Example</title>   </head>   <body>  



<p> Welcome to our first mobile web site. It's going to be the best site you've ever seen. Once we get some content. And a business plan. But the hard part is done!




<p> <i>Copyright Megacorp &copy; 2015</i>



  </body> </html>

As we said, it isn't too complex, right? Let's take a quick look at this in the browser:

[ 2 ]


Chapter 1

Not so bad, right? But let's take a look at the same page in a mobile simulator:

[ 3 ]


Preparing Your First jQuery Mobile Project

Wow, the text is in a barely readable font size. You've probably seen web pages like this before on your mobile device. You can, of course, typically use pinch and zoom or double-click actions to increase the size of the text. But it would be preferable to have the page render immediately in a mobile-friendly view. This is where jQuery Mobile enters.

Getting jQuery Mobile In the preface, we talked about how jQuery Mobile is just is just a  a set of files. This wasn't said to minimize the amount of work done to create those files or to play down how powerful they are, but to emphasize that using jQuery Mobile means that you don't have to install any special tools or server. You can download the files and simply include them in your page. And if that's too much work, you have an even simpler solution. jQuery Mobile's files are hosted on a Content Delivery Network (CDN). This is a resource hosted by them and it is guaranteed (as much as anything like this can be) to be online and available. Multiple websites are already using these CDN hosted files. This means that when users hit your website, they may already have the resources in their cache. For this book, we will be making use of the CDN hosted fi

les.need. Just for this rst example, we'll download the ZIP le and extract the les we I recommend doing this anyway for the times when you're on an airplane and wanting to whip up a quick mobile website.

To grab the files, visit http://jquerymobile.com/download. There are a few options here, but you want the ZIP  fi le le option. Go ahead and download the ZIP file and extract it (the ZIP file you downloaded earlier from GitHub has a copy already). The following screenshot demonstrates what you should see after extracting the content from the ZIP file:

[ 4 ]


Chapter 1

An important note: at the time this book was written, jQuery Mobile was at version 1.4.5. Obviously, by the time you read this book, a later version may be released. The filenames you see listed in the previous screenshot are version-specific, so keep in mind that they may look a bit different for you.

The ZIP file contains demos and both the minified and regular versions of the jQuery Mobile framework. Additional files are provided for theming and other purposes, but your main concern will be with jquery.mobile-1.4.5.min.css and jquery. fi

mobile-1.4.5.min.js. You will typically want to use the mini ed version in your production apps though. The images folder contains various images used by jQuery

Mobile's CSS file. Of course, you also need to include the jQuery library.

You can download this separately at http://www.jquery.com.

[ 5 ]


Preparing Your First jQuery Mobile Project

Implementing jQuery Mobile Ok, we've got the bits. How do we use them? Adding jQuery Mobile support to a website requires the following three steps s teps at a minimum: 1. First, add the HTML5 DOCTYPE declaration to the page: <!DOCTYPE html>

This is used to help inform the browser about the type of content it will be dealing with 2. Add a viewport meta tag: <meta name="viewport" content="width=device-width, initialscale=1">

This will help set better defaults for pages when viewed on a mobile device 3. Finally, the CSS, the JavaScript llibrary, ibrary, and jQuery it itself self need to be included into the file. Let's look at a modified version of our previous HTML file that adds all of these: Listing 1-2: test2.html <!DOCTYPE html> <html>   <head>   <title>First Mobile Example</title>   <meta name="viewport" content="width=device-width, initial  scale=1">   <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>   <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></ script>   </head>   <body>   <h1>Welcome</h1>   <p>   Welcome to our first mobile web site.   It's going to be the best site you've ever seen.   Once we get some content. And a business plan.   But the hard part is done!   </p>   <p>   <i>Copyright Megacorp &copy; 2015</i>   </p>   </body> </html>

[ 6 ]


Chapter 1

For the most part, this version is the exact same as listing 1, except for the addition of the DOCTYPE declaration, the CSS link, and our two JavaScript libraries. Notice that we pointed to the hosted version of the jQuery library. It's perfectly fine to mix local JavaScript files and remote ones. If you want to ensure that you can work offline, you can simply download the jQuery library as well. So, while nothing changed in the code between the body tags, there is going to be a radically different view now in the The following screenshot shows how the iOS mobile browser renders thebrowser. page now:

[ 7 ]


Preparing Your First jQuery Mobile Project

Right away, you see a couple of differences. The biggest difference is the relative size of the text. Notice how much bigger and easier to read it is. As we said, the user could have zoomed in on the previous version, but many mobile users aren't aware of this technique. This page loads up immediately in a manner that is much more usable on a mobile device.

Working with data attributes As we saw in the previous example, just adding in jQuery Mobile goes a long way to updating our page for mobile support. But there's a lot more involved to really prepare our pages for mobile devices. As we work with jQuery Mobile over the course of the book, we're going to use various data attributes to mark up our pages in a way that jQuery Mobile understands. But what are data attributes? HTML5 introduced the concept of data attributes as a way to add ad hoc values to the Document Object Model (DOM). As an example, this is a perfectly valid HTML: <div id="mainDiv" data-ray="moo">Some content</div>


In the previous HTML, the with data attribute is completely because our attribute begins , it is also completelymade legal.up. So, However, what happens when you view this in your browser? Nothing! The point of these data attributes is to integrate with other code, like JavaScript that does whatever it wants with them. So, for example, you could write JavaScript that finds every item in the DOM with the data-ray attribute and change the background color to whatever was specified in the value. This is where jQuery Mobile comes in, making extensive use of data attributes both for markup (to create widgets) and behavior (to control what happens when links are clicked). Let's look at one of the main uses of data attributes within jQuery Mobile—defining pages, headers, content, and footers: Listing 1-3: test3.html <!DOCTYPE html> <html> <head> <title>First Mobile Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery2.1.3.min.js"></script>

[ 8 ]


Chapter 1 <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></ script> </head> <body> <div data-role="page">  

<div data-role="header"><h1>Welcome</h1></div>


<div role="main" class="ui-content">


<p> Welcome to our first mobile web site. It's going to be the best site you've ever seen. Once we get some content. And a business plan. But the hard part is done!





  <div data-role="footer">    

<h4>Copyright Megacorp &copy; 2015</h4> </div>

  </div> </body> </html>

Compare the previous code snippet to listing 1-2 and you will see that the main difference was the addition of the div blocks. One div block defines the page. Notice that it wraps all of the content inside the body tags. Inside the body tag, there are three separate div blocks. One has a role of header, another a role of content, and the final one is marked as footer. The header and footer blocks use data-role, which should give you a clue that we're de fining a role for each of the blocks. The center div block, the one for content, uses the role attribute instead of data-role  and adds a class. This is a special exception where jQuery Mobile (most recently) has switched to using a class directly to help speed up the initial layout of the page. As we stated earlier, these data attributes mean nothing to the browser itself, but jQuery Mobile can recognize them and enhance them.

[ 9 ]


Preparing Your First jQuery Mobile Project

Let's look at the new version of the page:

Notice right away that both the header and footer now have a gray background applied to them. This makes them stick out even more from the rest of the content. Speaking of content, the page text now has a bit of space between it and the sides. The header and footer were enhanced automatically by the jQuery Mobile JavaScript library, while the use of the ui-class style on the main content made use of the CSS provided with the framework. This is a theme you will see repeated again and again as we go through this book. A vast majority of the work you'll be doing will involve the use of data attributes or a bit of CSS.

[ 10 ]


Chapter 1

Summary In this chapter, we talked a bit about how web pages may not always render well in a mobile browser. We talked about how the simple use of jQuery Mobile can go a long way to improve the mobile experience of a website. Specifically, we discussed how you can download jQuery Mobile and add it to an existing HTML page, what data attributes mean in terms of HTML, and how jQuery Mobile makes use of data attributes to enhance your pages. In the next chapter, we will build upon this usage and start working with links and multiple pages of content.

[ 11 ]



Get more information jQuery Mobile Web Development Essentials - Third

Where to buy this book You can buy jQuery Mobile Web Development Essentials - Third Edition from the website..  Packt Publishing website Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet inte rnet  book retailers. here for ordering and shipping details. Click here 


Stay Connected: 

Sponsor Documents


Forgot your password?

Or register your new account on INBA.INFO


Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in