---
1) Mula dengan contoh jQuery Mobile Pages
1.2) Aktifkan Developer tools.
1.3) Pilih Console Window.
1.4) Masukkan kod untuk kesan PageShow events dan papar respon dalam Console Window
<script>
$(document).on("pageshow","#pageone",function(){
console.log("page show event");
});
</script>
|
Masukkan kod di atas seperti di bawah.
1.5) Lihat kesannya di Result Window.
2) Dapatkan kod contoh untuk Local Storage
2.2) Aktifkan Developer tools.
2.3) Pilih Resource Window
2.4) Perhatikan bagaimana contoh ini berfungsi.
Arahan setItem digunakan untuk menyimpan Data Value “Smith” di dalam “Data Key” berlabel “lastname”.
Arahan getItem digunakan untuk mengeluarkan Data Value dari Data Key dan memaparkannya di dalam elemen yang mempunyai id “result”.
3) Salin contoh Local Storage ke dalam contoh jQuery Mobile Page
3.1) salin kod <div id="result"></div> dan letak di dalam <div data-role="main" class="ui-content"> bagi pagetwo.
3.2) salin kod dalam elemen <script> pada contoh Local Storage.
3.3) tampal kod yang disalin ke dalam callback function pada contoh jQueryMobile
3.4) Uji kod anda.
4) Gantikan kod JavaScript biasa dengan kod JavaScript jQuery
(Langkah ini tidak wajib, tetapi ia menjadikan kod anda lebih “elegant” maksudnya kelihatan professional).
5) Rujukan
Kod penuh akhirnya kelihatan seperti berikut:
<!DOCTYPE html>
<html>
<head>
<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.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pageshow","#pageone",function(){
console.log("page show event");
// Check browser support
if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
$("#result").html( localStorage.getItem("lastname"));
} else {
$("#result").html("Sorry, your browser does not support Web Storage...");
}
});
</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! 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>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>This is Page Two. If you click on the link below, it will take you to Page One.</p>
<div id="result"></div>
<a href="#pageone">Go to Page One</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
|
No comments:
Post a Comment