ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] jQ Mobile 접는 블록(Collapsibles) - jQuery Mobile 강좌
      Web/jQuery 2016. 3. 25. 14:42

      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 Collapsibles

       Collapsible Content Blocks

        접을 수 있는 성질은 내용을 숨기거나 보일 수 있게 허락합니다, 


        접을 수 있는 내용 블록을 생성하기 위해서는, 컨테이너에 data-role="collapsible"속성을 할당하는 것 입니다.


        컨테이너(div) 안에, 헤더(H1~H6)을 추가하고 확장하길 원하는 HTML 마크업을 추가로 작성하면 됩니다:


       * jqcoll.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
      <!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>Collapsible Blocks</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <div data-role="collapsible">
            <h1>Click me - I'm collapsible!</h1>
            <p>I'm the expanded content.</p>
          </div>
        </div>
       
        <div data-role="footer">
          <h1>Insert Footer Text Here</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs








        기본적으로 내용은 닫혀 있습니다. 페이지가 로드 될 때 내용을 펼치기 위해서는 data-collapsed="false"를 사용하면 됩니다.


      1
      2
      3
      4
      5
       
      <div data-role="collapsible" data-collapsed="false">
        <h1>Click me - I'm collapsible!</h1>
        <p>I'm now expanded by default.</p>
      </div>
      		cs





       Nested Collapsible Blocks

        접을 수 있는 내용 블록(Collapsible content blocks)은  끼워넣어 질 수 있습니다.


       * jqnested.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
      <!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>Nested Collapsible Blocks</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <div data-role="collapsible">
            <h1>Click me - I'm collapsible!</h1>
            <p>I'm the expanded content.</p>
            <div data-role="collapsible">
              <h1>Click me - I'm a nested collapsible block!</h1>
              <p>I'm the expanded content in the nested collapsible block.</p>
            </div>
          </div>
        </div>
       
        <div data-role="footer">
          <h1>Insert Footer Text Here</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs






       tip: 접을 수 있는 블록은 당신이 원하는 만큼 계속해서 끼워 넣을 수 있습니다.



       Collapsible Sets

        접을 수 있는 세트는 함께 그룹되어진 접을 수 있는 블록입니다. 다른 블록이 열리면, 다른 블록들은 닫히게 됩니다.


        몇몇의 블록을 생성하고, data-role="collapsibleset"로 작성된 새로운 컨테이너로 감싸줍니다.


       * jqset.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
       
      <!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>Collapsible Sets</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <div data-role="collapsibleset">
            <div data-role="collapsible">
              <h3>Click me - I'm collapsible!</h3>
              <p>I'm the expanded content.</p>
            </div>
            <div data-role="collapsible">
              <h3>Click me - I'm collapsible!</h3>
              <p>I'm the expanded content.</p>
            </div>
            <div data-role="collapsible">
              <h3>Click me - I'm collapsible!</h3>
              <p>I'm the expanded content.</p>
            </div>
            <div data-role="collapsible">
              <h3>Click me - I'm collapsible!</h3>
              <p>I'm the expanded content.</p>
            </div>
          </div>
        </div>
       
        <div data-role="footer">
          <h1>Insert Footer Text Here</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs










      end




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

      저작자표시

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

      [jQuery] jQ Mobile 그리드(Grids) - jQuery Mobile 강좌  (0) 2016.03.25
      [jQuery] jQ Mobile 테이블(Tables) - 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.

    티스토리툴바