jQuery Mobile:通过 changePage 获取传递给页面的数据 [英] jQuery Mobile: Get data passed to page via changePage

查看：17
本文介绍了jQuery Mobile:通过 changePage 获取传递给页面的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将一个对象从一个页面传递到另一个页面，并根据 JQM 文档这应该是正确的:

$.mobile.changePage( "about/us.html", { data: {paramUno:"Uno", paramDos:11} });

我的问题是，我不确定在 us.html 加载后访问这些值的最佳方式.我为 pageshow、pagebeforeshow、pageinit 和 pagechange 添加了页面事件回调，并且在每种情况下都添加了 event.data未定义.这样做的正确方法是什么?我宁愿不使用 localStorage 或全局/命名空间变量，除非这是我唯一的选择.

谢谢！

解决方案

解决方案

像这样发送它们:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?parameter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true});

并像这样阅读它们:

$("#index").live('pagebeforeshow', function (event, data) {var 参数 = $(this).data("url").split("?")[1];;parameter = parameters.replace("parameter=","");警报(参数)；});

可以在此处找到更多示例:jQuery Mobile:文档就绪与页面事件，只需查找章节:页面转换之间的数据/参数操作.

示例:

index.html

<头><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"/><标题><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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></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 参数 = $(this).data("url").split("?")[1];;parameter = parameters.replace("parameter=","");警报(参数)；});<身体><!-- 主页--><div data-role="page" id="index"><div data-role="header"><h3>第一页

<div data-role="内容"><a data-role="button" id="changePage">Test</a>

<!--内容--></div><!--page-->

second.html

<头><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"/><标题><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 src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><身体><!-- 主页--><div data-role="page" id="second"><div data-role="header"><h3>第二页

<div data-role="内容">

<!--内容--></div><!--page-->

更多信息

如果您想了解有关此主题的更多信息，请查看此 文章.您会通过示例找到多种解决方案.

I'm trying to pass an object from one page to another and accoriding the JQM docs this should be correct:

$.mobile.changePage( "about/us.html", { data: {paramUno:"Uno", paramDos:11} });

My problem is that I'm not sure of the best way to access those values once us.html has loaded. I added page event callbacks for pageshow, pagebeforeshow, pageinit, and pagechange and in every case, event.data is undefined. Whats the proper way to do this? I'd prefer to not use localStorage or a global/namespaced var unless that's my only choice.

Thank you!

解决方案

Solution

Send them like this:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?parameter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

And read them like this:

$("#index").live('pagebeforeshow', function (event, data) {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");  
    alert(parameter);    
});

More examples can be found here: jQuery Mobile: document ready vs page events, just look for chapter: Data/Parameters manipulation between page transitions.

Example:

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("parameter=","");  
            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">Test</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>

More info

If you want to learn more about this topic take a look at this article. You will find several solutions with examples.

这篇关于jQuery Mobile:通过 changePage 获取传递给页面的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆