ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] jQ Mobile 그리드(Grids) - jQuery Mobile 강좌
      Web/jQuery 2016. 3. 25. 15:17

      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 Grids

       jQuery Mobile Layout Grids

        jQuery Mobile은 일련의 CSS 기반의 컬럼 레이아웃을 제공합니다. 그러나, 컬럼 레이아웃은 모바일 스크린 너비로 인해 모바일 디바이스에서 일반적으로추천되지 않습니다.


        그러나, 버튼이나 네비게이션 탭과 같은 작은 요소로 위치시키고 싶을 때가 있습니다. 그러면 컬럼은 완벽하죠.


        그리드 안의 컬럼은 테두리, 배경, 마진이나 패딩이 없는 같은 너비입니다.


        5 가지의 레이아웃 그리드를 사용 할 수 있습니다:


      Grid ClassColumnsColumn WidthsCorresponds ToExample
      ui-grid-solo1100%ui-block-aTry it
      ui-grid-a250% / 50%ui-block-a|bTry it
      ui-grid-b333% / 33% / 33%ui-block-a|b|c Try it
      ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|dTry it
      ui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|c|d|e

      Try it


      [출처: w3schools]




       Customize Grids

        CSS를 사용해서 커스터마이즈한 컬럼 블럭을 사용할 수 있습니다:


       * jqcustom.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
       
      <!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>
      <style>
      .ui-block-a, .ui-block-b, .ui-block-c {
          background-color: lightgray;
          border: 1px solid black;
          height: 100px;
          font-weight: bold;
          text-align: center;
          padding: 30px;
      }
      </style>
      </head>
      <body>
       
      <div data-role="page" id="pageone">
        <div data-role="header">
          <h1>Customized Columns</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>Three-column Styled Layout:</p>
          <div class="ui-grid-b">
            <div class="ui-block-a"><span>First Column</span></div>
            <div class="ui-block-b"><span>Second Column</span></div>
            <div class="ui-block-c"><span>Third Column</span></div>
          </div>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs






       


       Multi Rows

        또한 컬럼 안에 여러 열을 가질 수 있습니다:


      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
       
      <!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>Multiple Rows</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>Three-column Layout:</p>
          <div class="ui-grid-b">
            <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
            <div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span></div>
            <div class="ui-block-c" style="border:1px solid black;"><span>Some Text</span></div>
          </div>
       
          <p>Three-column Layout With Multiple Rows:</p>
          <div class="ui-grid-b">
            <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
            <div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span></div>
            <div class="ui-block-c" style="border:1px solid black;"><span>Some Text</span></div>
            <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
            <div class="ui-block-b" style="border:1px solid black;"><span>Some Text</span></div>
            <div class="ui-block-a" style="border:1px solid black;"><span>Some Text</span></div>
          </div>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs









       Responsive Grids

        작은 스크린에서, 많은 버튼이 나란히 놓여 있는 것은 추천되지 않습니다.


        반응형 그리드를 위해, ui-responsive 클래스를 컨테이너에 추가합니다:


       * jqresgrid.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
       
      <!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>Responsive Layout</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <h3>Slowly resize the width of your browser window. The layout will adjust itself to fit the "new" width of the browser.</h3>
          <div class="ui-grid-b ui-responsive">
            <div class="ui-block-a">
              <a href="#" class="ui-btn ui-corner-all ui-shadow">First Column Button</a><br>
              <span>First Column: This is some text. This is some text. This is some text. This is some text. This is some text.</span>
            </div>
            <div class="ui-block-b">
              <a href="#" class="ui-btn ui-corner-all ui-shadow">Second Column Button</a><br>
              <span>Second Column: This is some text. This is some text. This is some text. This is some text.</span>
            </div>
            <div class="ui-block-c">
              <a href="#" class="ui-btn ui-corner-all ui-shadow">Third Column Button</a><br>
              <span>Third Column: This is some text. This is some text. This is some text. This is some text.</span>
            </div>
          </div>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs










      end






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

      저작자표시

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

      [jQuery] jQ Mobile 테이블(Tables) - 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.

    티스토리툴바