ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] jQ Mobile 테이블(Tables) - jQuery Mobile 강좌
      Web/jQuery 2016. 3. 25. 15:04

      W3School 를 참고하여 작성하는 jQuery Mobile 강좌입니다.


      아래 링크들은 Tutorial 편입니다.


      jQ Mobile 시작하기

      jQ Mobile 페이지(Pages)

      jQ Mobile 버튼(Buttons)

      jQ Mobile 아이콘(Icons)

      jQ Mobile 팝업(Popups)

      jQ Mobile 툴바(Toolbars)

      jQ Mobile 네비바(Navibars)

      jQ Mobile 패널(Panels)

      jQ Mobile 접는 블록(Collapsibles)

      jQ Mobile 테이블(Tables)

      jQ Mobile 그리드(Grids)



      jQuery Mobile Tables

       Responsive Tables

        반응형 디자인은 디바이스의 스크린 사이즈와 방향과 같은 사용자 디바이스의 모바일 웹 페이지에서의 내용에 대한 반응을 보일 때 굉장히 유용합니다.


        간단한 클래스 이름으로, jQuery Mobile은 특정 유저에 대한 적절한 내용을 보이기 위해 사용자의 스크린 사이즈와 자동적으로 리사이즈가 가능하도록 인식합니다.


        반응형 테이블은 큰 세트의 표로 나타낸 데이터를 모바일이나 데스크탑에서든 잘 보일 것입니다.


        두 가지 타입의 반응형 테이블이 있습니다: reflow & column toggle



       Reflow Table

        reflow 모드는 데이터가 가장 작은 사이즈에 도달할 때까지 테이블 데이터를 수평적으로 위치시킵니다. 그러고나서, 모든 열을 한꺼번에 수직적으로 그룹화 합니다.


        테이블을 만들고, data-role="table"을 추가하고 <table> 요소에 "ui-resopnsive" 클래스를 추가합니다:


       * jqtable.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>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>
       
      		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">
       
      		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>
       
      		cs








       Styling Tables

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


      1
      2
      3
       
      <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
       
      		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

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바