Jquery Mobile
Memaparkan catatan dengan label Jquery Mobile. Papar semua catatan
Memaparkan catatan dengan label Jquery Mobile. Papar semua catatan

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>


 



3_PagesSebagaiDailog1



3_PagesSebagaiDailog2
Read More

Mobile Apps 2: Menambah Page Didalam Mobile Apps

 


<!--
 * 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
Read More

Mobile Apps 1 : Asas-asas dalam Page 

<!--
 * Mari Belajar PHP
 * @copyright (c) 2015, Encraptor Inc. All Right Reserved
 * @author  Encraptor@gmail.com
 
 * @link http://encraption.blogspot.com
 * @version 20151
 * @desc Penenrangan Asas bagi Mobile Apps didalam HTML5
 * Fail: 1_AsasPageMobile.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 -->

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>I Am Now A Mobile Developer!!</p>
  </div>

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

</body>
</html>


1_AsasPageMobile



 



Rujukan penting: W3Schools->JqueryMobile
Read More
Langgan: Catatan (Atom)