ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] jQ Mobile 툴바(Toolbars) - jQuery Mobile 강좌
      Web/jQuery 2016. 3. 18. 13:32

      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)


      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 Toolbars

       툴바 요소는 네비게이션을 쉽게하기 위해 헤더나 풋터 안에 위치합니다


       Header Bars

        헤더는 페이지의 가장 상단에 위치해 있고, 페이지의 타이틀/로고 나 두 개 정도의 버튼을 가지고 있습니다.


        헤더의 왼쪽 혹은 오른쪽 편에 버튼을 추가 할 수 있습니다.


        아래 코드는, 왼쪽에 홈 버튼을 오른쪽에 검색 버튼을 추가하는 코드입니다:


       * jqtoolbar.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
      <!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">
        <div data-role="header">
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
          <h1>Welcome To My Homepage</h1>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a>
        </div>
       
         <div data-role="main" class="ui-content">
          <p>Notice that we have added the CSS class of "ui-corner-all" and "ui-shadow" to the header buttons, to make them look a bit more desirable.</p>
        </div>
      </div>
       
      </body>
      </html>
       
      		cs









       * 헤더는 한개 혹은 두개의 버튼을 포함 할 수 있지만, 풋터는 제한이 없습니다.



       Footer Bars

        풋터는 페이지의 하단에 위치해 있습니다.


        풋터는 헤더보다 좀 더 유연합니다 - 페이지 내부에서 좀 더 기능적이고 변경 가능합니다. 그러므로, 필요한 만큼 많은 버튼을 포함할 수 있습니다:



      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
       
      <!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">
        <div data-role="header">
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a>
          <h1>Welcome To My Homepage</h1>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">Search</a>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>The buttons are for demonstration purposes only, and will not have any effect.</p>
          <p>Notice that we have applied the CSS class of "ui-corner-all" and "ui-shadow" to the buttons in both the header and footer, to make them look more desirable.</p>
        </div>
       
        <div data-role="footer">
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
        </div>
      </div>
       
      </body>
      </html>
       
      		cs
      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
       
      <!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">
        <div data-role="header">
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a>
          <h1>Welcome To My Homepage</h1>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">Search</a>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>The buttons are for demonstration purposes only, and will not have any effect.</p>
          <p>Notice that we have applied the CSS class of "ui-corner-all" and "ui-shadow" to the buttons in both the header and footer, to make them look more desirable.</p>
        </div>
       
        <div data-role="footer">
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
        </div>
      </div>
       
      </body>
      </html>
       
      		cs








       Tip: 풋터에서 버튼들은 기본적으로 중앙에 위치하지 않습니다. CSS로 중앙에 위치 시킬 수 있습니다:


      1
      2
       
      <div data-role="footer" style="text-align:center;">
      		cs



        또한 버튼을 그룹화하여 수직 혹은 수평으로 정리할 수 있습니다:


      1
      2
      3
      4
      5
      6
      7
      <div data-role="footer" style="text-align:center;">
        <div data-role="controlgroup" data-type="horizontal">
          <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
          <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
          <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
        </div>
      </div>
      		cs




       Positioning Headers and Footers

        헤더와 풋터는 3 가지 방법으로 위치를 조절할 수 있습니다:

        - Inline: 기본 방식으로 헤더와 풋터는 페이지 내용 상에 직렬로 표시됩니다.

        - Fixed: 헤더와 풋터는 상단과 하단에 위치하게 됩니다.

        - Fullscreen: fixed와 비슷합니다; 아래 예제에서 차이를 확인하세요.



       * Inline

       

      1
      2
      3
      <div data-role="header" data-position="inline"></div>
      <div data-role="footer" data-position="inline"></div>
       
      		cs




       * Fixed 


       

      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
       
      <!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">
        <div data-role="header" data-position="fixed">
          <h1>Fixed Header</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p>
       
          <p><b>Tip:</b> Tapping the screen will hide and show the header/footer IF the scrollbar is available. The effect varies depending on where you are on the page.</p>
        
          <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable  scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
        </div>
       
        <div data-role="footer" data-position="fixed">
          <h1>Fixed Footer</h1>
        </div>
      </div>
       
      </body>
      </html>
       
      		cs







       * Fullscreen


      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
       
      <!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">
        <div data-role="header" data-position="fixed" data-fullscreen="true">
          <h1>Fixed and Fullscreen Header</h1>
        </div>
       
        <div data-role="main" class="ui-content"><br><br>
          <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p>
       
          <p><b>Tip:</b> Tapping the screen will hide and show the header and footer.</p>
        
          <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>
        </div>
       
        <div data-role="footer" data-position="fixed" data-fullscreen="true">
          <h1>Fixed and Fullscreen Footer</h1>
        </div>
      </div>
       
      </body>
      </html>
       
      		cs









      end




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

      저작자표시

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

      [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 팝업(Popups) - jQuery Mobile 강좌  (0) 2016.03.17
      [jQuery] jQ Mobile 아이콘(Icons) - jQuery Mobile 강좌  (0) 2016.03.17
      [jQuery] jQ Mobile 버튼(Buttons) - jQuery Mobile 강좌  (0) 2016.03.16

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바