테이블 안에서 데이터를 관리하는 것은 주로 jQuery 의 메소드를 사용해서 구현합니다. jQuery Mobile에 의해 controlgroup
() method 가 추가되서 테이블의 다양한 component들에 visual group 을 제공하게 됩니다.
이제 window에 dynamic 하게 table을 생성하려고 합니다. 이 테이블은 두개의 row와 세개의 column을 가지게 될 겁니다. 이것을 구현하기 위해 ui-grid-b class 가 있는 <div> element 를 생성합니다. 그리고 그 <div> 안에 ui-block-a, ui-block-b and ui-block-c CSS classes를 가지고 있는 <div> elements 들을 넣습니다.
Dynamic creation of table (2 rows and 3 columns)
<!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 += "<div class=ui-grid-b>";
html += "<div class=ui-block-a>Element 1.1</div>";
html += "<div class=ui-block-b>Element 1.2</div>";
html += "<div class=ui-block-c>Element 1.3</div>";
html += "<div class=ui-block-a>Element 2.1</div>";
html += "<div class=ui-block-b>Element 2.2</div>";
html += "<div class=ui-block-c>Element 2.3</div>";
html += "</div>";
$("#home div:jqmData(role=content)").append (html);
</script>
tistory440_01.html
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 테이블에서 이벤트 다루기 (0) | 2012.11.06 |
|---|---|
| 다이나믹하게 새 row 를 insert 하기 (0) | 2012.11.06 |
| 다이나믹하게 새로운 컬럼 insert 하기 (0) | 2012.11.06 |
| Ajax 로 테이블 삽입하기 (0) | 2012.11.06 |
| HTML element 를 jQuery Mobile table 로 변환하기 (0) | 2012.11.02 |
| 버튼 관련 예제 파일 들 (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 |