jquery mobile 강좌 4 [ 대화상자, 다이얼로그 팝업 ]
2016. 3. 11. 11:16ㆍlanguage/jquery mobile
대화상자를 만드는 방법은 엄청 간단합니다.
대화상자 또는 다이얼로그 팝업 이라고 할 수 있고 사용 방법은 페이지를 이동하는 링크에 data-rel="dialog" 속성만 추가하면 사용가능합니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>1 page</p>
<p><a href="#page2" data-rel="dialog">go page2</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>2 page</p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
대화상자 ( 다이얼로그 팝업 ) 은 modal 대화상자로서 해스토리 해쉬에는 저장되지 않습니다.
그러므로 다이얼로그에서 다른 페이지로 이동 후 뒤로가기를 실행해도 다이얼로그로 돌아가지 않습니다.
아래 소스를 실행해보세요
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>1 page</p>
<p><a href="#page2" data-rel="dialog">go page2</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>2 page</p>
<p><a href="#page3">go page3</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>3 page</p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
ps : 다이얼로그에서 닫기 버튼을 직접 구현할 때에는 a 태그에 data-rel="back" 속성만 주면 된다.
|
1 |
<a class="ui-shadow ui-btn ui-corner-all ui-mini" data-rel="back">취소</a> |
cs |
'language > jquery mobile' 카테고리의 다른 글
| jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5) (0) | 2016.03.16 |
|---|---|
| jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4) (0) | 2016.03.16 |
| jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3) (0) | 2016.03.16 |
| jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2) (0) | 2016.03.15 |
| jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1) (0) | 2016.03.15 |
| jquery mobile 강좌 6 [ 페이지 전환 애니메이션 / 화면 전환 / 애니메이션 /changePage / data-transition / data-direction ] (0) | 2016.03.15 |
| jquery mobile 강좌 5 [ 페이지 이동 / changePage ] (15) | 2016.03.11 |
| jquery mobile 강좌 3 [ 페이지 이벤트 / event ] (7) | 2016.03.11 |
| jquery mobile 강좌 2 [ 페이지 이동 및 뒤로가기 ] (8) | 2016.03.10 |
| jquery mobile 강좌 1 [ jquery mobile 기본 설정 및 화면 만들기 ] (4) | 2016.03.10 |