Question

你好！

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

所以，我有一个链接到内部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朋友（长列表），从Click中需要很长时间才能开始转换......

以下是我需要的一个很好的例子： http://www.mpdtunes.com 请转到：现场演示 - ＆gt;登录 - ＆gt;点击艺术家...

欢迎任何建议！

非常感谢!!!!

Answer 1

基本上你想要这样做：

使用这样的按钮：

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

向其添加点击事件：

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

#index 是包含页面的按钮的ID。

显示加载动画aka ajax loader
```
setTimeout(function(){
    $.mobile.loading('show');
},1);
```
需要
SetTimeout ，因为web-kit浏览器在动态触发的ajax加载器方面存在问题。
加载内部网页内容。现在，如果您使用包含多个页面的1个HTML页面，则可以立即将新内容附加到listview。这是因为listview已经加载到DOM中。如果您使用多个HTML网页，请将您的网页内容存储到 localstorage 变量中。
再次使用setTimeout隐藏ajax加载程序。
使用以下命令启动页面转换：
```
$.mobile.changePage("#page2");
```
如果您有1个HTML页面，那就是它。如果您已将页面内容存储在 localstorage 中，则需要在第二页的 pagebeforeshow 事件期间加载它，如下所示：
```
$(document).on('pagebeforeshow', '#page2', function(){ 
    // Load internal page content from local-storage and append it
});
```
最后一步是listview页面内容初始化。为了查看我的其他answer，只需查看有关listview的主题。

Jquery Mobile：转换前加载页面DIV

1 个答案: