Jquery Mobile 샘플

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Jquery Mobile 샘플</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<style>

i { width:20px; text-align:center; }

</style>

</head>

<body>

<div data-role="page">

<div data-role="header">

<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>

<h1><strong><small>오늘도 행복하세요.</small></h1>

<a href="#panel-push" data-role="button" class="ui-btn-right ui-nodisc-icon ui-alt-icon ui-btn ui-icon-bars ui-btn-icon-notext" role="button" >메뉴</a>

<a href="#panel-push" data-role="button" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-bars" data-mini="true" data-shadow="false" role="button" >메뉴</a>

</div>

<div data-role="panel" id="panel-push" data-display="push" data-position="right" data-theme="b">

<ul data-role="listview">

<li data-icon="delete"><a href="#" data-rel="close">메뉴닫기</a></li>

<li><a href="#"><i class="fa fa-list-alt"></i> <span>출·퇴근</span></a></li>

</ul>

<br><br>

<a href="#" data-ajax="false" class="ui-btn ui-corner-all" data-shadow="false">로그아웃</a>

</div>

<div data-role="content">

<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>

<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>

</body>

</html>