【问题标题】：Data transition = Slide not working -dynamic list数据转换 = 幻灯片不工作 - 动态列表
【发布时间】：2013-07-31 17:03:45
【问题描述】：

我是 Jquery 移动版的新手。

当我导航到另一个页面时，我正在尝试获得滑动效果，例如以下代码中的 #display2。

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

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

所以如果我把 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');
                }
            });
        });

【问题讨论】：

标签： javascript jquery-mobile slide

【解决方案1】：

第 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 驱动导航的强大功能。
这将使部分加载、脚本加载变得容易，因为您只需将所有这些都引用一次。
页面之间的数据传输非常简单。您只需将所需的数据存储在全局变量或#page2 的data 属性中，然后在第二页的pageinit 或pageshow（或任何事件）中检索它.
过渡等将起作用。
不会刷新页面。

缺点

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

通过使用 rel=external

如您所见，rel=external 只能在绝对需要刷新页面时使用。它取决于用户的选择。如果a 标签被标记为rel=external，则意味着浏览器会将其视为外部链接，并会忽略jQuery Mobile 的ajax 导航系统。

在page 1中引用page 2的所有脚本

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

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

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

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

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

优势

您的转换将正常工作。
常用脚本不会被多次引用，因此加载速度更快。
查询字符串也可以使用

缺点

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

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

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

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

优势

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

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

之所以这么说，是因为查询字符串是过时的技术，因为当时还没有办法存储到数据中。它们也不安全，因为用户可以看到您通过 URL 发送的数据。您必须考虑使用localStorage 之类的东西。我不是说你不能使用查询字符串。只是移动数据存储有更好的选择。 See this link for more info about how you can use this localStorage. Also, see this for all the options you have. 现在，查看您的查询字符串：

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. 
});

【讨论】：