Turning a HTML element into a jQuery Mobile button
For an element to be transformed into a button, use the button () method on the HTML element.
Using the button () method
<!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=#>";
html += "Click the button";
html += "</a>";
$("#home div:jqmData(role=content)").append (html);
$("#home").bind ("pagecreate", function ()
{
$("#btn").button ();
});
</script>
Note that the window is expected to be created to transform the link into button (pagecreate event). However, in the case of buttons, it is not necessary, unlike the lists that we have previously studied. But for the sake of thoroughness, we try to write similar code in both cases ...
tistory430_02.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 다이나믹하게 테이블 생성하기 (0) | 2012.11.02 |
|---|---|
| 버튼 관련 예제 파일 들 (0) | 2012.10.31 |
| 버튼 Customize 하기 (0) | 2012.10.31 |
| 버튼에서 발생하는 이벤트 관리하기 (0) | 2012.10.30 |
| Ajax 로 버튼 insert 하기 (0) | 2012.10.30 |
| 다이나믹하게 버튼 생성하기 (0) | 2012.10.29 |
| 리스트 다루기 예제 (0) | 2012.10.29 |
| 리스트 Customization 하기 (0) | 2012.10.26 |
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |
| 리스트에서 아이템 지우기 (0) | 2012.10.25 |