วิธีใช้งาน jQuery Mobile ก่อนอื่นให้ไปดาวน์โหลดไฟล์ตามลิ้งค์ด้านล่าง
http://jquerymobile.com/
จากนั้นแตกซิป เปิดโฟลเดอร์ขึ้นมาจะได้แบบนี้
ไม่ต้องแปลกใจที่เห็นไฟล์เยอะแยะไปหมดที่จริงแล้วไฟล์ที่จะใช้มีดังนี้ครับ
- jquery.mobile-1.4.0.min.js
- jquery.mobile-1.4.0.min.css
- โฟลเดอร์ images
นอกนั้นเป็นตัวอย่างอย่าพึ่งไปสนใจ เดี๋ยวจะสับสน หรือจะ copy ไปไว้ในโฟลเดอร์ใหม่ก็ได้ครับ ในที่นี้เพื่อให้ง่ายต่อการเรียกใช้งานผมสร้างโฟลเดอร์ขึ้นมาเพื่อเก็บโปรเจ็คนี้ชื่อว่า mobile-web และ copy ไฟล์และโฟลเดอร์ทั้ง 3 ไปไว้ข้างใน
สุดท้าย ดาวน์โหลดไลบรารี่ jQuery ในที่นี้ผมใช้เวอร์ชั่นล่าสุด คือ jQuery 2.1.0
เริ่มต้นสร้าง Page
เมื่อเตรียมทุกอย่างพร้อมแล้วสร้างไฟล์ ชื่อว่า test.html ขึ้นมา
(เก็บไฟล์ test.html ไว้ที่เดียวกันด้วยนะครับ)
โครงสร้างไฟล์ test.html ตามนี้
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
<script src="jquery-2.1.0.min.js"></script>
<script src="jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
...content goes here...
</body>
</html>
เราจะเขียน Code สำหรับสร้าง Page เข้าไปดังนี้
<div data-role="page">
<div data-role="header"> ส่วนแสดง header </div>
<div role="main" class="ui-content">ส่วนแสดงเนื้อหา</div>
<div data-role="footer"> ส่วนแสดง footer </div>
</div>
อธิบายโค๊ด :
data-role=”header” คือส่วน header ของเว็บ
data-role=”content” คือส่วนเนื้อหาของเว็บ
data-role=”footer” คือส่วน footer เว็บ
ลองใส่เนื้อหา ใส่รูป
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
<script src="jquery-2.1.0.min.js"></script>
<script src="jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div role="main" class="ui-content">
<p>ส่วนแสดงเนื้อหา ส่วนแสดงเนื้อหา ส่วนแสดงเนื้อหา ส่วนแสดงเนื้อหา ส่วนแสดงเนื้อหา ส่วนแสดงเนื้อหา ส่วนแสดงเนื้อหา ส่วนแสดงเนื้อหา</p>
<img src="images/20120625131328.png" width="280" height="auto" alt=""/> <img src="images/rx8frontjq0.jpg" width="100%" height="auto" alt=""/>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
ง่ายไหมละครับ ทีนี้ในส่วนของ header , footer เราจะใส่อะไรลงไปก้ได้ เช่น ตรง footer เราจะใส่ menu ตรง header เราจะใส่ ภาพสไลด์
และในส่วนเนื้อหาเราจะใส่อะไรลงไปก็ได้เช่นกันครับ
แต่การปรับแต่งต่างๆเราต้องศึกษารูปแบบโค๊ดของ jQuery Mobile เพิ่มเติม
ซึ่งไม่ได้ยากเลยครับ
สามารถเข้าไปศึกษาใน demo ตามลิ้งค์ด้านล่างนี้
http:// http://demos.jquerymobile.com/1.4.0/
ตัวอย่างผมจะเปลี่ยน theme เป็นสีอื่น แค่กำหนดโค๊ด เพิ่มพารามิเตอร์ data-theme=”b” ใน div
<div data-role="header" data-theme="b">
<h1>Header</h1>
</div>
ผลลัพธ์ สังเกตุว่าตรง header กับ footer เปลี่ยนเป็นสีดำ เพราะผมใส่ พารามิเตอร์ data-theme=”b” เข้าไป
