数据转换=幻灯片不工作 - 动态列表

时间：2013-07-31 17:03:45

标签： javascript jquery-mobile slide

我是Jquery mobile的新手。

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

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

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

所以如果我把rel =“external”，参数传递给＃display2但幻灯片转换不起作用。 如果我删除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');
                }
            });
        });

1 个答案:

答案 0 :(得分：0)

第1部分 - 为什么rel =外部工作＆amp;其他选择

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的{​​{1}}属性中存储您需要的数据，并在#page2或pageinit中检索它（或第二页的任何事件。
  • 转换等将起作用。
  • 没有页面刷新。

缺点

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

使用rel = external

正如您可能已经看到的那样，pageshow只能在绝对需要页面刷新时使用。它取决于用户的选择。如果rel=external标记标有a，则表示浏览器会将其视为外部链接，并忽略jQuery Mobile的rel=external导航系统。

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

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

  1. ajax会在page2.html中请求page1。
  2. 仅第2页的page2取自page2.html。
  3. <body>部分（可能包含您的脚本，可能包含您的查询字符串逻辑）将被忽略。

    4. 所以要更改它，你可以参考page1.html头文件中的page2脚本，这样当jQM的<head>系统拉出page2.html的ajax时，这些脚本就会被加载并准备好。

    body

    优点

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

    缺点

    • 如果两个页面的共同点非常少，那么您的第一页中最终会出现不需要的脚本。
    • 如果您有两页以上怎么办？如果你有10页怎么办？您会参考 <script src="jqm.js"></script> <script src="page1.js"></script> <!--page 2 scripts--> <script src="page2.js"></script> 中的所有10个页面的脚本吗？我不这么认为。

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

    当ajax将脚本带入页面时，这将带来脚本。这也适用于查询字符串。这看起来像这样：

    page1

    优点

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

    第2部分 - 查询字符串

    的替代方法

    我之所以这么说是因为查询字符串是过时的技术，因为当时没有办法存储数据。它们也不安全，因为用户可以看到您通过URL发送的数据。您必须考虑使用 <div data-role="page" id="page2"> <script src="page2.js"></script> <!--- your html--> </div> 之类的内容。我不是说你不能使用查询字符串。只是有更好的选择可用于移动数据存储。 See this link for more info about how you can use this localStorage. Also, see this for all the options you have.现在，查看您的查询字符串：

    localStorage

    这很容易成为一个对象。所以在platform=' + output.FolderName + '&sid=test 内的锚标签的点击功能中，

    <li>

    然后，在page2.html的$(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 }); }) 方法中，您可以检索它以供您使用：

    pageinit
相关问题
最新问题