Commit 2ad319dc authored by O'Reilly Media, Inc's avatar O'Reilly Media, Inc

Initial commit

parents
## Example files for the title:
# jQuery Mobile, by Jon Reid
[![jQuery Mobile, by Jon Reid](http://akamaicovers.oreilly.com/images/9781449306670/cat.gif)](https://www.safaribooksonline.com/library/view/title/9781449309626//)
The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.
O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.
If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.
Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>First page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>First page!</p>
<p><a href="#page2">Go to the second page!</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Second page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- begin first page -->
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
<p><a href="#page2">Go to Second Page</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- end first page -->
<!-- Begin second page -->
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
<p><a href="#page3">Go to Third Page</a></p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<!-- end second page -->
<!-- begin third page -->
<section id="page3" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Third page!</p>
<p><a href="#page1">Go back to First Page</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- end third page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- begin first page -->
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
<p><a href="#page2">Go to Second Page</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- end first page -->
<!-- Begin second page -->
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
<p><a href="#page3">Go to Third Page</a></p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<!-- end second page -->
<!-- begin third page -->
<section id="page3" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Third page!</p>
<p><a href="external.html">Go to external page</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- end third page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- begin first page -->
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
<p><a href="#page2" data-rel="dialog">Open page 2 as a dialog</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- end first page -->
<!-- Begin second page -->
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<!-- end second page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- begin first page -->
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
<p><a href="#page2" data-rel="dialog" data-transition="slidedown">Open page 2 as a dialog</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- end first page -->
<!-- Begin second page -->
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<!-- end second page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!-- begin first page -->
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
<p><a href="#page2" data-transition="flip">Flip to Page 2</a></p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- end first page -->
<!-- Begin second page -->
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
<p><a href="#page1" data-transition="flip" data-direction="reverse">Flip back to Page 1</a></p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<!-- end second page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>This content will be ignored.</p>
<!-- Begin Page 4 -->
<section id="page4" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>External Page!</p>
<p><a href="#page1">Go to First Page</a>.</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- End Page 4-->
<h3>This content will be ignored as well.</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Unordered List</h3>
<ul data-role="listview">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
<nav data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>
<li><a href="#">Sixth</a></li>
</ul>
</nav>
</header>
<div class="content" data-role="content">
<h3>Content</h3>
</div>
<footer data-role="footer">
<h3>O'Reilly</h3>
</footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<h3>Content area.</h3>
</div>
<footer data-role="footer" data-position="fixed">
<h3>O'Reilly</h3>
</footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page" data-fullscreen="true">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<h3>Content area.</h3>
</div>
<footer data-role="footer" data-position="fixed">
<h3>O'Reilly</h3>
</footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Buttons</h3>
<a href="#" data-role="button">Link-based button</a>
<input type="submit" value="submit" data-inline="true">
<input type="reset" value="reset" data-inline="true">
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Control Group Buttons</h3>
<div data-role="controlgroup">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Button Icons</h3>
<div data-role="controlgroup" data-type="horizontal" data-inline="true">
<a href="#" data-role="button" data-icon="home" data-iconpos="left">Home</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="left">Configure</a>
<a href="#" data-role="button" data-icon="flagicons-french" data-iconpos="left">French</a>
</div>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Checkboxes and Radio Buttons</h3>
<form id="myform" action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Filter Restaurants By:</legend>
<input type="checkbox" name="checkbox-french" id="checkbox-french">
<label for="checkbox-french">French</label>
<input type="checkbox" name="checkbox-italian" id="checkbox-italian">
<label for="checkbox-italian">Italian</label>
<input type="checkbox" name="checkbox-greek" id="checkbox-greek">
<label for="checkbox-greek">Greek</label>
</fieldset>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select a Language:</legend>
<input type="radio" name="radio-language" id="radio-french">
<label for="radio-french">French</label>
<input type="radio" name="radio-language" id="radio-italian" checked="checked">
<label for="radio-italian">Italian</label>
<input type="radio" name="radio-language" id="radio-greek">
<label for="radio-greek">Greek</label>
</fieldset>
</div>
</form>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Checkboxes and Radio Buttons</h3>
<form id="myform" action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="slider-music">Ambient Music</label>
<select name="slider-music" id="slider-music" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
</form>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Search Input</h3>
<form id="myform" action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="search-restaurants">Search Restaurants:</label>
<input type="search" name="search-restaurants" id="search-restaurants" value="" />
</div>
</form>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Native Select Menu Demonstration</h3>
<form id="myform" action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="select-restaurants">Select Your Restaurants:</label>
<select id="select-restaurants" name="select-restaurants">
<option value="lecentral">Le Central</option>
<option value="bistrovandome">Bistro Vandome</option>
<option value="antoines">Antoine's</option>
</select>
</div>
</form>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Unordered List</h3>
<ul data-role="listview">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ol>