ก่อนอื่นใช้ Eclipse เปิดโปรเจคที่เราสร้างขึ้นเดิมที่ชื่อ HelloWorld
เลือกโฟลเดอร์ assets/www
คัดลอกไฟล์ jQuery, jQuery mobile มาไว้ที่ไดเรกทอรี js และ ไฟล์ css มาไว้ที่ไดเรกทอรี css และสามารถลบไฟล์บางส่วนที่ไม่ต้องการออก จนได้ประมาณดังรูป
แก้ไขไฟล์ index.html ดังต่อไปนี้
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css"> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/jquery.mobile-1.4.4.min.js"></script> <script src="cordova.js"></script> <script src="js/index.js"></script> </head> <body> <div data-role="page" id="pageHome"> <div data-role="header"> <h3>Header</h3> </div> <div data-role="main" class="ui-content"> <button id="bttOK" class="ui-btn ui-btn-inline">OK</button> </div> <div data-role="footer"> <h3>Footer</h3> </div> </div> </body> </html>
แก้ไขไฟล์ index.js ในโฟลเดอร์ js ดังนี้
$(document).on("pagecreate","#pageHome",function(){ document.addEventListener("deviceready", onDeviceReady, false); }); function onDeviceReady(){ $("#bttOK").on("tap",function(){ alert("Hello World!"); }); }
เชื่อมต่อกับอุปกรณ์ หรือ emulator แล้วคลิกขวาที่ project เลือก Run as android application เพื่อดูผลลัพธ์ ซึ่งน่าจะได้ตามรูปครับ
เมื่อคลิกที่ปุ่ม OK น่าจะแสดงผลดังนี้ครับ
ในส่วนที่เหลือเราก็สามารถแก้ไขโค้ดได้ตามสะดวกแล้วครับ
No comments:
Post a Comment