เริ่มต้น การเรียกใช้งาน JQuery Mobile
การใช้งาน JQuery Mobile กล่าวง่ายๆ มี 2 แบบ ด้วยกันครับ- วิธีที่ 1 เรียกใช้งาน JQuery Mobile จาก Source File ของผู้ให้บริการ
- วิธีที่ 2 เรียกใช้งาน JQuery Mobile จาก Source File ของเราเอง
วิธีที่ 1 เป็นการเรียกใช้งาน JQuery Mobile จาก Website ผู้ให้บริการ การเรียกใช้งานนั้นจะเป็นการอ้างอิง หรือเรียกใช้ข้อมูลจากเว็บไซด์
Step 1 เริ่มสร้างไฟล์ HTML (สามารถสร้างจาก Notepad หรือ Tools อื่นๆ ที่ถนัด)
โครงสร้างไฟล์ดังนี้
<html>
<head>
<title>หน้าแรกสำหรับ Jquery Mobile</title>
</head>
<body>
</body>
</html>
Step 2 แทรกโค้ดเพื่ออ้างถึง Source File จากเว็บผู้ให้บริการ
<html>
<head>
<title>หน้าแรกสำหรับ Jquery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
</body>
</html>
Step 3 แทรกโค้ดเรียกใช้งาน JQuery Mobile
<html>
<head>
<title>หน้าแรกสำหรับ Jquery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page_home">
<div data-role="header">
<h1>ส่วนของ Header หน้าแรก</h1>
</div>
<div data-role="content">
เนื้อหา หน้าเว็บครับ
</div>
<div data-role="footer">
<h4>ส่วนของ Footer หน้าแรก</h4>
</div>
</div>
</body>
</html>
Step 4 ทดสอบเรียกใช้งานไฟล์ Html ที่เราสร้างผ่าน Browsers
ไม่มีความคิดเห็น:
แสดงความคิดเห็น