解决方案

Question

这是困扰我一段时间了所以请尽可能帮忙。

所以我从空白页面开始：

<!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()

问题是如何转换到此页面programaticaly，因为$ .mobile.navigate（'#index'）和$ .mobile.changePage（'#index'）似乎都没有完成这项工作？

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

返回

对象[DIV＃index.ui页]

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

返回

对象[body.ui移动视口]

然而，索引页面仍然隐藏在视图之外.....

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

Answer 1

解决方案

这是你用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') 都不会有效。这些方法要求在应用程序转移到另一个页面之前存在原始页面。

Jquery mobile 1.4导航到动态创建的页面

1 个答案:

解决方案

使用Javascript：

HTML：

解释