<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<link rel="stylesheet" href="http://ququplay.github.io/jquery-mobile-flat-ui-theme/css/jquery.mobile.flatui.css" />
<link rel="stylesheet" href="index.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button">Back</a>
<h1>Ciao</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>This is a <a href="#">link</a>
</p>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Divider</li>
<li><a href="#">Item 1</a>
</li>
<li><a href="#">Item 2</a>
</li>
<li><a href="#">Item 3</a>
</li>
</ul>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<a href="#" data-role="button">Click me</a>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
<div class="ui-body">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>I'm a themed collapsible</h3>
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in.</p>
</div>
<!-- /collapsible -->
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>I'm a themed collapsible with a themed content</h3>
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in.</p>
</div>
</div>
<!-- /themed container -->
<div data-role="fieldcontain">
<label for="name-c">Text Input:</label>
<input type="text" name="name" id="name-c" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-c">Flip switch:</label>
<select name="switch-c" id="switch-c" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-c">Slider:</label>
<input type="range" name="slider" id="slider-c" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6c" id="checkbox-6c" class="custom" />
<label for="checkbox-6c">b</label>
<input type="checkbox" name="checkbox-7c" id="checkbox-7c" class="custom" />
<label for="checkbox-7c"><em>i</em>
</label>
<input type="checkbox" name="checkbox-8c" id="checkbox-8c" class="custom" />
<label for="checkbox-8c">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1c" value="choice-1" />
<label for="radio-choice-1c">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2c" value="choice-2" />
<label for="radio-choice-2c">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3c" value="choice-3" />
<label for="radio-choice-3c">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4c" value="choice-4" />
<label for="radio-choice-4c">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-c" class="select">Choose shipping method:</label>
<select name="select-choice-c" id="select-choice-c">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="gear" class="ui-btn-active ui-state-persist">Button 1</a>
</li>
<li><a href="#" data-icon="refresh">Button 2</a>
</li>
<li><a href="#" data-icon="check">Button 3</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /page -->
</body>
</html>