1.2 เรียนรู้ jQuery Mobile เบื้องต้น
เริ่มต้นกับ jQuery Mobile
jQuery Mobile จะช่วยให้ใช้งานระบบได้ง่ายขึ้น และยังใช้งานร่วมกับระบบนำทางAJAX
ที่สามารถรองรับหน้าเพจที่มีการเคลื่อนไหวได้อีกด้วยสามารถเรียกใช้ jQuery Mobileไว้ในส่วนของ head ซึ่งสามารถเรียกใช้ได้ 2 วิธี คือ
1.เรียกใช้จากเว็บไซต์ของ jQuery Mobile
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
2.เรียกใช้จากไฟล์ในคอมพิวเตอร์
<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>
การสร้าง page template เบื้องต้น
ทดลองสร้าง page template สามารถทำได้โดย สร้างไฟล์ html หรือ php ขึ้นมา 1ไฟล์ และวางโค้ดตัวอย่างลงในไฟล์ หลังจากนั้น save และทดลองเปิดในเบราว์เซอร์
ตัวอย่างโค้ด
<!DOCTYPE html><html>
1.
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-
1.2.0.min.css"
/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
</head>
2.
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello World</p>
</div><!-- /content -->
<div data-role="footer">
<p> Footer </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
สิ่งที่อยู่ใน template คือ <head> และ<body>
หมายเลข 1 ในส่วนของ <head>
<meta> คือการกำหนดความกว้างพิกเซลของหน้าจออุปกรณ์ โดยอ้างอิงถึงรูปแบบและสคริปต์
ของ jQuery,jQuery Mobile และ mobile theme stylesheet จาก CDN ซึ่ง jQuery Mobile 1.2 (1.2.0) ทำงานร่วมกับ jQuery core ได้ตั้งแต่เวอร์ชัน 1.7.0 ถึง 1.8.2
หมายเลข 2 ในส่วนของ <body>
<div data-role="page"> เป็นการกำหนดพื้นที่ทั้งหมดของเนื้อหาจะแสดงบนหน้าเว็บไซต์
โดย data-role="header"คือส่วนของ header bar และdata-role="content"คือเนื้อหาของเว็บ ซึ่งdata- attributes เหล่านี้เป็นแอตทริบิวต์ของ HTML5 ซึ่ง jQuery Mobile นำมาใช้เพื่อปรับเปลี่ยน
มาร์กอัป(markup)พื้นฐานและรูปแบบของwidget
การเพิ่ม content
ในส่วนที่เป็นข้อมูลสามารถเพิ่มHTML elements อื่นๆได้ เช่นเพิ่ม headings, lists, paragraphs ซึ่งสามารถสร้าง layouts ในรูปแบบของตนเองได้ โดยการเพิ่ม stylesheet ไปยัง head ต่อจาก stylesheet ของ jQuery Mobile
การทำ listview
jQuery Mobile สามารถ includes common listviews โดยเพิ่มแอตทริบิวต์ที่ชื่อว่า
data-role="listview" อีกทั้งยังสามารถเพิ่มแอตทริบิวต์ data-inset="true" และเพิ่มการกรองการค้นหาแบบไดนามิกด้วยแอตทริบิวต์ data-filter="true" ดังตัวอย่างต่อไปนี้
CD ไฟล์ : linked_list.html
Framework จะมี elements ของ form ที่สมบูรณ์แบบ ซึ่งจะช่วยเพิ่มความสามารถในการ ใช้งานได้อัตโนมัติ โดยเรียกใช้ input type="range" และควรจะตั้งชื่อ <label> ของแต่ละ form element ให้มีความสอดคล้องและเชื่อมโยงกัน ดังตัวอย่างต่อไปนี้ CD ไฟล์ : slider.html
การทำปุ่มของjQuery Mobile เป็นการเปิดลิงค์จากปุ่ม สร้างโดยใช้ และเพิ่มแอตทริบิวต์ ที่ชื่อว่า data-role="button" นอกจากนั้นสามารถเพิ่มไอคอนให้กับปุ่มด้วยแอตทริบิวต์ data-icon และกำหนดตำแหน่งด้วยแอตทริบิวต์ data-iconpos ดังตัวอย่างต่อไปนี้ CD ไฟล์ : button.html Play with theme swatches แถบธีม
jQuery Mobile มี theme Frameworkที่ สนับสนุน toolbar, content และbutton colors ได้ถึง 26 theme ซึ่งเรียกว่า "swatch" โดยเพิ่มแอตทริบิวต์ data-theme="e" ให้กับ page, header, list, slider เป็นต้น และมี default theme เริ่มจาก a ถึง e หากต้องการสร้างธีมเพื่อใช้งานเอง จะต้องใช้เครื่องมือ ThemeRoller เพื่อสร้างธีม และหลังจากนั้นสามารถดาวน์โหลดธีมกลับมาได้ CD ไฟล์ :theme swatches.html
เกร็ดความรู้ :เมื่อเพิ่มแถบธีมลงในเพจจะสังเกตเห็นได้ว่า ภายในcontentจะเปลี่ยนแปลงไป แบบอัตโนมัติ แต่ในส่วนของ header และ footer จะไม่มีเปลี่ยนแปลง โดยมีค่าเริ่มต้นของแถบคือ "a"