Question

我在jQuery mobile工作，这很棒。我有一个关于在URL的哈希部分内提供参数的问题。

这是一些示例代码。在主页的content部分，我希望能够链接到一个名为例如'＃photo-123'然后加载下面的'照片'页面。然后，我将从URL中提取照片编号，并加载图像123。

  <!-- Home page -->
    <div data-role="page" id="home"> 
        <div data-role="header">
            <h1>Home</h1> 
        </div> 
        <div data-role="content">    
            <p><a href="#photo" data-role="button">Photo ###</a></p>  
        </div> 
    </div> 
    <!-- Photo page -->
    <div data-role="page" id="photo">
        <div data-role="header">
            <h1>Photo ###</h1>
        </div>
        <div data-role="content">
              <img id="myphoto" src="" />
        </div>
    </div>

这样我可以重复使用URL，即用户可以直接重新加载该页面。

是否可以使用jQuery mobile在哈希URL中传递参数？（或者通常使用HTML - 我知道可以使用例如BBQ插件，但如果可能的话我宁愿避免使用插件）

Answer 1

您可以使用全局事件挂钩和数据标签来处理和存储内部（即#blah - ＆gt; #blah2之间）转换的参数：

在您的HTML中，您可以

＆LT; a href =“＃photo”data-params =“id = 123”＆gt; ....＆lt; / A＆GT;

拦截所有链接上的点击并查找特定数据元素，例如data-params：

$('a').live('click',
    function(e) {
        params = $(e.target).jqmData("params")
    }
)

在这种情况下，您将创建一个全局参数对象，您应该可以从所有代码以统一的方式访问该对象。

Answer 2

如果你可以像#photo？id = 123那样构建你的哈希，那么这样的东西可以起作用：

$("#page").live("pageinit", function(e) {
    var id = $(e.target).attr("data-url").replace(/.*id=/, "");
    //now you have the id, do page-rendering logic
});

并抓住直接链接：

if (window.location.hash && window.location.hash.indexOf("?") !== -1) {
    var pageID = window.location.hash.split("?")[0];
    $(pageID).trigger("pageinit");
}

Answer 3

您想使用.changPage()功能

$("[name=button_name]").click(function() { 
    $.mobile.changePage('anotherPage.php?parm=123','slide',false,true);
});

Answer 4

你可以这样做：

$('#photo').ready(function () {
    var photoId = window.location.hash.replace("#photo", "");
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId);
    window.location.hash = "#photo";
});

这将迫使jQuery转换到#photo页面，但需要阻止jQuery mobile首先尝试加载#photofff。这最终导致页面上的快速闪存，加载页面时出错，然后重定向以更正#hash标记。

<强>更新
如果您在该页面上禁用哈希跟踪，则应该能够删除错误消息显示。

<script type="text/javascript">
    $.mobile.hashListeningEnabled = false;
</script>

$('#photo').ready(function () {
    var photoId = window.location.hash.replace("#photo", "");
    $("#myphoto").attr("src", "http://dummyimage.com/600x400/000/" + photoId);
    $.mobile.changePage("#photo");
});

Answer 5

检查此修正：

https://github.com/flodev/jquery-mobile/commit/f3b2e5d84493f3b8b27f9f423863cab2a416007a

有一个类似的问题，但是将这一行代码添加到jquery.mobile js文件允许我传递URL中的参数，而不必添加插件和js路由解决方案。

jQuery mobile：在哈希URL中提供参数？

5 个答案: