Jquery 모바일: fieldcontain
예제1) input과 textarea의 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div data-role="content">
<div data-role="fieldcontain">
<label for="userid">아이디를 입력하세요:</label>
<input type="text" id="userid" />
</div>
<div data-role="fieldcontain">
<label for="userpw">비밀번호를 입력하세요:</label>
<input type="password" id="userpw" />
</div>
<div data-role="fieldcontain">
<label for="textarea">자신을 소개하세요:</label>
<textarea cols="40" rows="8" id="textarea"></textarea>
</div>
</div>
<footer data-role="footer" data-position="fixed">
<h1>ⓒcopyright 2016</h1>
</footer>
</section>
</body>
</html>
예제2) RadioButton의 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>반려동물을 선택하세요:</legend>
<input type="radio" id="radio-choice-1" name="radio-choice-1" checked="checked" />
<label for="radio-choice-1">개</label>
<input type="radio" id="radio-choice-2" name="radio-choice-2" />
<label for="radio-choice-2">고양이</label>
<input type="radio" id="radio-choice-3" name="radio-choice-3" />
<label for="radio-choice-3">토끼</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>반려동물을 선택하세요:</legend>
<input type="radio" id="radio-choice-4" name="radio-choice-4" checked="checked" />
<label for="radio-choice-4">개</label>
<input type="radio" id="radio-choice-5" name="radio-choice-5" />
<label for="radio-choice-5">고양이</label>
<input type="radio" id="radio-choice-6" name="radio-choice-6" />
<label for="radio-choice-6">토끼</label>
</fieldset>
</div>
</div>
<footer data-role="footer" data-position="fixed">
<h1>@copyright 2016</h1>
</footer>
</section>
</body>
</html>
예제3) CheckBox의 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend> 약관에 동의하시겠습니까? </legend>
<input type="checkbox" name="check-1" id="check-1" />
<label for="check-1">I agree</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend> 애완 동물을 선택하세요 : </legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" />
<label for="checkbox-1a">강아지</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" />
<label for="checkbox-2a">고양이</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" />
<label for="checkbox-3a">햄스터</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" />
<label for="checkbox-4a">앵무새</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend> 애완 동물을 선택하세요 : </legend>
<input type="checkbox" name="checkbox-5a" id="checkbox-5a" />
<label for="checkbox-5a">강아지</label>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" />
<label for="checkbox-6a">고양이</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" />
<label for="checkbox-7a">햄스터</label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" />
<label for="checkbox-8a">앵무새</label>
</fieldset>
</div>
</div>
<footer data-role="footer" data-position="fixed">
<h1>@copyright 2016</h1>
</footer>
</section>
</body>
</html>
예제4) Select의 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-1" class="select"> 색상선택하기 : </label>
<select name="select-choice-1" id="select-choice-1">
<option value="red">빨간색</option>
<option value="green">초록색</option>
<option value="blue">파란색</option>
<option value="yellow">노란색</option>
</select>
</div>
</div>
<footer data-role="footer" data-position="fixed">
<h1>@copyright 2016</h1>
</footer>
</section>
</body>
</html>
'jQuery Mobile' 카테고리의 다른 글
| Jquery 모바일: 접이식 예제 (2) | 2016.06.03 |
|---|---|
| Jquery 모바일: 썸네일(Thumbnail) (0) | 2016.06.02 |
| Jquery 모바일: 리스트뷰(listview) (0) | 2016.06.02 |
| Jquery 모바일: 메뉴 구성 (0) | 2016.06.01 |
| Jquery 모바일: 헤더와 푸터 고정 data-position="fixed" (0) | 2016.06.01 |
