input fields는 single line 과 multiline 두가지 타입이 있습니다. 첫번째것은 <input>
elements 에 type="text"
attribute 가 들어가고 두번째 것은 <textarea>
elements가 들어갑니다. jQuery Mobile 에는 이 외에 search field가 있습니다. 어떤 값을 입력하거나 어떤 문자를 찾을 때 사용하죠. 이 세가지의 input field 들은 jQuery 의 standard methods 에 의해 관리 됩니다. 그리고 jQuery Mobile에는 textinput
() method가 추가로 있습니다. input field 는 textinput standard component 와 연관이 있습니다.
Input on one line
JavaScript 로 single line 의 input field를 다이나믹하게 생성하겠습니다. 간단하게 type="text"
attribute를 가지고 있는 <input>
element를 생성하면 됩니다.
Create an input field dynamically
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "Name : <input type=text value='Sarrion' />";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
|
tistory451_01.html
Input on multiple lines
multiline text field 를 표시할 수 있는 <textarea>
element 를 생성해 보죠.
Create a multiline text field dynamically
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "Description : <textarea> Beautiful sunny studio. Reasonable price.</textarea>";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
|
Search field
search field 는 <input>
element 안에 type="search"
attribute를 넣으시면 됩니다.
Dynamic creation of a search field
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "Name : <input type=search value='Sarrion' />";
$("#home div:jqmData(role=content)").append (html);
</script>
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Input field 를 customize 하기 (0) | 2012.11.10 |
|---|---|
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |
| input field 에 값 할당하기 (0) | 2012.11.09 |
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |
| 테이블 manipulation 예제 (0) | 2012.11.06 |
| 테이블에서 이벤트 다루기 (0) | 2012.11.06 |
| 다이나믹하게 새 row 를 insert 하기 (0) | 2012.11.06 |
| 다이나믹하게 새로운 컬럼 insert 하기 (0) | 2012.11.06 |
| Ajax 로 테이블 삽입하기 (0) | 2012.11.06 |