[jQuery] jQ Mobile 테이블(Tables) - jQuery Mobile 강좌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Reflow Table</h1>
  </div>
  
  <div data-role="main" class="ui-content">
    <p>Reflow Tables lay the table data horizontally until it reaches a minimum size, then all rows are grouped together in a vertical stack with the corresponding labels.</p>
    <p>In this example we have used the well-known Northwind sample database. Below is a selection from the "Customers" table.</p>
    <p>Try to resize the width of your browser window, to see the effect.</p>
    <table data-role="table" class="ui-responsive">
      <thead>
        <tr>
          <th>CustomerID</th>
          <th>CustomerName</th>
          <th>ContactName</th>
          <th>Address</th>
          <th>City</th>
          <th>PostalCode</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Obere Str. 57</td>
          <td>Berlin</td>
          <td>12209</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer�a</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>M�xico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk�p</td>
          <td>Christina Berglund</td>
          <td>Berguvsv�gen 8</td>
          <td>Lule�</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>
      </tbody>
    </table>
  </div>
 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
 
</body>
</html>
 
Colored by Color Scripter
cs

tip: 반응형 테이블이 제대로 작동하기 위해서, <thead>와 <tbody> 요소를 반드시 포함해야 합니다. rowspan이나 colspan 속성은 사용하지 마세요; 반응형 테이블에서 지원되지 않습니다.

Column Toggle Table

"column toggle" 모드는 데이터를 표시하기 충분한 공간이 없을 때 행을 숨깁니다.

column toggle 테이블을 생성하기 위해서는, 아래처럼 <table> 요소에 추가해주시면 됩니다:

1
2
3
 
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
 
Colored by Color Scripter
cs

기본적으로, jQuery Mobile은 오른 편의 테이블로부터 컬럼을 숨깁니다. 그러나, 특정 순서에 따라 어느 컬럼이 숨겨지고 보여지게 명시할 수 있습니다. 테이블의 헤더<th>에 data-priority 속성을 추가하고 1 부터 6까지의 숫자를 명시해주면 됩니다:

1
2
3
4
5
 
<th>I will never be hidden</th>
<th data-priority="1">I am very important - I will probably not be hidden</th>
<th data-priority="3">I am less important - I could be hidden</th>
<th data-priority="5">I am not that important - there is a good chance that I will be hidden</th>
cs

위와 같이 작성을 하고 나면, 프레임워크는 자동적으로 테이블의 오른쪽 코너에 버튼을 추가합니다. 이 버튼은 사용자가 어떤 컬럼을 테이블에서 볼지 정하는 버튼입니다:

* jqctable.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Column Toggle Table</h1>
  </div>
  
  <div data-role="main" class="ui-content">
     <p>The "column toggle table" will hide columns when there is not enough width to display the data.</p>
    <p>In this example we have used the well-known Northwind sample database. Below is a selection from the "Customers" table.</p>
    <h4>Slowly resize the width of your browser window. The layout will adjust itself to fit the "new" width of the browser. OR, you can use the "Columns..." button to choose which column should be hidden or shown.</h4>
    <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
      <thead>
        <tr>
          <th data-priority="6">CustomerID</th>
          <th>CustomerName</th>
          <th data-priority="1">ContactName</th>
          <th data-priority="2">Address</th>
          <th data-priority="3">City</th>
          <th data-priority="4">PostalCode</th>
          <th data-priority="5">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Obere Str. 57</td>
          <td>Berlin</td>
          <td>12209</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer�a</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>M�xico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk�p</td>
          <td>Christina Berglund</td>
          <td>Berguvsv�gen 8</td>
          <td>Lule�</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>
 
      </tbody>
    </table>
  </div>
 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
 
</body>
</html>
 
Colored by Color Scripter
cs

Styling Tables

"ui-shadow" 클래스를 사용해서 테이블에 그림자를 추가할 수 있습니다:

1
2
3
 
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
 
Colored by Color Scripter
cs

end

* 본 포스트는 w3school 을 통해 작성된 포스트입니다.

저작자표시

'Web > jQuery' 카테고리의 다른 글

[jQuery] jQ Mobile 그리드(Grids) - jQuery Mobile 강좌 (0)	2016.03.25
[jQuery] jQ Mobile 접는 블록(Collapsibles) - jQuery Mobile 강좌 (0)	2016.03.25
[jQuery] jQ Mobile 패널(Panels) - jQuery Mobile 강좌 (0)	2016.03.22
[jQuery] jQ Mobile 네비바(Navibars) - jQuery Mobile 강좌 (0)	2016.03.22
[jQuery] jQ Mobile 툴바(Toolbars) - jQuery Mobile 강좌 (0)	2016.03.18
[jQuery] jQ Mobile 팝업(Popups) - jQuery Mobile 강좌 (0)	2016.03.17

ABOUT ME

Palpit's Techlog Palpit's Techlog

'Web > jQuery' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Web > jQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바