Turning a HTML element into a jQuery Mobile table
A simple table
jQuery Mobile table ui-grid-a,
..., ui-grid-d,
and u-block-a,
..., ui-block-e 같이 specialized 된 CSS classes 들을 가지고 있는 <div>
elements를 사용합니다. 이런 CSS 클래스들은 jQuery Mobile convention에 맞게 테이블을 스타일화 하는 역할을 합니다. 이전 글의 테이블을 firefox 의 firebug로 보면 아래와 같은 HTML code를 보실 수 있습니다.
아직 jQuery Mobile 에 의해서 modify 되지는 않은 상황입니다.
A table of buttons
테이블에 버튼을 추가해 보겠습니다. data-role="controlgroup" 와 data-type="horizontal"
attributes 들을 병행해서 사용하시면 됩니다.
Two
buttons side by side in the two cells of a table
<!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-a data-role=controlgroup data-type=horizontal >";
html += "<div class=ui-block-a style=text-align:right>";
html += "<a href=# data-role=button style=width:140px> OK </a>";
html += "</div>";
html += "<div class=ui-block-b>";
html += "<a href=# data-role=button style=width:140px> Delete </a>";
html += "</div>";
html += "</div>";
$("#home div:jqmData(role=content)").append (html);
</script>
tistory441_01.html
jQuery Mobile 에 의해 생성된 HTML 코드 입니다. firefox의 firebug로 본 화면입니다.
data-role="controlgroup" 이 있는 <div> 를 보시면 jQuery Mobile 에 의해 ui-controlgroup 과 ui-controgroup-horizontal
CSS 클래스 두개가 추가 된 것을 보실 수 있을 겁니다. 그리고 ui-block-a
and ui-block-b
CSS classes 가 있는 두개의 <div>
elements 들이 있구요. 여기에 버튼들이 삽입됩니다.
<a>
link에 data-role="button"
attribute 가 있기 때문에 button 으로 변환 됩니다.
결론적으로 테이블을 만들기 위해 jQuery Mobile 에 의해 만들어진 HTML 은 그리 많이 변환되지 않았습니다. 버튼 같은 특정 element 들만이 modify 됩니다. table structure 그 자체는 변환되지 않습니다.
A table of buttons (continued)
HTML에 data-role="controlgroup"
와 data-role="button"
attributes를 사용하지 않고 같은 결과를 얻어볼까요. 아래 샘플을 실행해 보세요.
Two
buttons side by side in the two cells of a table
<!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-a data-type=horizontal >";
html += "<div class=ui-block-a style=text-align:right>";
html += "<a href=# style=width:140px> OK </a>";
html += "</div>";
html += "<div class=ui-block-b>";
html += "<a href=# style=width:140px> Delete </a>";
html += "</div>";
html += "</div>";
$("#home div:jqmData(role=content)").append (html);
$("a").button ();
$(".ui-grid-a").controlgroup ();
</script>
tistory441_02.html
해당 element들이 버튼으로 변환되고 같이 그룹화 되도록 하기 위해 button
() 과 controlgroup
() 메소드들을 사용했습니다.
jQuery Mobile 에 의해 생성된 화면을 보면 뭔가 2% 부족한 것을 느끼실 겁니다.
두 버튼의 width 가 같지 않죠. HTML 에서는 140px로 지정돼 있는데 말이죠. 그 이유는 button
() method 를 call 하면서 그 아이템에 assign 된 CSS 가 disable 됐기 때문입니다. 해결방법은 jQuery Mobile 이 버튼을 세팅하기 위해 사용한 CSS 클래스에 직접 스타일링 하는 방법이 있습니다. (ui-btn
class)
Define
this CSS class in our HTML page, in the head section of the page:
Definition
of the ui-btn class to style the buttons in the page
<style type=text/css>
.ui-btn {
color : red;
width : 140px;
}
</style>
tistory441_03.html
그러면 아래처럼 보일 겁니다.
이제 버튼은 같은 width 를 갖게 되고 또 글자색도 빨간색으로 display 됩니다.
