บทความนี้ เป็นเนื้อหาต่อเนื่อง สำหรับสมาชิกที่สนใจ
เป็นพิเศษเท่านั้น ให้ทำการดาวน์โหลด ไฟล์ สำหรับศึกษา
ไปพร้อมกันได้ที่
หลังจากดาวน์โหลดไฟล์ ข้างต้น ให้แตกไฟล์สำหรับใช้งาน
1. index.php
2. ex1.php
3. Folder ชื่อ js ที่รวม jquery, jquery mobile และ icon พร้อมใช้งาน
ไฟล์ ex1.php จะเป็นไฟล์สำหรับใช้ในการทดสอบ
เช่น แก้ไข เพิ่ม ปรับปรุงโค้ดทั้งหมด
ไฟล์ index.php จะเป็นไฟล์ สำหรับเรียก แสดงในการทดสอบเท่านั้น
ใช้งานจริง เราจะเปลี่ยนไฟล์ ex1.php เป็น 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="js/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/mobile/1.4.2/jquery.mobile-1.4.2.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-inset="true" data-divider-theme="a">
<li data-role="list-divider">Menu</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" data-position="fixed">
<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" data-position="fixed">
<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" data-position="fixed">
<h4>ส่วน footer ใส่ตามใจชอบ</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
ในเนื้อหาตอนนี้เราได้รู้เบื้องต้น แบบเร็ว เกี่ยวกับ jquery mobile ว่า
หน้าตาของ jquery mobile แสดงผลอย่างไร แล้ว เราจะทำอะไรได้บ้าง
หากศึกษาไปพร้อมกัน อย่างต่อเนื่อง จะทำให้ได้พื้นฐาน เกี่ยวกับ การใช้งาน
html5 css3 ajax รวมไปถึง ประยุกต์สร้าง app สำหรับมือถือ ได้ทั้ง android และ ios
หรือ ระบบอื่นๆ ต่อไป
โปรดติดตาม และทำความเข้าไปใจพร้อมๆ กัน หากมีข้อสงสัย สามารถ คอมเม้นแสดงความ
คิดเห็นและสอบถามได้ ได้บทความนี้
* เนื้อหานี้เป็นบทความต่อเนื่อง เรียนรู้จนเข้าใจ
จะมีการอัพเดทไปเรื่อยๆ ตามการได้ศึกษา แล้วมาแบ่งปันของผู้เขียน
