JQuery停止使用Cordova

时间：2015-01-20 03:47:12

标签： jquery cordova jquery-mobile

我有一个奇怪的问题，希望有人可以提供帮助。我正在尝试使用Cordova创建一个非常简单的应用程序，以探索其功能并设置一个基本的“shell”应用程序，我可以将其用作未来工作的起点，而不是从头开始。

我已经实施的一些框架的摘要：

  • Cordova 4.2.0
  • JQuery 1.11.2
  • JQuery Mobile 1.4.5

所以基本的问题是，当我在应用程序中加载页面时，一切正常。但是在我导航到另一个页面后，JQuery停止工作。我有一个基本的登陆页面，允许用户点击一个按钮，然后从菜单中选择从图库或相机中获取照片并在屏幕上显示。这很好。

然后我使用JQuery Mobile Panel小部件和链接列表作为我的导航。单击一个并转到另一个页面（例如about.html）后，任何其他页面上的JQuery都不起作用。当导航到about.html时，主文本应该根据该页面底部的脚本更改为“Changed Hello World”，但它仍然是“Hello World”。

当我在网络浏览器中测试时，一切正常，但在设备上我什么也得不到。交换页面也没有任何作用，例如加载关于页面首先工作，但导航到Photo会破坏该功能。

我觉得它与JQuery Mobile及其Ajax导航和页面加载等有关，但我无法证明这一点。认为它可能与JQuery冲突有关，所以我玩了导入的顺序和$ .noConflict，但它似乎使事情变得更糟。其他人有这些框架可以很好地一起玩吗？

以下是我的例子：

的index.html 

<!DOCTYPE html>
<html>
<head>
    
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=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=medium-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/simple-orange.min.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons.min.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.5.min.css" />

	<script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/index.js"></script>

    <title>Hello World</title>
</head>
<body>
    <div data-role="page">
 		
        <div data-role="header" data-icon="bars" >
        	<a class="ui-nodisc-icon" data-iconpos="notext" href="#nav-panel" data-icon="bars"></a>
            <h1>My Title</h1>
        </div><!-- /header -->
 
        <div data-role="content">
           <h2 id="hea">Upload Photo</h2>
			<form>
				<label for="file">Choose a photo:</label>
				<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-camera ui-btn-icon-left ui-btn-a">Add photo</a>
				<div data-role="popup" id="popupMenu" data-theme="b"><ul data-role="listview" data-inset="true" style="min-width:210px;">
				<li data-role="list-divider">Add from</li>
				<li data-icon="false"><a id="camera-link" href="#">Camera</a></li>
				<li data-icon="false"><a id="gallery-link" href="#">Gallery</a></li>
				</ul>
				</div>
			</form>
			<img id="photo-thumb" />
        </div><!-- /content -->
 
        <div data-role="footer">
            <h4>My Footer</h4>
        </div><!-- /footer -->
 		<div data-role="panel" id="nav-panel" >
	 		<ul data-role="listview">
			    <li data-icon="false"><a href="./form.html">Form</a></li>
			    <li data-icon="false"><a href="./photo.html">Photo</a></li>
			    <li data-icon="false"><a href="./about.html">About</a></li>
			</ul>
		</div>
    </div><!-- /page -->
    <script>
	
		$("#hea").html('New Upload Photo');
		$("#camera-link").click(function(e){
			console.log('click called');
			console.log('prevented default');
			takePhoto();
		});
		$("#gallery-link").click(function(e){
			selectPhoto();
		}); 
	</script>
</body>
</html>

index.js 

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

var permanentStorage = window.localStorage;
var tempStorage = window.sessionStorage;



function showToken() {
	var p = document.getElementById('token');
	p.innerHTML = tempStorage.getItem('token');
}

function storeToken() {
	permanentStorage.setItem('deviceid', "abc123");
	tempStorage.setItem('token', "DLJKSD#$()*#@$HKS");
	showToken();
}

function takePhoto() {
	console.log('taking photo');
	navigator.camera.getPicture(onSuccess, onFail, {
		quality : 50,
		destinationType : Camera.DestinationType.DATA_URL
	});
}

function selectPhoto() {
	navigator.camera.getPicture(onSuccess, onFail, {
		quality : 50,
		destinationType : Camera.DestinationType.DATA_URL,
		sourceType: Camera.PictureSourceType.PHOTOLIBRARY
	});
}

function onSuccess(imageData) {
	var image = $('#photo-thumb');
	image.attr('src', "data:image/jpeg;base64," + imageData);
}

function onFail(message) {
	alert('Failed because: ' + message);
}

about.html 

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=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=medium-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/simple-orange.min.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile.icons.min.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.5.min.css" />

	<script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/index.js"></script>

<title>About</title>
</head>
<body>
	<div data-role="page">

		<div data-role="header" data-icon="bars">
			<a class="ui-nodisc-icon" data-iconpos="notext" href="#nav-panel"
				data-icon="bars"></a>
			<h1>About</h1>
		</div>
		<!-- /header -->

		<div data-role="content">
			<h1 id="myhead">Hello world</h1>
		</div>
		<!-- /content -->

		<div data-role="panel" id="nav-panel" >
	 		<ul data-role="listview">
			    <li data-icon="false"><a href="./form.html">Form</a></li>
			    <li data-icon="false"><a href="./photo.html">Photo</a></li>
			    <li data-icon="false"><a href="./about.html">About</a></li>
			</ul>
		</div>
	</div>
	<script>
		$("#myhead").html('Changed Hello World');
	</script>
	<!-- /page -->
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题