Mobile Apps 2: Menambah Page Didalam Mobile Apps

9:53 PTG 0 Comments A+ a-

 


<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com

* @link http://encraption.blogspot.com
* @version 20151
* @desc Menambah Page Didalam Mobile Apps
* Fail: 2_tambahPageDanLink.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>

<!-- Setiap page perlu diset <div data-role="page"> dan mempunyai tiga data-role iaitu header,main dan footer
Oleh kerana terdapat beberapa page, maka kita perlu letakkan id di page tersebut.
Setiap ID Page ada Nama Yang Unik. Contoh: id="pageone" dan id="pagetwo".
Cara panggil adalah href="#pagetwo" dan href="#pageone".
-->


<!-- Page pertama bernama pageone, nama tersebut di letakkan di ID sebelah data-role="page" -->
<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! If you click on the link below, it will take you to Page Two.</p>
<a href="#pagetwo">Go to Page Two</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

<!-- Page pertama bernama pagetwo, nama tersebut di letakkan di ID sebelah data-role="page" -->
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">


<!-- Cara memanggil page tersebut dengan meletakkan # disebelah nama yang diberikan pada id page.
contoh: <a href="#pageone"> -->
<p>This is Page Two. If you click on the link below, it will take you to Page One.</p>
<a href="#pageone">Go to Page One</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

</body>
</html>


2_tambahPageDanLink1



2_tambahPageDanLink2