Mobile Apps 3 : Gunakan Pages Sebagai Dailog
<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com
* @link http://encraption.blogspot.com
* @version 20151
* @desc Mobile Apps 3 : Gunakan Pages Sebagai Dailog
* Fail: 3_PagesSebagaiDailog.php
-->
<!-- Tag <!DOCTYPE html> merupakan tag HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- meta name untuk device mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Kita perlu memanggil 3 perkara asas rujukan untuk mobile apps iaitu JQUERY, JQUERY MOBILE serta JQUERY MOBILE CSS-->
<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.2.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>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome!</p>
<a href="#pagetwo">Go to Dialog Page</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<!-- Untuk menjadikan sesuatu page itu menjadi dialog page, kita perlu set data-dialog="true" di page berkenaan -->
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header">
<h1>I'm A Dialog Box!</h1>
</div>
<div data-role="main" class="ui-content">
<p>The dialog box is different from a normal page, it is displayed on top of the current page and it will not span the entire width of the page. The dialog has also an icon of "X" in the header to close the box.</p>
<a href="#pageone">Go to Page One</a>
</div>
<div data-role="footer">
<h1>Footer Text In Dialog</h1>
</div>
</div>
</body>
</html>
