1. 필드 컨테이너
텍스트 입력 필드
그에 맞는 소프트 키보드가 나오게 설계되어있음
2. 슬라이더
3. 플립 토글 스위치
4. 라디오 버튼
5. 체크박스 버튼
6. 셀렉트 메뉴
1. 네이티브 옵션 메뉴
2. data-native-menu 옵션이 false
3. 여러개 선택하면 선택된 갯수가 나옴
16-01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16-01</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.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" id="index">
<div data-role="header" data-position="fixed">
<h3>폼 요소</h3>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="16-02.html" data-transition="slide">텍스트 입력 필드</a></li>
<li><a href="16-03.html" data-transition="slide">슬라이더</a></li>
<li><a href="16-04.html" data-transition="slide">플립 토글 스위치</a></li>
<li><a href="16-05.html" data-transition="slide">라디오 버튼</a></li>
<li><a href="16-06.html" data-transition="slide">체크박스 버튼</a></li>
<li><a href="16-07.html" data-transition="slide">셀렉트 메뉴</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
16-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16-02</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.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" id="text" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>텍스트 입력 필드</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<form name="myform">
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="name">이름</label>
<input type="text" id="name"/>
</div>
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="pass">패스워드</label>
<input type="password" id="pass"/>
</div>
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="email">이메일</label>
<input type="email" id="email"/>
</div>
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="phone">전화</label>
<input type="tel" id="phone"/>
</div>
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="age">나이</label>
<input type="number" id="age"/>
</div>
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="url">URL</label>
<input type="url" id="url"/>
</div>
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="search">검색</label>
<input type="search" id="search" placeholder="검색어를 입력하세요."/>
</div>
<!--fieldcontain영역에 추가함 -->
<div data-role="fieldcontain">
<label for="content">내용</label>
<textarea id="content" cols="40" rows="8"></textarea>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
16-03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16-03</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.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" id="slider" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>슬라이더</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<form name="myform">
<!--fieldcontain을 씀 -->
<div data-role="fieldcontain">
<label for="year">년도</label>
<!-- 아래는 슬라이더 소스임-->
<input type="range" id="year" value="2014" min="1900" max="2030"/>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
16-04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16-04</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.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" id="fliptoggle" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>플립 토글 스위치</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<form name="myform">
<div data-role="fieldcontain">
<label for="gender">성별</label>
<!--플립 토글 스위치는 select를 씀 -->
<select name="gender" id="gender" data-role="slider">
<!--option으로 선택 옵션을 줌-->
<option value="남자">남자</option>
<option value="여자">여자</option>
</select>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
16-05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16-05</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.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" id="radio" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>라디오 버튼</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<form name="myform">
<div data-role="fieldcontain">
<!-- 라디오 버튼은 data-role을 controlgroup으로 반드시 해야한다.-->
<fieldset data-role="controlgroup">
<legend>가장 좋아하는 견종</legend>
<!--input type을 반드시 radio로 해야한다. -->
<input type="radio" name="dog" value="골든 리트리버" id="dog1" checked="checked"/>
<label for="dog1">골든 리트리버</label>
<input type="radio" name="dog" value="알래스칸 말라뮤트" id="dog2"/>
<label for="dog2">알래스칸 말라뮤트</label>
<input type="radio" name="dog" value="사모예드" id="dog3"/>
<label for="dog3">사모예드</label>
<input type="radio" name="dog" value="시베리안 허스키" id="dog4"/>
<label for="dog4">시베리안 허스키</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>방문 횟수</legend>
<input type="radio" name="visit" value="1회" id="visit1" checked="checked"/>
<label for="visit1">1회</label>
<input type="radio" name="visit" value="2회" id="visit2"/>
<label for="visit2">2회</label>
<input type="radio" name="visit" value="3회" id="visit3"/>
<label for="visit3">3회</label>
<input type="radio" name="visit" value="4회 이상" id="visit4"/>
<label for="visit4">4회 이상</label>
</fieldset>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
16-06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16-06</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.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" id="checkbox" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>체크박스 버튼</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<form name="myform">
<div data-role="fieldcontain">
<!-- controlgroup은 필수-->
<fieldset data-role="controlgroup">
<legend>좋아하는 견종</legend>
<!-- 타입이 checkbox임-->
<input type="checkbox" name="dog1" value="골든 리트리버" id="dog1"/>
<label for="dog1">골든 리트리버</label>
<input type="checkbox" name="dog2" value="알래스칸 말라뮤트" id="dog2"/>
<label for="dog2">알래스칸 말라뮤트</label>
<input type="checkbox" name="dog3" value="사모예드" id="dog3"/>
<label for="dog3">사모예드</label>
<input type="checkbox" name="dog4" value="시베리안 허스키" id="dog4"/>
<label for="dog4">시베리안 허스키</label>
</fieldset>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
16-07.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>16-07</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.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" id="select" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>셀렉트 메뉴</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<form name="myform">
<!--많이 쓰는 기능임 -->
<div data-role="fieldcontain">
<label for="dog1">가장 좋아하는 대형 견종</label>
<select name="dog1" id="dog1">
<option value="">선택하세요</option>
<option value="골든 리트리버">골든 리트리버</option>
<option value="알래스칸 말라뮤트">알래스칸 말라뮤트</option>
<option value="사모예드">사모예드</option>
<option value="시베리안 허스키">시베리안 허스키</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="dog2">가장 좋아하는 중소형 견종</label>
<!--차이는 data-native-menu가 false이다. false여야 jquery의 라이브러리를 쓸 수 있음
그리고 multiple을 해줘야 다중 선택을 할 수 있다. -->
<select name="dog2" id="dog2" data-native-menu="false" multiple="multiple">
<option value="">선택하세요</option>
<option value="포메라니안">포메라니안</option>
<option value="웰시코기">웰시코기</option>
<option value="푸들">푸들</option>
<option value="비글">비글</option>
</select>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 - apply와 call 차이점 (0) | 2015.02.03 |
|---|---|
| Javascript - jQuery Mobile 유틸리티 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 이벤트 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 리스트뷰 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바 (0) | 2015.01.29 |
| Javascript - jQuery 기본 효과, 페이딩, 슬라이딩 (0) | 2015.01.29 |
| Javascript - 셀렉터 기본 개념 및 예제 (0) | 2015.01.28 |