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 을 통해 작성된 포스트입니다.

    댓글

Designed by Tistory.