值传递在Jquery中从一个html类到PhoneGap中的其他html类 [英] Value Passing In Jquery from one html class to other html class in PhoneGap
问题描述
我是一个Iphone开发者，现在正在移动到phonegap进行跨平台应用。我已经盯着学习jqueryMobile的uiDesgin.It是好的。
问题在这里，我拉我的头发是，我如何将值从一个HTML类传递给其他像我们在IOS或java.s一样建议我使用make a全局 jquery.js 文件保存所有变量并访问您的应用程序。
但我不明白。一个建议我使用本地存储值存储和使用后删除。我很困惑，真的不能弄清楚如何从类传输值，以及如何保持变量的引用以及如何访问它们。 gap建议使用本地存储，但只是为了保持变量引用，
我不觉得这是好的。请告诉我如何开始。
感谢。
解决方案1：
您可以使用changePage函数传递值：
$。mobile.changePage（'page2.html'，{ dataUrl：page2.html？paremeter = 123，data：{'paremeter'：'123'}，reloadPage：true，changeHash：true}）;
或使用如下按钮：
< a href =second.html？paremeter = 123data-role =button>或通过基本链接< / a>
并读取这样：
$（document）.on（'pagebeforeshow'，#index，function（event，data）{
var parameters = $（this）.data（url） .split（？）[1] ;;
parameter = parameters.replace（parameter =，）;
alert（parameter）;
}
index.html
<！DOCTYPE html>
< html>
< head>
< meta Charset =utf-8/>
< meta name =viewportcontent =widdiv = device-widdiv，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< meta name =apple-mobile-web-app-status-bar-stylecontent =black/>
< title>
< / title>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/>
< script src =http://www.dragan-gaic.info/js/jquery-1.8.2.min.js>
< / script>
< script src =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js>< / script>
< script>
$（document）.on（'pagebeforeshow'，#index，function（）{
$（document）.on（'click'，#changePage，function（）{
$ .mobile.changePage（'second.html'，{dataUrl：second.html？paremeter = 123，data：{'paremeter'：'123'}，reloadPage：false，changeHash：true}）;
}）;
}）;
$（document）.on（'pagebeforeshow'，#second，function（）{
var parameters = $（this）.data（url）。split ？）[1];
parameter = parameters.replace（paremeter =，）;
alert（parameter）;
}
< / script>
< / head>
< body>
<！ - 首页 - >
< div data-role =pageid =index>
< div data-role =header>
< h3>
首页
< / h3>
< / div>
< div data-role =content>
< a data-role =buttonid =changePage>使用changePage函数传递参数< / a>
< a href =second.html？paremeter = 123data-role =button>或通过基本链接< / a>
< / div> <！ - content - >
< / div><！ - page - >
< / body>
< / html>
second.html
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< meta name =viewportcontent =widdiv = device-widdiv，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no/>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< meta name =apple-mobile-web-app-status-bar-stylecontent =black/>
< title>
< / title>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/>
< script src =http://www.dragan-gaic.info/js/jquery-1.8.2.min.js>
< / script>
< script src =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js>< / script>
< / head>
< body>
<！ - 首页 - >
< div data-role =pageid =second>
< div data-role =header>
< h3>
第二页
< / h3>
< / div>
< div data-role =content>
< / div> <！ - content - >
< / div><！ - page - >
< / body>
< / html>
此解决方案用于多HTML模板，其中一个jQuery Mobile页面也是一个HTML文件。 / p>
解决方案2：
或者，您可以为存储目的创建一个持久的javascript对象。由于ajax用于页面加载（页面不以任何方式重新加载），该对象将保持活动状态。
var storeObject = {
firstname：''，
lastname：''
}
示例： http://jsfiddle.net/Gajotres/9KKbx/
解决方案3：
您也可以从上一页访问数据：
$（'＃index'）。live（'pagebeforeshow'，function（e，data）{
alert（data.prevPage.attr（'id' ））;
}）;
prevPage 对象拥有完整的上一页。
解决方案4：
作为最后一个解决方案，我们有一个nverty的HTML实现的localStorage。它只适用于HTML5浏览器（包括Android和iOS浏览器），但所有存储的数据都通过页面刷新持久化。
if （Storage）！==undefined）{
localStorage.firstname =Dragan;
localStorage.lastname =Gaic;
}
示例： http://jsfiddle.net/Gajotres/J9NTr/
更多信息
如果您想查找有关此主题的更多信息，请查看此 文章 。你会发现更多的细节加工作示例解释的一切。
I am a Iphone developer now moving to phonegap for making cross plateform application.
I have stared learning jqueryMobile for uiDesgin.It is good.
Issue is here , i am pulling my hairs for is that how do i pass value from one HTML class to other like we do in IOS or java.Some one has suggested me to use make a global jquery.js file keep all variable there and access in you app.
But i didn't understand it.Some one has suggested me to use local storage for value storing and remove after use.I am confused and really not able to figure out how to transfer values from class and also how to keep references of variables and also how to access them.Phone gap advises to use local storage but just for keeping variable reference,
I don't feel it is good.Please advise me how to get started.
Thanks .
Solution 1:
You can pass values with changePage function:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
or with a button like this:
<a href="second.html?paremeter=123" data-role="button">Or through a basic link</a>
And read them like this:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
$(document).on('pagebeforeshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];
parameter = parameters.replace("paremeter=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Pass parameters with changePage function</a>
<a href="second.html?paremeter=123" data-role="button">Or through a basic link</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
This solution is used for multi-HTML template where one jQuery Mobile page is also one HTML file.
Solution 2:
Or you can create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.
var storeObject = {
firstname : '',
lastname : ''
}
Example: http://jsfiddle.net/Gajotres/9KKbx/
Solution 3:
You can also access data from the previous page like this:
$('#index').live('pagebeforeshow', function (e, data) {
alert(data.prevPage.attr('id'));
});
prevPage object holds a complete previous page.
Solution 4:
As a last solution we have a nifty HTML implementation of localStorage. It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh.
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
Example: http://jsfiddle.net/Gajotres/J9NTr/
More info
If you want to find more information about this topic take a look at this article. You will find everything explained in more details plus working examples.
这篇关于值传递在Jquery中从一个html类到PhoneGap中的其他html类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
