1

你好！！

我有一个问题，我在任何地方都没有找到任何解决方案......

所以，我有一个链接到内部 div 页面（#page2）的按钮，列表很长，我需要在转换开始之前“加载”内部 div 页面......

这是一个非常简单的示例代码：

<!-- Page #1 -->
<!-- ... -->
        <div data-role="content">    
        <p>View internal page: <a href="#page2">goto Page 2</a></p>
         </div>
<!-- ... -->
    <!-- Start of Page #2 -->
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Bar</h1>
        </div><!-- /header -->
        <div data-role="content">   
    <ul><li>...</li>
    <li>...</li>
    <!-- About 300+ of: <li>...</li> -->
    </ul>
    </div>

所以，点击#page2的链接应该会给你jquery mobile“正在加载......”并且在它“加载”内容之后应该开始转换..我在同一个页面中这样做的原因是我插入到页面#2 div 动态的所有 facebook 好友（长列表），从点击到转换开始需要很长时间......

这是我需要的一个很好的例子： http ://www.mpdtunes.com 只需转到：现场演示->登录->单击艺术家...

欢迎任何建议！

非常感谢！！！！

4

1 回答 1

2

基本上你想这样做：

  1. 使用这样的按钮：

    <a href="#" id="to-page2">goto Page 2</a>

  2. 给它添加一个点击事件：

    $(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#to-page2', function(){ 
        // Load internal page content
    });       
});

    #index包含页面的按钮的 id在哪里。

  3. 显示加载动画 aka ajax loader

    setTimeout(function(){
    $.mobile.loading('show');
},1);

    需要SetTimeout是因为 web-kit 浏览器存在动态触发的 ajax 加载器的问题。

  4. 加载您的内部页面内容。现在，如果您使用 1 个 HTML 页面和多个页面，您可以立即将新内容附加到列表视图。这是因为 listview 已经加载到 DOM 中。如果您使用多个 HTML 页面，则将页面内容存储到localstorage变量中。

  5. 再次使用 setTimeout 隐藏 ajax 加载程序。

  6. 开始页面转换：

    $.mobile.changePage("#page2");

  7. 如果您有 1 个 HTML 页面，那么就是这样。如果您已将页面内容存储在本地存储中，那么您将需要在第二个页面的 pagebeforeshow 事件期间加载它，如下所示：

    $(document).on('pagebeforeshow', '#page2', function(){ 
    // Load internal page content from local-storage and append it
});

  8. 最后一步是列表视图页面内容初始化。对于那看我的其他答案，只需寻找有关列表视图的主题。

于 2013-05-23T14:46:47.210 回答