Book Files

Files for

Developing Mobile Websites with HTML5

Mobile isn't an add-on--it's essential. This book covers mobile-friendly type and color schemes, navigation, fast-loading images, mobile-ready audio and video, meshing mobile and desktop sites, and much more. More

by David Karlins

Click here to order the book

Other books you might find helpful here

Author website here

Code & Examples

Code

Examples

Contact the author

Chapter 2

Code for Chapter 2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>

<body>
<div data-role="page" id="page01">
<div data-role="header">
<h1>HTML5 Mobile App</h1>
</div>
<div data-role="content">
<h1>Welcome!</h1>
<p>Home page placeholder text</p>
<ul>
<li><a href="#page02">Page 2</a></li>
<li><a href="#page03">Page 3</a></li>
<li><a href="#page04">Page 4</a></li>
</ul>
<p>This page built with HTML5 using jQuery Mobile</p>
<img src="http://view.jquerymobile.com/1.3.2/dist/demos/_assets/img/jquery-logo.png" width="240px">
</div>
<div data-role="footer">
<h4>Built with HTML5 using jQuery Mobile</h4>
</div>
</div>
<div data-role="page" id="page02">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<p>Page 2 content</p>
</div>
<div data-role="footer">
<h4><a href="#page01">HOME</a></h4>
</div>
</div>
<div data-role="page" id="page03">
<div data-role="header">
<h1>Page 3</h1>
</div>
<div data-role="content">
<p>Page 3 content </p>
</div>
<div data-role="footer">
<h4><a href="#page01">HOME</a></h4>
</div>
</div>
<div data-role="page" id="page04">
<div data-role="header">
<h1>Page 4</h1>
</div>
<div data-role="content">
<p>Page 4 content</p>
</div>
<div data-role="footer">
<h4><a href="#page01">HOME</a></h4>
</div>
</div>
</body>
</html>

 

HOME

Chapter 3

Code for Split Button List example with Info icon (map and info links open different files)

<h3>Split button list</h3>
<p><ul data-role="listview" data-split-icon="info">
<li>
<a href="http://www.state.gov/img/10/40922/afghanistan_map_201012worldfactbook_300_1.jpg" >
<img src="http://www.state.gov/img/10/40922/afghanistan_map_201012worldfactbook_300_1.jpg"/>
<h3>Afghanistan</h3>
<p>Map</p>
</a>
<a href="http://www.state.gov/p/sca/ci/af/">U.S. State Department Information</a>
</li>
<li>
<a href="http://www.state.gov/cms_images/albania_map_2008.jpg">
<img src="http://www.state.gov/cms_images/albania_map_2008.jpg" />
<h3>Albania</h3>
<p>Map</p>
</a>
<a href="http://www.state.gov/p/eur/ci/al/">U.S. State Department Information</a>
</li>
<li>
<a href="http://www.state.gov/cms_images/map_algeria.jpg">
<img src="http://www.state.gov/cms_images/map_algeria.jpg" />
<h3>Algeria</h3>
<p>Map</p>
</a>
<a href="http://www.state.gov/p/nea/ci/ag/">U.S. State Department Information</a>
</li>
</ul>
</p>

Code for Dialog page with no rounded corners and close button in upper right:

<div data-role="page" id="dialog" data-dialog="true" data-close-btn="right" data-corners="false">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h3>Dialog content</h3>
<p>&nbsp;</p>
</div>
<div data-role="footer">
<h4>Dialog footer</h4>
</div>

Code for link to dialog page with flip transition

<h3>Open <a href="#dialog"true" data-transition="flip">Dialog</a> in dialog with flip transition</h3>

 

HOME

Chapter 4

Head element code for jQuery Mobile 1.3.2:

Entire <head> element code for jQuery Mobile 1.3.2 is:

<head>
<title>Page Title</title>   
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

Example of data-theme c applied to a listview:

ul data-role="listview" data-inset="true">
<li data-theme="a"><a href="#">A</a></li>
<li data-theme="b"><a href="#">B</a></li>
<li data-theme="c"><a href="#">C</a></li>
<li data-theme="d"><a href="#">D</a></li>
<li data-theme="e"><a href="#">E</a></li>
</ul>

Code for themed button list example:


<a href="#" data-role="button" data-theme="a" data-icon="arrow-l" data-type="horizontal">Prev</a>

<a href="#" data-role="button" data-theme="b" data-icon="arrow-u" data-iconpos="top" data-type="horizontal">Home</a>

<a href="#" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right" data-type="horizontal">Next</a>

HOME

Chapter 4 Head element code for jQuery Mobile 1.3.2: Entire <head> element code for jQuery Mobile 1.3.2 is:

<title>Page Title</title>   
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

Example of data-theme c applied to a listview:

ul data-role="listview" data-inset="true">
</p>
<li data-theme="a"><a href="#">A</a></li>
<li data-theme="b"><a href="#">B</a></li>
<li data-theme="c"><a href="#">C</a></li>
<li data-theme="d"><a href="#">D</a></li>
<li data-theme="e"><a href="#">E</a></li>
</ul>

Code for themed button list example:

h<a href="#" data-role="button" data-theme="a" data-icon="arrow-l" data-type="horizontal">Prev</a>

<a href="#" data-role="button" data-theme="b" data-icon="arrow-u" data-iconpos="top" data-type="horizontal">Home</a>

<a href="#" data-role="button" data-theme="a" data-icon="arrow-r" data-iconpos="right" data-type="horizontal">Next</a>

Code for Chapter 6

Nested Collapsible List Example

<div data-role="collapsible">
<h1>Main collapsible block title</h1>
<p>Main content.</p>
<div data-role="collapsible">
<h1>Nested title 1a </h1>
<p>Content 1a.</p>
</div>
<div data-role="collapsible">
<h1> Nested title 1b</h1>
<p> Content 1b.</p>
</div>
</div>

Footer

Ch 11

Code for Chapter 11

<h3>Tell us about yourself</h3>
<div data-role="main" class="ui-content">
<form name="form1" method="post" action="">
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name"/ placeholder="Enter a nickname">
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Email is required" required/>
</div>
<div data-role="fieldcontain">
<label for="color">Favorite color:</label>
<input type="color" name="color" id="color" placeholder="Pick any color from the color picker"/>
</div>
<div data-role="fieldcontain">
<label for="number">Lucky number:</label>
<input type="number" name="number" id="number" placeholder="No negative numbers please"/ min="0">
</div>

<div data-role="fieldcontain">
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" placeholder="Please include area code"/>
</div>
<div data-role="fieldcontain">
<label for="url">Favorite website:</label>
<input type="url" name="url" id="url" placeholder="Choose any site"/>
</div>
<div data-role="fieldcontain">
<label for="rating">Rate this site (10 is best):</label>
<input type="range" name="rating" id="rating" value="5" min="0" max="10"/>
</div>
<label for="veggie">Favorite Veggie:</label>
<select name="veggie" id="veggie">
<option value="0" >Pick one</option>
<option value="1" >Asparagus</option>
<option value="2" >Avocado</option>
<option value="3" >Barley</option>
<option value="4" >Beets</option>
<option value="5" >Bell Peppers</option>
<option value="6" >Black Beans</option>
<option value="7" >Bok Choy</option>
<option value="8" >Broccoli</option>
<option value="9" >Brussels Sprouts</option>
<option value="10" >Cabbage</option>
<option value="11" >Carrots</option>
<option value="12" >Cauliflower</option>
<option value="13" >Celery</option>
<option value="14" >Collard Greens</option>
<option value="15" >Corn</option>
<option value="16" >Cucumber</option>
<option value="18" >Eggplant</option>
<option value="19" >Flax Seeds</option>
<option value="20" >Green Beans</option>
<option value="21" >Green Peas</option>
<option value="23" >Kale</option>
<option value="24" >Leeks</option>
<option value="25" >Lima Beans</option>
<option value="26" >Mushrooms</option>
<option value="27" >Mustard Greens</option>
<option value="28" >Navy Beans</option>
<option value="29" >Olives</option>
<option value="30" >Romaine Lettuce</option>
<option value="31" >Spinach</option>
<option value="32" >Summer Squash</option>
<option value="33" >Sweet Potato</option>
<option value="34" >Swiss Chard</option>
<option value="35" >Turnip Greens</option>
<option value="36" >Winter Squash</option>
</select>
<h4>Choose a veggie:</h4>
<input list="veggies">
<datalist id="veggies">
<option value="Asparagus">
<option value="Avocado">
<option value="Barley">
<option value="Beets">
<option value="Bell Peppers">
</datalist>
<div data-role="fieldcontain">
<label for="birthday">Birthday:</label>
<input type="date" name="birthday" id="birthday" placeholder="Not required"/>
</div>
<button>Submit</button>
<button type="reset">Reset</button>
</form>
Calculate here
<form oninput="x.value=parseInt(a.value)*parseInt(b.value)">
<input type="number" id="a">*
<input type="number" id="b">=
<output name="x" for="a b">
</output>
</form>

 

here

 

Footer

Talk to Us...

Tell us about yourself

Choose a veggie:

Calculate here
* =

Chapter 12 Code

Button code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile Widgets</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page01">
<div data-role="header"><h1>Popup Links</h1></div>
<div data-role="content">
<h1><a href="#popup1" data-transition="flip" data-rel="popup" data-position-to="window" data-role="button" data-icon="arrow-r" data-iconpos="right">
Widgets</a>
</h1>
<div data-role="popup" id="popup1" data-theme="b">
<h3> Widgets are animated, interactive content. </h3>
<p>
<img src="http://api.jquerymobile.com/jquery-wp-content/themes/jquery/images/logo-jquery-mobile.png" width="300" height="auto">
</p>
</div>

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

Navbar Code:


<!DOCTYPE html>
<html>
<head>
<title>Navbar no style</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Header content B</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="video">Video</a></li>
<li><a href="#" data-icon="info">Info</a></li>
<li><a href="#" data-icon="comment">Talk</a></li>
<li><a href="#" data-icon="mail">Email</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<h1>Go to...</h1>
<div data-role="navbar" data-icon-pos="bottom" >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Talk</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Email</a></li>
</ul>
</div><!-- /navbar -->
<p>Page content</p>
<p>&nbsp;</p>
<div data-role="navbar">
</div>


</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#" data-icon="home"></a></li>
<li><a href="#" data-icon="video"></a></li>
<li><a href="#" data-icon="info"></a></li>
<li><a href="#" data-icon="comment"></a></li>
<li><a href="#" data-icon="mail"></a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>

 

Home

No content on this page


Web hosting