1

我想要这个：使用 jquery mobile 和 phonegap 将 html 文件加载到 data-role=page 中：我的项目有很多带有独立页面的小 HTML 文件。

我用：

索引.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Inicio :: Autenticacion
        </title>
        <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
        <link rel="stylesheet" href="jsmobile/jquery.mobile-1.2.0.min.css" type="text/css">
        <script src="jsmobile/jquery.js" type="text/javascript"></script>
        <script src="jsmobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">


$(document).ready(function() {
  $('#boton').bind('click', function(event) {
    $.mobile.loadPage("Fichero/index.html",{pageContainer:$("#container1")});

  });
});

        </script>
    </head>
    <body>
        <div data-role="page" id="container0">
            <div data-role="content">
         <a  id="boton" >Change Page</a>
            </div>
        </div>


        <div  id="container1">
        </div>

    </body>
</html>

文件：Fichero/index.html

<div date-role="page" id="micro">
    <div data-role="header" >
        <h1>Test Heas</h1>
    </div><!-- /header -->
    <div data-role="content"  > 
     Test here..
    </div><!-- /content -->
    </div>

当用户单击更改页面链接时，我想从容器 1 中的 Fichero/index.html 加载 html 内容，但它不起作用。

它将内容加载到 DIV id="container1" 和 DOM 中，但不显示/刷新（就像隐藏一样）。

做一个简单的 html 文件外部加载和刷新 DOM 并显示 HTML 代码加载的方法是什么？

提前致谢。

4

1 回答 1

5

您的 html 与 jquery mobile 所需的结构不匹配，因此您什么也看不到。

任何应该可见的 html 都需要在 data-role="content" div 中，在 data-role="page" div 中

如果您只想加载外部 html，只需进行 ajax 调用（但我认为正确的 jQuery 移动方式在转换方面更好。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Inicio :: Autenticacion </title>
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#boton').bind('click', function(event) {
                $.get('Fichero/index.html').success(function(html) {
                    $('#container1').html(html);
                });

            });
        });

    </script>
</head>
<body>
    <div data-role="page" id="container0">
        <div data-role="content">
            <a  id="boton" >Change Page</a>

            <!--
            Place the Container here because
            jQuery Mobile data-role="page" defines a browser fullscreen page 
            (the dataroles are rules for formating a page and there can be only one visible page)
            -->
            <div  id="container1"></div>
        </div>
    </div>

</body>

于 2013-01-09T00:01:56.647 回答