Jquery 모바일: 다이얼로그(dialog)
Jquery Mobile: 다이얼로그(dialog)
data-role="button"과 dara-rel="dialog" 형태로 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile Dialog</title>
<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.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">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>첫 번째 페이지</p>
<a href="#page2" data-role="button" data-rel="dialog">2번째 페이지로 이동</a>
<a href="#page2" data-role="button" data-inline="true">2번째 페이지로 이동</a>
<button>버튼 태그</button>
<input type="button" value="버튼 타입 인풋" />
<input type="submit" value="서브밋 타입 인풋" />
<input type="reset" value="리셋 타입 인풋" />
<input type="image" value="이미지 타입 인풋" />
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
<!-- 버튼 태그의 다이어로그 -->
<section id="page2" data-role="page">
<header data-role="header">
<h1>JQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<p>첫 번째 페이지</p>
<a href="#page3" data-role="button" data-rel="dialog">3번째 페이지로 이동</a>
</div>
<footer data-role="footer">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
