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>
