single line 이나 multiline의 input field 값은 val (value) method에 의해 지정될 수가 있습니다. 그리고 val () method에 의해 recover 될 수 있구요. 이 두 메소드 모두 jQuery methods 입니다.
사람 이름을 넣는 text input field 를 가진 HTML 코드가 있다고 가정합니다. 그리고 description 을 넣기 위해 <textarea> element 가 있고 그리고 search field 가 있습니다. 이 세가지 field들은 default 값으로 초기화 돼 있습니다. 이 값을 JavaScript 로 programmatically 바꾸고자 합니다.
아래 HTML 코드가 있습니다. 그런데 몇몇부분은 제대로 작동하지 않을 겁니다. 그 이유를 살펴 보도록 하죠.
Initialize input fields by JavaScript
<!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>
Name : <input type=text value="Your name" id=text /> <br />
Description : <textarea> Description </textarea> <br />
Search : <input type=search value="Your name" id=search />
</div>
</div>
</body>
</html>
<script>
alert ($("#text").val ("Eric").val ());
alert ($("textarea").val ("Nice studio for renovation").val ());
alert ($("#search").val ("Sarrion").val ());
</script>
|
|
tistory457_01.html
이 프로그램을 돌리면 3개의 alert 화면을 볼 겁니다. Eric, Nice studio for renovation,
Sarrion라는 글자들을 보실 겁니다. 이 값들은 이 윈도우의 input field 들의 값들입니다. 그런데 search field 만 값이 안 바뀌어 있을 겁니다.
search field 에 Your name 이라는 디폴트값이 있고 Sarrion 이라는 값이 할당되지 않았죠? 여기에서 우리가 알 수 있는 것은 dearch field에 대한 접근법은 다른 input field들과는 좀 다르다는 점 입니다.
One line and multiple lines inputs
val
()와 val
(value) 메소드가 잘 작동하는 것을 위 예제 코드에서 보셨죠?
Assign and then read the value of a <input> element with type="text" attribute
alert ($(":text").val ("Eric").val ());
// Displays: Eric
Selector ":text" is the selector "type = text".
Assign and then read the value of a <textarea> element
alert ($("textarea").val ("Nice studio for renovation").val ());
// Displays: Nice studio for renovation
Search field
search field는 좀 복잡합니다. 그리고 search field 에 대해서는 원래의 HTML code 가 jQuery Mobile 에 의해서 수정되게 됩니다.
Assign and then read the value of an <input> element with type="search" attribute (as it does not work!)
alert ($("#search").val ("Sarrion").val ());
// Displays: Sarrion
alert 화면에서는 Sarrion 이 표시되는데 실제 화면상에는 디폴트값이 표시됩니다. 그 이유는 간단합니다. val
("Sarrion") instruction이 search field 가 완전히 생성되기 이전에 실행되기 때문입니다. 그러니까 우리가 원하는 대로 하려면 search field 가 생성될 때까지 기다린 후에 그 값을 바꿔줘야 하는겁니다.
이 과정을 이해하는 가장 빠르고 쉬운 방법은 jQuery Mobile 에 의해 바뀌어진 HTML code를 살펴보는 겁니다. (Firefox의 firebug 로 본 화면입니다.)
보시면 single line 과 multiline input field는 CSS class 들이 추가되면서 살짝 바뀌었습니다. 반면에 search field 는 아주 많이 바뀌었죠. <div>
element 가 생겼고 거기에 ui-input-search
CSS class 가 생겼습니다. 사실 초기의 <input>
element 는 새로운 <div>
element가 삽입되면서 완전히 새로 생성된 겁니다.
Modify the contents of the search field after its creation
<!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>
Name : <input type=text value="Your name" id=text /> <br />
Description : <textarea> Description </textarea> <br />
Search : <input type=search value="Your name" id=search />
</div>
</div>
</body>
</html>
<script>
alert ($("#text").val ("Eric").val ());
alert ($("textarea").val ("Nice studio for renovation").val ());
$("#search").live ("textinputcreate", function (event)
{
alert ($("#search").val ("Sarrion").val ());
});
</script>
|
|
search field와 연계된 <input> element는 bind ()가 아니라 live () method에 의해 observe 되어야 합니다. <input> element는 textinputcreate event가 완전히 set 된 후에 그 이벤트를 receive 할 수 있습니다. 이 element은 jQuery Mobile 에 의해 생성 될 거구요.
live () jQuery method는 DOM tree 안에 있는 미래의 element에 대한 이벤트를 가리키는데 주로 사용됩니다. bind () method는 현재 존재하는 아이템들에 대해서 사용되구요.
이제 search field 도 할당된 값으로 화면에 표시될 겁니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
|---|---|
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |
| input field 관련 예제들 (0) | 2012.11.10 |
| Input field 를 customize 하기 (0) | 2012.11.10 |
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |
| 테이블 manipulation 예제 (0) | 2012.11.06 |
| 테이블에서 이벤트 다루기 (0) | 2012.11.06 |