ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] jQ Mobile 네비바(Navibars) - jQuery Mobile 강좌
      Web/jQuery 2016. 3. 22. 13:35

      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 Navigation Bars

       네비게이션 바는 일반적으로 헤더나 풋터 내의 수평으로 정렬된 링크의 그룹으로 이루어져 있습니다.


       바는 data-role="navbar" 속성을 가진 <div> 태그 내부의 정렬되지 않은 리스트의 링크입니다:

       

       * jqnavbar.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
      <!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>Welcome To My Homepage</h1>
          <div data-role="navbar">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Page Two</a></li>
              <li><a href="#">Search</a></li>
            </ul>
          </div>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>My Content..</p>
        </div>
       
        <div data-role="footer">
          <h1>My Footer</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
       
      		cs










       Tip: 기본적으로, 네비게이션 바 안의 링크들은 버튼으로 자동적으로 변환되어 집니다(class="ui-btn" 이나 data-role="button"을 사용하지 않아도 됩니다).




       

       Icons in Navigation Buttons

        네비게이션 버튼에 아이콘을 추가하고자 한다면, data-icon 속성을 사용하세요:


      1
      2
      3
       
      <a href="#anylink" data-icon="search">Search</a>
       
      		cs

        


        data-icon 속성은 CSS 클래스의 값과 동일하게 사용됩니다.


        다른점은 data-icon="value"로 명시해야 한다는 점입니다.


      Attribute ValueDescriptionIcon
      data-icon="home"Home
      data-icon="arrow-r"Right Arrow
      data-icon="search"Search


      [출처: W3Schools]




       Positioning Icons

        네비게이션 버튼 내에서 아이콘의 위치를 정할 수 있습니다: top, right, bottom, left


        아이콘 위치는 네비바 컨테이너에 위치합니다. data-iconpos 속성을 사용하여 위치를 명시합니다:


      Attribute ValueDescriptionExample
      data-iconpos="top"Top icon alignmentTry it
      data-iconpos="right"Right icon alignmentTry it
      data-iconpos="bottom"Bottom icon alignmentTry it
      data-iconpos="left"Left icon alignmentTry it


        

       Active Buttons

        네비바의 링크가 탭 혹은 클릭되었을 때, 링크는 선택된 모습으로 나타나야 합니다.


        링크를 탭하지 않고 이러한 모습을 보이기 위해서는, class="ui-btn-active"를 사용합니다:



       * jqactive.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
       
      <!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>Welcome To My Homepage</h1>
          <div data-role="navbar">
            <ul>
              <li><a href="#" class="ui-btn-active" data-icon="home">Home</a></li>
              <li><a href="#pagetwo" data-icon="arrow-r">Page Two</a></li>
            </ul>
          </div>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p>
          <p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p>
        </div>
       
        <div data-role="footer">
          <h1>My Footer</h1>
        </div> 
      </div> 
       
      <div data-role="page" id="pagetwo">
        <div data-role="header">
          <h1>Welcome To My Homepage</h1>
          <div data-role="navbar">
            <ul>
              <li><a href="#pageone" data-icon="home">Home</a></li>
              <li><a href="#" data-icon="arrow-r">Page Two</a></li>
            </ul>
          </div>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>No buttons are pre-selected (highlighted) in this page..</p> 
          <p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p>
        </div>
       
        <div data-role="footer">
          <h1>My Footer</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs







        여러 페이지에서, 현재 위치한 페이지에 대한 버튼을 활성화 하기 위해서는 "ui-state-persist"를 "ui-btn-active"와 함께 사용해서 나타낼 수 있습니다.


      1
      2
      3
       
      <li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>
       
      		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 툴바(Toolbars) - jQuery Mobile 강좌  (0) 2016.03.18
      [jQuery] jQ Mobile 팝업(Popups) - jQuery Mobile 강좌  (0) 2016.03.17
      [jQuery] jQ Mobile 아이콘(Icons) - jQuery Mobile 강좌  (0) 2016.03.17

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바