CSMJU jQuery Mobile

เมนู
ถัดไป ก่อนหน้า

3.1 Pages & dialogs

     jQuery Mobile รวมเอาระบบนำทางการโหลดหน้าเว็บเข้าไว้กับ DOM ผ่านการใช้ AJAX ในการ เพิ่มเนื้อหาใหม่ จะช่วยทำให้มีความสมบูรณ์ในการเปลี่ยนหน้าเพ็จมากยิ่งขึ้น      ระบบนำทางจะเปลี่ยนทุกลิงค์และฟอร์มเพื่อเพิ่มประสิทธิภาพการใช้งานจากการเรียกของ AJAX ไปยังลิงค์นั้นโดยตรง สำหรับปุ่มย้อนกลับได้รองรับสอดคล้องกับการทำ pages, Dialogs, และ Popup ทั้งหมดนี้อย่างลงตัวสอดคล้องกับการทำงานของระบบนำทางเป็นอย่างดี นอกจากนี้ยังมีเครื่องมือที่จะนำ ไปใช้ในการ Prefetch & cache, Dynamically Inject, และ Script pages สำหรับการนำไป พัฒนาในขั้นสูงขึ้นอีกต่อไป
       a. Anatomy of a Page
  jQuery Mobile “Page” มีโครงสร้างที่ช่วยเพิ่มประสิทธิภาพที่จะรองรับการทำงานหน้าเว็บแต่ละหน้าหรือจะเป็นการลิงค์ เชื่อมโยงภายในหน้าเว็บ
เป้าหมายของการพัฒนารูปแบบนี้เพื่อให้นักพัฒนาได้นำไปสร้างเว็บไชต์ให้ใช้งานอย่างดีที่สุด

โครงสร้างหน้าเว็บบนมือถือ(Mobile page structure)
  หน้าเว็บของ jQuery Mobile มักจะเริ่มด้วยการใช้เทคโนโลยี HTML5 "doctype" ที่จะทำให้มีความสมบูรณ์มีความโดนเด่นของฟีเจอร์ framework ทั้งหมดในส่วน Head เรียกใช้งานที่ติดต่อกับ jQuery, jQuery Mobile และ CSS เป็นส่วนที่ต้องเรียกเป็นสิ่งแรกในส่วน Head
ตัวอย่างหน้าจอ
CD ไฟล์: index_page.html <!DOCTYPE html>
<html>

1. <head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>

2. <body>
<div data-role="page" id="page">
<div data-role="header">
<a href="#" data-role="button" data-icon="home">Home</a>
<h1>หน้าแรก</h1>
<a href="#" data-role="button" data-icon="info">about</a>
</div>
<div data-role="content">
<center><img src="images/logo2.png" width="90%"></center>
<ul data-role="listview" data-inset="true" data-dividertheme="c">
<li data-role="list-divider">ตัวอย่าง</li>
<li><a href="#page2">Page link1</a></li>
<li><a href="#page3">Page link2</a></li>
<li><a href="#page4">Page link3</a></li>
</ul>
</div> <div data-role="navbar" data-iconpos="top" data-inline="true">
<ul>
<li><a href="#" data-transition="pop" data-theme="d" data-icon="grid">Tab1</a></li>
<li><a href="#" data-transition="pop" data-theme="d" data-icon="star">Tab2</a></li>
<li><a href="#" data-transition="pop" data-theme="d" data-icon="gear">Tab3</a></li>
</ul>
</div>
<div data-role="footer">
<h4>CSMJU@2012</h4>
</div>
</body>
</html>

อธิบายโครงสร้าง Jquery mobile Page
     หมายเลข 1 ส่วนของ <head> ส่วนนี้ประกอบด้วย
     หมายเลข 2 ส่วนของ <body> ประกอบด้วย

 

© CSMJU