0

我是 Jquery 移动版的新手。

当我导航到另一个页面时，我试图从下面的代码中说 # display2 来获得滑动效果。

但我无法获得幻灯片效果。

如果我删除 rel="external" 我可以滑动但在#display2（我将导航到的页面）上，查询字符串值返回为空。

所以如果我把 rel="external" 参数传递给 #display2 但幻灯片转换不起作用。如果我删除 re="external" 幻灯片有效，但查询字符串参数返回 null。

你能告诉我有没有办法让他们俩一起工作。

('#display').on('pagebeforeshow', function () {
           // $(this).find('[data-role=header] .ui-title').text(json.getLOBXMLResult[currentItem].FolderName);
                $.ajax("AppstoreWS.svc/getLOBXML", {
                beforeSend: function (xhr) {
                    $.mobile.showPageLoadingMsg();
                },
                complete: function () {
                    $.mobile.hidePageLoadingMsg();
                },
                contentType: 'application/json',
                dataType: 'json',
                type: 'GET',
                error: function () {
                    //alert('Something awful happened');
                },
                success: function (data) {
                    result1 = data.getLOBXMLResult;
                    $('#categoryList').children().remove('li');
                    $.each(result1, function (index, output) {
                        $('#categoryList').append('<li><a href="?platform=' + output.FolderName + '&sid=test#display2"  data-transition="slide" rel="external">' + output.FolderName + '</a></li>');
                                               });
               $('#categoryList').listview('refresh');
                }
            });
        });
4

1 回答 1

0

第 1 部分 - 为什么 rel=external 有效和其他选项

没有过渡的原因rel=external是因为它期望浏览器打开一个外部页面，因此禁用ajax. 为了应对这种情况，您有很多选择：

通过使用单页模板

你可以把你的两个页面变成一个页面。这称为单页模板，您的第二页参考将是#page2（或您作为 ID 提供的任何名称）。这就是它的样子：

    <div data-role="page" id="page1">
      <!--Stuff in page 1-->
    </div>
    <div data-role="page" id="page2">
      <!--page 2 stuff-->
    </div>

优点

  • DOM 可以利用 ajax 驱动导航的强大功能。
  • 这将使部分加载、脚本加载变得容易，因为您只需要引用所有这些内容一次。
  • 页面之间的数据传输非常简单。您只需将所需的数据存储在全局变量或 的data属性中，然后在第二页的or （或任何事件）中#page2检索它。pageinitpageshow
  • 过渡等将起作用。
  • 不会有页面刷新。

缺点

  • 如果两个页面的HTML内容很大，维护起来会很困难。

通过使用 rel=external

正如您可能已经看到的，rel=external仅当绝对需要刷新页面时才能使用。它取决于用户的选择。如果a标记带有rel=external它意味着浏览器会将其视为外部链接，并且将忽略 jQuery Mobile 的ajax导航系统。

通过在第 1 页中引用第 2 页的所有脚本

通常，为了能够使用页面转换，您必须ajax在 jQM 中使用导航系统。所以ajax的一般行为如下：

  1. page1将page2在 page2.html 中请求。
  2. page2.html<body>单独取自 page2.html。
  3. 该<head>部分（可能包含您的脚本，可能具有您的查询字符串逻辑）将被忽略。

ajax所以要改变这一点，你可以在page1.html的头中引用page2的脚本，这样当jQM的系统拉取page2.html的时候，这些脚本就会被加载并准备好body。

 <script src="jqm.js"></script>
 <script src="page1.js"></script>

 <!--page 2 scripts-->
 <script src="page2.js"></script>

优点

  • 您的转换将正常工作。
  • 通用脚本不会被多次引用，因此加载时间要快得多。
  • 查询字符串也可以

缺点

  • 如果这两个页面几乎没有共同点，那么您最终会在第一页中出现不需要的脚本。
  • 如果你有两个以上的页面怎么办？如果你有 10 页呢？你会参考所有 10 个页面的脚本吗page1？我不认为那是方式。

通过引用 page2.html 的“data-role=page”部分中的 page2 脚本（推荐）

这将在 ajax 引入时将脚本与页面一起引入。这也适用于查询字符串。这看起来像这样：

  <div data-role="page" id="page2">
    <script src="page2.js"></script>
    <!--- your html-->
  </div>

优点

  • 与特定页面有关的脚本仅限于该页面内。
  • 过渡将起作用。
  • 查询字符串也可以

第 2 部分 - 查询字符串的替代方法

我之所以这么说是因为查询字符串是过时的技术，因为当时没有办法存储到数据中。它们也不安全，因为用户可以看到您通过 URL 发送的数据。您必须考虑使用类似localStorage. 我不是说你不能使用查询字符串。只是移动数据存储有更好的选择。有关如何使用它的更多信息，请参阅此链接localStorage。 此外，请参阅此以了解您拥有的所有选项。现在，查看您的查询字符串：

platform=' + output.FolderName + '&sid=test

这可以很容易地变成一个对象。所以在锚标签的点击功能里面<li>，

$(document).on("click", "li a", function(e) {
  //stop default action.
  e.preventDefault();
  //take the href; Im assuming its page2.html?platform=outputFolder&sid=test
  var params = this.href.split("?");
  //now params[0] = page2.html
  //param[1] = platform=outputFolder&sid=test
  //set this in localStorage 
  localStorage["page2params"] = param[1];
  //change to page2.html
  $.mobile.changePage("page2.html", { transition : slide });  
})

然后，在 page2.html 的pageinit方法中，您可以检索它以供您使用：

//assuming you have a page with page2 as id in page2.html
$(document).on("pageinit", "#page2", function() { 
   var params = localStorage["page2params"]; 
   //do anything you want with params. 
});
于 2013-07-31T18:15:25.337 回答