เริ่มต้นด้วย ตัวอย่างง่ายๆ ทำตามได้ไม่ยาก สำหรับมืออาชีพ ศึกษาได้ด้วยตัวเอง
จะทำหน้า mobile web มี 3 หน้า
home
about us
และก็ contact us
1. สร้างโฟลเดอร์ใน C:AppServwww ที่เครื่อง สำหรับทดสอบ ในที่นี้เป็นโฟลเดอร์ ex1
สร้างไฟล์ index.php พื้นฐาน ใช้แบบในตัวอย่าง ที่น่าจะมีอีก
โค้ตไฟล์ index.php สำหรับ step 1
<!DOCTYPE html> <html> <head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
2. ใช้ jQuerymobile ที่เป็น css กับ javascript จาก server ของ jquery โดยตรง ไม่ต้องโหลด
(ตอนทดสอบต้องต่อเน็ตด้วย)
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
ใส่ใน โค้ต index.php ในขั้นตอนที่ 1 ตามนี้
<!DOCTYPE html> <html> <head> <title>ใส่ไตเติล ตามใจชอบ</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> </body> </html>
3. ต่อไปเป็นในส่วนของ เนื้อหาของแต่ละหน้า ประกอบด้วย 3 ส่วนพื้นฐาน
มี header / content / footer
ตามโค้ตด้านล่าง โดยเราจะทำเป็นหน้าๆ ด้วยการกำหนด id อย่างหน้าแรก เป็น id="page_home"
<!-- Start of page HOME -->
<div data-role="page" id="page_home">
<div data-role="header">
<h1>Home</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
4. สร้างอีกสองหน้าคือ about us กับ contact us
กำหนด id เพจ เป้น เป็น id="page_aboutus" และ เป็น id="page_contactus"
เรากำหนด id ไว้สำหรับ ทำ link เชื่อมโยงไปมา
โค้ดส่วนของเพจ about us และ contact us ตามลำดับ
<!-- Start of page ABOUT US -->
<div data-role="page" id="page_aboutus">
<div data-role="header">
<h1>About Us</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of page CONTACT US -->
<div data-role="page" id="page_aboutus">
<div data-role="header">
<h1>Contact Us</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
5. นำโค้ด ในส่วนของข้อ 3 และ 4 ไปใส่ในส่วนของ body แท็กของ โค้ดข้อ 2
จะได้โค้ดไฟล์ index.php ใน ขั้นตอนที่ 5 ดังนี้
<!DOCTYPE html>
<html>
<head>
<title>ใส่ไตเติล ตามใจชอบ</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- Start of page HOME -->
<div data-role="page" id="page_home">
<div data-role="header">
<h1>Home</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of page ABOUT US -->
<div data-role="page" id="page_aboutus">
<div data-role="header">
<h1>About Us</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of page CONTACT US -->
<div data-role="page" id="page_aboutus">
<div data-role="header">
<h1>Contact Us</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
6. ใส่ลิ้งค์ และเนื้อหา เพื่อเชิ่อมโยงและ ให้เห็นความแตกต่างเมื่อมีการเปลี่ยนหน้าเพจ
โดยการลิ้งค์เพจ ใจ้อ้างอิงจาก id ที่เราได้กำหนด แล้วในแท็ก <a> ปกติ โดยรูปแบบจะใช้เป็น
<a href="#ชื่อ id ที่เรากำหนด">ข้อความลิ้งค์ Link</a>
ในที่นี้จะใช้รูปแบบลิ้งค์แบบ listview ในเพจ id page_home
ดังนี้ โดยใส่เข้าไปในส่วนของ div content ในเพจ id page_home
<ul data-role="listview" data-ajax="false" data-inset="true" data-theme="d">
<li data-role="list-divider">Menu</li>
<li><a href="#page_home">Home</a></li>
<li><a href="#page_aboutus">About Us</a></li>
<li><a href="#page_contactus">Contact Us</a></li>
</ul>
ส่วนในเพจ id page_aboutus ให้แทรกเป็นเนื้อหา และลิ้งค์แบบง่าย ดังนี้
<p>เนื้อหา About us </p>
<p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
ในเพจ id page_contactus ให้แทรกเป็นเนื้อหา และลิ้งค์แบบง่าย ดังนี้
<p>เนื้อหา Contact us </p>
<p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
7. โค้ดสุดท้าย ทั้งหมดของไฟล์ index.php พร้อมนำไปทดสอบ จะเป็นแบบนี้
<!DOCTYPE html>
<html>
<head>
<title>ใส่ไตเติล ตามใจชอบ</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- Start of page HOME -->
<div data-role="page" id="page_home">
<div data-role="header">
<h1>Home</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-ajax="false" data-inset="true" data-theme="d">
<li data-role="list-divider">Menu</li>
<li><a href="#page_home">Home</a></li>
<li><a href="#page_aboutus">About Us</a></li>
<li><a href="#page_contactus">Contact Us</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of page ABOUT US -->
<div data-role="page" id="page_aboutus">
<div data-role="header">
<h1>About Us</h1>
</div><!-- /header -->
<div data-role="content">
<p>เนื้อหา About us </p>
<p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of page CONTACT US -->
<div data-role="page" id="page_contactus">
<div data-role="header">
<h1>Contact Us</h1>
</div><!-- /header -->
<div data-role="content">
<p>เนื้อหา Contact us </p>
<p>กลับไปหน้า Home <a href="#page_home">Home</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
