您的位置：首页 > Web前端 > JQuery

Cordova学习——使用jquery框架+device设备插件完整过程

2016-01-25 23:45 591 查看

Cordova应用启动流程

一、命令行添加device设备信息插件

插件介绍地址：http://cordova.apache.org/docs/en/latest/cordova/plugins/pluginapis.html

在APP项目目录下:cordova plugin add cordova-plugin-device

二、加入jquery框架,方便开发

下载jquery.js放入AppName/assets/www/js目录下

三、修改项目代码

1、index.html中加入jquery框架代码

<head>
….
<scripttype="text/javascript" src="js/jquery.min.js"></script>
….
</head>

2、修改index.js

var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready','offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready',this.onDeviceReady, false);
},
// deviceready Event Handler
// The scope of 'this' is the event. In order to call the'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
$(document).ready(function() {
ready();
});
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement =document.getElementById(id);
var listeningElement =parentElement.querySelector('.listening');
var receivedElement =parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
function ready() {
$(".listening").hide();
$(".received").show();
$(".received").html("myphone is:"+device.model+";"+device.platform);
}
app.initialize();

四、运行结果

参考链接:http://www.jikexueyuan.com/course/799_4.html?ss=1

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航