0

这一直困扰着我一段时间，所以如果可以，请提供帮助。

所以我从空页开始：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css'>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js'></script>
</head>
<body>

</body>
</html>

</body>
</html>

然后将 jqm 页面注入 html ：

$('body').append("<div id='index' data-role='page'><div data-role='header'><h1>Page Title</h1></div><!-- /header --><div data-role='content'><ul data-role='listview'><li>test</li><li>test</li><li>test</li></ul><p>Page content goes here.</p></div><!-- /content --><div data-role='footer'><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page -->")

最后，我将重新生成/刷新此页面的标记：

$("body").enhanceWithin()

问题是我如何以编程方式转换到此页面，因为 $.mobile.navigate('#index') 和 $.mobile.changePage('#index') 似乎都没有完成这项工作？

 $(":mobile-pagecontainer").pagecontainer("getActivePage")

返回

对象[div#index.ui-page]

 $(':mobile-pagecontainer').pagecontainer('change', '#index')

返回

对象[body.ui-mobile-viewport]

但是索引页面仍然隐藏在视图中.....

如您所见，我正在使用 jquery.mobile-1.4.0-rc.1，请帮助！

4

1 回答 1

3

解决方案

这就是使用 jQuery Mobile 的方法：http: //jsfiddle.net/Gajotres/3eHGj/

Javascript：

$(document).ready(function() {    
    $('body').append("<div id='index' data-role='page'><div data-role='header'><h1>Page Title</h1></div><!-- /header --><div data-role='content'><ul data-role='listview'><li>test</li><li>test</li><li>test</li></ul><br><p>Page content goes here.</p></div><!-- /content --><div data-role='footer'><h4>Page Footer</h4></div><!-- /footer --></div><!-- /page -->")
    window.location.hash = 'index';
    $.mobile.initializePage();
});

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).on("mobileinit",function() {
                $.mobile.autoInitializePage = false;
            });        
        </script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>

    </body>
</html>

解释

没有初始页面$.mobile.navigate('#index')也$.mobile.changePage('#index')不会工作。这些方法要求原始页面存在，然后应用程序才能转移到另一个页面。

于 2013-11-12T13:06:35.503 回答