ไปที่โปรเจค D:\mobile\code\multi\www แล้วแก้ไขไฟล์ index.html ดังต่อไปนี้
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <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!"); }); }
อย่าลืมคัดลอกไฟล์ jquery และ jquery mobile ทั้ง .js และ .css ไปไว้ยังโฟลเดอร์ js และ css ตามลำดับด้วยครับ
จากนั้นลองทดสอบ run เลยก็ได้ครับ สมมติว่าตอนนี้เราอยู่ที่โฟลเดอร์ของโปรเจค เช่น D:\mobile\code\multi ก็ใช้คำสั่ง
cordova run android
ก็น่าจะได้ผลลัพธ์เหมือนตัวอย่างก่อนหน้านี้เช่นเดียวกัน
No comments:
Post a Comment