Book Image

jQuery Mobile Web Development Essentials

By : Raymond Camden, Andy Matthews
Book Image

jQuery Mobile Web Development Essentials

By: Raymond Camden, Andy Matthews

Overview of this book

<p>jQuery Mobile is a unified, HTML5-based user interface system for all popular mobile device platforms. It is compatible with all major mobile, tablet, e-reader and desktop platforms like iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, and Windows Phone 7.<br /><br /><i>jQuery Mobile Web Development Essentials</i> will explain how to create mobile-optimized sites with the easiest, most practical HTML/JavaScript framework available and to add the framework to your HTML pages to create rich, mobile-optimized web pages with minimal effort.<br /><br />Throughout the book, you'll learn details that help you become a pro at mobile web development. You begin with simple HTML and quickly enhance it using jQuery Mobile for incredible mobile-optimized sites. Start by learning the building blocks of jQuery Mobile&rsquo;s component-driven design. Dig into forms, events, and styling, then finish by building native mobile applications. You will learn how to build websites and apps for touch devices such as iPhone, iPad, Android, and BlackBerry with the recently developed jQuery Mobile library through sample applications of increasing complexity.</p>
Table of Contents (19 chapters)
jQuery Mobile Web Development Essentials
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface

Listing the hotel rooms


Now let's look at rooms.html. This is where we will list out the room types available at the hotel:

Listing 5-3: rooms.html
<!DOCTYPE html>
<html>
<head>
<title>The Camden Hotel - Our Rooms</title>
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/ latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery- 1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/ latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Our Rooms</h1>
</div>
<div data-role="content">
<p>
Select a room below to see a picture.
</p>
<ul data-role="listview" data-inset="true">
<li><a href= "room_poor.html">Simple Elegance</a></li>
<li><a href= "room_medium.html">Gold...