ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] jQ Mobile 아이콘(Icons) - jQuery Mobile 강좌
      Web/jQuery 2016. 3. 17. 13:24

      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 Button Icons

       jQuery Mobile은 버튼을 좀 더 멋지게 꾸며줄 아이콘 세트를 제공합니다.



       Adding Icons to jQuery Mobile Buttons

        버튼에 아이콘을 추가하기 위해, ui-icon 클래스를 사용하고, 아이콘 위치 클래스를 통해 아이콘을 위치 시킵니다(ui-btn-icon-pos) 


      1
      2
      <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
       
      		cs



       아래 리스트는 jQuery Mobile에서 제공하는 아이콘 입니다:


      Icon classDescriptionIconExample
      ui-icon-arrow-lLeft ArrowTry it
      ui-icon-arrow-rRight ArrowTry it
      ui-icon-infoInformationTry it
      ui-icon-deleteDeleteTry it
      ui-icon-backBackTry it
      ui-icon-audioSpeakersTry it
      ui-icon-lockPadlockTry it
      ui-icon-searchSearchTry it
      ui-icon-alertAlertTry it
      ui-icon-gridGridTry it
      ui-icon-homeHomeTry it

      [출처: w3schools]




       Positioning Icons

        버튼에 어디에 아이콘이 위치해야 하는 가를 지정할 수 있습니다: top, right, button, left


        ui-btn-icon 클래스를 통해 위치를 명시합니다:



       * jqpos.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
       
      <!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>Positioning Icons</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>Positioning Icons:</p>
          <a href="#" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
          <a href="#" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
          <a href="#" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
          <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
        </div>
       
        <div data-role="footer">
          <h1>Footer Text</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs








        


       * 만약 아이콘의 위치를 명시하지 않으면, 아이콘은 보이지 않을 것 입니다.




       Displaying Only The Icon

        iCon 만을 보이게 하기 위해, notext 를 사용합니다:


      1
      2
       
      <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
      		cs




       Removing The Circle

        기본적으로, 모든 아이콘은 회색 원이 아이콘을 감싸고 있습니다. 원을 제거하기 위해, ui-nodisc-icon을 추가합니다:


      1
      2
      3
      <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
      <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>
       
      		cs





       Black or White Circle

        기본적으로, 모든 아이콘은 흰색입니다. 아이콘을 검정색으로 바꾸기 위해서는 ui-alt-icon 을 추가합니다:


       * jqalter.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>Icons</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <p>A white "search" icon (default):</p>
          <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow">White icon (default)</a>  
          <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow">White icon (default)</a>
       
          <p>A black "search" icon (class="ui-alt-icon"):</p>
          <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-alt-icon">Black icon</a>   
          <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-alt-icon">Black icon</a>
          
          <p>A black "search" icon without the gray circle (combining "ui-nodisc-icon" and "ui-alt-icon"):</p>
          <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>   
          <a href="#" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>
        </div>
        
        <div data-role="footer">
          <h1>Footer Text</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs



      end




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

      저작자표시

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

      [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
      [jQuery] jQ Mobile 버튼(Buttons) - jQuery Mobile 강좌  (0) 2016.03.16
      [jQuery] jQ Mobile 페이지(Pages) - jQuery Mobile 강좌  (0) 2016.03.16
      [jQuery] jQ Mobile 시작하기 - jQuery Mobile 강좌  (0) 2016.03.16

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바