5

我有一个基本的 jQuery Mobile 页面，如下所示：

<div data-role="page" id="home">

</div>
<div data-role="page" id="products">

</div>

除非我想从外部链接链接到产品页面，否则一切都按预期工作。我试过了：mysite.com/mobile/default.aspx#products 但只显示主页。有没有办法让外部链接显示产品页面？

4

3 回答 3

4

简短的回答是您不能直接链接到多页文档中的特定页面。

不幸的是，jQuery Mobile 的工作方式是，当您链接到具有多个“页面”的页面时，默认情况下它只会加载第一页，要加载整个外部多页文档，您需要加载没有 ajax 的页面（例如添加rel="external"，或者如果你想用 ajax 加载页面，你可以使用subpages 插件。

就链接而言，您应该分开您的页面，或者通过 ajax 预加载外部多页文档（使用我上面链接到的插件，或者如果您愿意，可以手动），然后作为内部页面链接到它。

从文档

请务必注意，如果您从通过 Ajax 加载的移动页面链接到包含多个内部页面的页面，则需要在链接中添加 rel="external" 或 data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。这一点很关键，因为 Ajax 页面使用哈希 (#) 来跟踪 Ajax 历史，而多个内部页面使用哈希来指示内部页面，因此这两种模式之间的哈希会发生冲突。

例如，指向包含多个内部页面的页面的链接如下所示：

<a href="multipage.html" rel="external">Multi-page link</a>
于 2012-12-19T21:27:46.633 回答
1

为每个“页面”添加一个与您提供的 id 名称相同的 data-url 属性：

<div data-role  = 'page'                         
     id         = 'page_baseball_hats'  
     data-url   = 'page_baseball_hats'    
  >

那么您应该能够使用 jqm 已经生成的 url 哈希系统从站点外部直接链接到“子页面”，例如：www.myjqmsite.com/#page_baseball_hats

第二段介绍了这个想法：http: //jquerymobile.com/demos/1.0a3/docs/pages/docs-navmodel.html

于 2013-02-18T19:58:17.693 回答
0

这是一种开箱即用的方式。但效果很好。

  $(document).on('pagebeforeshow', '#mainPage', function (e) {  
      if(window.location.hash) {
          $('#YOUR BTN ID LINKED TO DESIRED SUBPAGE').click();
      } 
  });

这表示“如果您的 url 有一个哈希 (index.html#subPage)，并且如果您有一个超链接按钮到该页面的 id (将该 id 设置为 $click), (您可能在导航栏中有这个按钮例如，您的页脚）在显示主页面之前转到该子页面“

将#mainPage 更改为多页网址中的第一页ID。

将 #subPage 更改为您的多页 url 中的子页面 ID。

当然，这仅在您只有一个子页面时才有效。

如果您有多个子页面，请使用此

  $(document).on('pagebeforeshow', '#mainPage', function (e) {  
      var hash = location.hash.replace("#","");
      if(window.location.hash) {
          if(hash === 'subPage'){ 
              $('#YOUR BTN ID LINKED TO DESIRED SUBPAGE').click(); 
          }
      }
  });
于 2015-01-11T05:07:38.860 回答