■ jQueryMobile의 기본 입력양식
01. 가장 기본적인 type 속성으로 text와 password를 갖는 input 태그이다.
별도의 설정 없이도 모바일에 맞는 입력양식으로 변화하지만, data-role 속성이
fieldcontain인 div 태그로 감싸면 입력의 형태를 자동으로 잡아줍니다.
type_text.php
|
<!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" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput">텍스트 INPUT</label>
<input type="text" name="textinput" id="textinput"/>
</div>
<div data-role="fieldcontain">
<label for="textinput">패스워드 INPUT</label>
<input type="password" name="passwordinput" id="passwordinput"/>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 출력결과는 아래와같다.
■ jQueryMobile의 체크 입력 양식
01. type 속성이 radio나 checkbox인 경우 fieldset 태그의 data-role 속성을 controlgroup으로 입력하고
label 태그의 for 속성을 정확하게 입력하고 id 명칭과 일치 시켜야만 예쁜 형태를 형성한다.
radio_checkbox.php
|
<!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" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>RADIO</legend>
<label for="radioinput_1">Radio Input</label>
<input type="radio" name="radioinput" id="radioinput_1"/>
<label for="radioinput_2">Radio Input</label>
<input type="radio" name="radioinput" id="radioinput_2"/>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>CHECKBOX</legend>
<label for="checkboxinput_1">Checkbox Input</label>
<input type="checkbox" name="checkboxinput_1" id="checkboxinput_1"/>
<label for="checkboxinput_2">Radio Input</label>
<input type="checkbox" name="checkboxinput_2" id="checkboxinput_2"/>
</fieldset>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 코드를 실행하면 input 태그가 구성됩니다.
■ jQueryMobile의 select, slider, textarea 태그
01. select 태그는 option 태그를 넣으면 자동으로 완성된다.
slider태그의 data-role에 slider를 설정하고 option 값을 설정하고 2개 이상 넘길 수 없다.
textarea 기존의 HTML에서의 textarea와 다르지 않다.
select_textarea.php
|
<!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" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="select">셀렉트 Input</label>
<select id="select">
<option>서울</option>
<option>대구</option>
<option>인천</option>
<option>광주</option>
<option>대전</option>
<option>울산</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">셀렉트 Slider</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="textarea">Textarea Input</label>
<textarea id="textarea"></textarea>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 출력결과는 아래와 같은 형태를 볼 수 있다. select 태그는 기본적으로 모바일 장치의 기본 선택 형태를 이용한다.
■ jQuery Mobile HTML5 입력양식 태그
01. HTML5 양식의 input 태그도 사용이 가능하다. type 속성에 range나 search를 입력하면 그에 맞는 형태로 변환된다.
input_html5.php
|
<!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" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mobile</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="slider">슬라이드 Input</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
</div>
<div data-role="fieldcontain">
<label for="search">서치 Input</label>
<input type="search" name="search" id="search"/>
</div>
</div>
<div data-role="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
|
02. 코드를 실행하면 아래 그림과 같은 형태가 된다. search 태그는 입력 앞에 돋보기가 생성되는 것 이외에도
글자를 입력하면 자동으로 지우기 버튼이 생성된다.
