ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [jQuery] jQ Mobile 팝업(Popups) - jQuery Mobile 강좌
      Web/jQuery 2016. 3. 17. 13:51

      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 Popups


       jQuery Mobile Popups

        팝업은 다이얼로그와 비슷합니다. 팝업 박스는 적은 텍스트나 사진, 맵 등 다른 컨텐츠를 보이려 할 때 유용합니다.


        팝업을 생성하기 위해, <a> 와 <div> 요소를 통해서 시작합니다. <a> 요소는 data-rel="popup" 속성을 추가하고, <div> 요소는 data-role="popup" 속성을 추가합니다.


        <div>의 id를 명시한 뒤, <a> 요소의 href와 명시된 아이디를 연결합니다. 아래 예제를 통해 보도록 하겠습니다.


        

      1
      2
      3
      4
      5
      6
       
      <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
       
      <div data-role="popup" id="myPopup">
        <p>This is a simple popup.</p>
      </div>
      		cs



        위에서 보시면 myPopup이란 id를 통해서 연결이 되어 있음을 확인 할 수 있습니다.


        팝업 박스의 여분의 패딩과 마진을 원한다면, ui-content' 클래스를 <div> 요소에 추가하세요:


      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">
          <h1>Welcome To My Homepage</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
       
          <div data-role="popup" id="myPopup" class="ui-content">
            <h3>Welcome!</h3>
            <p>The "ui-content" class is especially useful when you have a popup with <span style="font-size:55px;">styled text</span>, and want the edges and corners to look extra clean and sleek. <strong>Note:</strong> The text will wrap to multiple lines if needed.</p>
          </div>
        </div>
       
        <div data-role="footer">
          <h1>Footer Text</h1>
        </div>
      </div> 
       
      </body>
      </html>
       
      		cs











       Closing Popups

        기본적으로, 팝업은 팝업 박스의 외부를 클릭하거나 "Esc" 키를 누름으로 팝업창은 닫혀집니다. 만약 클릭으로 팝업창이 닫혀지는 것을 원치 않다면, data-dismissaible="false" 속성을 추가합니다.(별로 추천되는 부분은 아닙니다)


        또한, 닫기 버튼을 팝업에 추가할 수 있습니다. 추가하기 위해서는 팝업 컨테이너 내부에 data-rel="back" 속성을 버튼 링크에 추가합니다



      DescriptionExample
      Right close buttonTry it
      Left close buttonTry it
      Undismissible PopupTry it

      [출처: w3shool]



       Positioning Popups

        기본적으로, 팝업은 클릭된 요소 위에 직접 나타나게 됩니다. 팝업의 위치를 조절하기 위해, data-position-to 속성을 사용합니다:


      Attribute valueDescription
      data-position-to="window"Popup will appear centered within the window
      data-position-to="#myId"Popup is positioned over the element with a specified #id
      data-position-to="origin"Default. Popup is positioned directly over the clicked element
      1
      2
      3
      4
       
      <a href="#myPopup1" data-rel="popup" class="ui-btn"data-position-to="window">Window</a>
      <a href="#myPopup2" data-rel="popup" class="ui-btn"data-position-to="#demo">id="demo"</a>
      <a href="#myPopup3" data-rel="popup" class="ui-btn"data-position-to="origin">Origin</a>
      		cs





       Transitions

        기본적으로, 팝업은 나타나는 효과가 추가되어 있지 않습니다. 이러한 효과를 넣어주기 위해 data-transition 속성으로 다룰 수 있습니다.


      TransitionDescriptionFor PagesFor Dialogs
      fadeDefault. Fades to the next pageTry itTry it
      flipFlips to the next page from back to frontTry itTry it
      flowThrows the current page away and comes in with the next pageTry itTry it
      popGoes to the next page like a popup windowTry itTry it
      slideSlides to the next page from right to leftTry itTry it
      slidefadeSlides from right to left and fades in the next pageTry itTry it
      slideupSlides to the next page from bottom to topTry itTry it
      slidedownSlides to the next page from top to bottomTry itTry it
      turnTurns to the next pageTry itTry it
      noneNo transition effectTry itTry it


      [출처: w3school]



      1
      <a href="#myPopup" data-rel="popup" class="ui-btn"data-transition="fade">Fade</a>
      		cs



       Popup Arrows

        팝업의 테두리에 화살표를 추가하기 위해서는, data-arrow 속성을 사용하세요. 값은 "l","t","r","b" 로 각각 left, top, right, bottom 입니다.


      1
      2
      3
      4
      5
      <a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>
       
      <div data-role="popup" id="myPopup" class="ui-content"data-arrow="l">
        <p>There is an arrow on my LEFT border.</p>
      </div>
      		cs




       Popup Dialogs

        팝업 내부에 기본 다이얼로그를 추가할 수 있습니다:


       * jqpd.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
      <!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">
          <h1>Welcome To My Homepage</h1>
        </div>
       
        <div data-role="main" class="ui-content">
          <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Dialog Popup</a>
       
          <div data-role="popup" id="myPopupDialog">
            <div data-role="header">
              <h1>Header Text</h1>
            </div>
       
            <div data-role="main" class="ui-content">
              <h2>Welcome to my Popup Dialog!</h2>
              <p>jQuery Mobile is FUN!</p>
              <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Go Back</a>
            </div>
       
            <div data-role="footer">
              <h1>Footer Text</h1>
            </div>
          </div>
        </div>
       
        <div data-role="footer">
          <h1>Footer Text</h1>
        </div>
      </div> 
       
      		cs



       

       Popup Photos

        팝업 내부에 사진을 표시할 수 있습니다:


      1
      2
      3
      4
      5
      6
      7
       
      <a href="#myPopup" data-rel="popup" data-position-to="window">
      <img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>
       
      <div data-role="popup" id="myPopup">
        <img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
      </div>
      		cs


       


       Popup overlay

        팝업의 뒷 배경을 data-overlay-theme 속성으로 제어 할 수 있습니다.


        기본적으로는 overlay는 투명합니다. data-overlay-theme="a"를 사용하여 밝은 오버레이를 추가하거나 "b"를 사용해서 어두운 오버레이를 추가합니다:


      1
      2
      3
      4
      5
      <a href="#myPopup" data-rel="popup">Show Popup</a>
       
      <div data-role="popup" id="myPopup" data-overlay-theme="b"> 
        <p>I have a dark background behind me.</p>
      </div>
      		cs






      end




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

      저작자표시

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

      [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 아이콘(Icons) - 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

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바