버튼을 다루는 것도 리스트를 다루는 것하고 비슷합니다. 여기서는 button
() method를 사용해서 HTML element를 jQuery Mobile button으로 바꾸게 됩니다. 이 버튼들은 button
standard component 에 맞게 display 됩니다.
HTML 페이지에서 버튼을 dynamically 생성하는 것을 알아 보겠습니다. 그것을 하기 위해서 <a>
element 를 만들고 거기에 data-role="button" attribute 를 달겠습니다. 버튼의 다른 기능들도 (data-inline,
data-icon,
etc..) 그 element의 attributes에서 정해줄 수 있습니다.
Dynamic creation of a button
<!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 += "<a id=btn href=# data-role=button data-icon=check data-iconpos=right>";
html += "Click the button";
html += "</a>";
$("#home div:jqmData(role=content)").append (html);
$("#btn").bind ("click", function (event)
{
alert ("click");
});
</script>
tistory430_01.html이 코드를 실행하고 버튼을 누르면 아래와 같이 될 겁니다.
<a>
element 는 다이나믹하게 들어갔습니다. 그리고 jQuery Mobile 버튼을 만들도록 하고 있죠. 다이나믹하게 들어간 <a>
element 에 jQuery Mobile 버튼이 만들어지게 되는 겁니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 버튼 관련 예제 파일 들 (0) | 2012.10.31 |
|---|---|
| 버튼 Customize 하기 (0) | 2012.10.31 |
| 버튼에서 발생하는 이벤트 관리하기 (0) | 2012.10.30 |
| Ajax 로 버튼 insert 하기 (0) | 2012.10.30 |
| HTML element를 jQuery Mobile 버튼으로 변환하기 (0) | 2012.10.30 |
| 리스트 다루기 예제 (0) | 2012.10.29 |
| 리스트 Customization 하기 (0) | 2012.10.26 |
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |
| 리스트에서 아이템 지우기 (0) | 2012.10.25 |
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |