问数据转换=幻灯片不工作的-dynamic列表
EN

Stack Overflow用户

提问于 2013-07-31 09:03:45

回答 1查看 1.7K关注 0票数 0

我刚开始使用Jquery手机。

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

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

如果我删除了rel=“外部”，我可以滑动，但在#display2 2(我将导航到的页面)上，查询字符串值将返回为null。

因此，如果我将rel=“外部”传递给#display2 2，但是幻灯片转换不起作用。如果删除re=，“外部”幻灯片可以工作，但查询字符串参数将返回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

Stack Overflow用户

发布于 2013-07-31 10:15:25

第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的#page2属性中，并在第二个页面的pageinit或pageshow (或任何事件)中检索数据。
过渡等将起作用。
将不会出现页面刷新。

缺点

如果这两个页面的HTML内容很大，将很难维护。

通过使用rel=external

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

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

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

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

因此，要改变这一点，您可以在page1.html的头中引用page2 2的脚本，以便当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 (推荐)中的数据-角色=页部分中的page2脚本

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

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

优势

与特定页面相关的脚本仅限于该页内。
过渡将有效。
查询字符串也能工作。

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

我之所以这么说是因为查询字符串是一种过时的技术，因为当时没有存储数据的方法。它们也是不安全的，因为用户可以看到通过URL发送的数据。您必须考虑使用类似于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. 
});