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

时间: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}}属性中存储您需要的数据,并在#page2pageinit中检索它(或第二页的任何事件。
  • 转换等将起作用。
  • 没有页面刷新。

缺点

  • 如果两个页面的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