■ Front-End ■/jQuery Mobile

[jQuery 모바일] 다이얼로그 화면으로 팝업

한길(One Way) 2023. 2. 11. 17:42

 모바일 웹 사이트와 스마트 폰, 태블릿 및 데스크톱 응용 프로그램을 만들 수 있도록 설계된 HTML5 기반 프레임워크다. 

첫 페이지에서 다음 페이지 이동시 다이얼로그 화면으로 팝업 하는 예제다. 첫 번째 페이지에서 <a href="" 에 삽(#)과 함께 페이지 id를 입력하면 그 페이지로 링크가 연결된다. 그리고 data-rel 속성에 "dialog"라고 값을 주면 페이지를 다이얼로그 화면으로 팝업 한다.

 

 

페이지 이동 예제의 코드와 거의 유사하며 data-rel="dialog"가 추가되었다.

<a href="#page2" data-rel="dialog" data-transition="flip">두번째 페이지로 이동</a>

 

 

아래는 전체 코드이다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Mobile</title>
<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.1.min.js" ></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></script>
</head>
 
<body>
    <section id="page1" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>다이얼로그</h1>
        </header>
        <div class="content" data-role="content">
           <p>첫번째 페이지</p>
           <p>
               <a href="#page2" data-rel="dialog" data-transition="flip">두번째 페이지로 이동</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
    <section id="page2" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>다이얼로그</h1>
        </header>
        <div class="content" data-role="content">
           <p>두번째 페이지</p>
           <p>
               <a href="#page3" data-rel="dialog" data-transition="flow">세번째 페이지로 이동</a>
           </p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
    <section id="page3" data-role="page" data-add-back-btn="true" data-theme="b">
        <header data-role="header">
           <h1>다이얼로그</h1>
        </header>
        <div class="content" data-role="content">
           <p>세번째 페이지</p>
        </div>
        <footer data-role="footer" data-position="fixed">
           <h2>주한길</h2>
        </footer>
    </section>
</body>
</html>

jqm_03.html
0.00MB

 

결과화면  

 

jQuery Mobile에서 알아둘 속성

 

data-role="page | header | content | footer"
data-theme="a | b | c"
data-position="fixed"
data-transition="fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none"
data-add-back-btn="true | false"
data-rel="dialog | popup | back | external"

 
728x90
저작자표시 비영리