JQuery Mobile页面参数

时间:2012-10-17 03:28:54

标签: jquery jquery-mobile

只是想知道如何将一些参数传递给JQuery Mobile页面?

例如

<div data-role="page-content">                                                      
         <ul class="gallery">   
                    <li><a href="#mypage?01"><img src="1.jpg"/></a></li>
                    <li><a href="#mypage/02"><img src="2.jpg"/></a></li>                           
         </ul>                        
</div><!-- /content -->     

如你所见,我试过#和?但是它们不起作用

由于

3 个答案:

答案 0 :(得分:4)

您可以通过更改以下内容来实现。

予。删除<a>

II。内部页面到外部页面

"#mypage" to "mypage.html"

III。将“单击”图像事件绑定到调用页面的函数

$("#img1").click(function () {
      $.mobile.changePage("mypage.html", { data: { [...parameters...] } });
//eg: $.mobile.changePage("mypage.html", { data: { "param1": "value1" } });
});

IV。在MyPage.html中使用此

<div data-role="page" id="newPageId">
  <script type="text/javascript">
    $("#newPageId").on("pageshow", onPageShow);
    function onPageShow(e,data)
    {
        var url = $.url(document.location);

        var param1 = url.param("param1");
        var param2 = url.param("param2");
        :
    }
  </script>
</div>

您可以按照详细的Tutorial Here

进行操作

您还可以查看此Question Here以了解某些变体。 查看答案

答案 1 :(得分:0)

答案 2 :(得分:0)

我认为问题是如何在链接到内部页面时处理参数。

以下是我在发现这个问题时解决了问题的方法:

    <div data-role="page-content">                                                      
      <ul class="gallery">   
        <li><a href="#mypage" data-my_param=1><img src="1.jpg"/></a></li>
        <li><a href="#mypage" data-my_param=2><img src="2.jpg"/></a></li>                           
      </ul>                        
    </div><!-- /content -->

...然后

    $('ul').on('click', 'a', function(e){
        myParam = $(this).data('my_param');            
        //do what ever needs to be done to the page with the param
    });