1

私はこれが欲しい: jquery mobile と phonegap を使用して html ファイルを data-role=page にロードする: 私のプロジェクトには、独立したページを持つ小さな HTML ファイルがたくさんあります。

私が使う：

index.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>

ユーザーが [ページの変更] リンクをクリックしたときに、container1 の Fichero/index.html から html コンテンツをロードしたいのですが、機能しません。

DIV id="container1" と DOM にコンテンツをロードしますが、表示/再表示されません (非表示のようです)。

単純な html ファイルの外部ロードを実行し、DOM を更新して HTML コードのロードを表示する方法は何ですか?

前もって感謝します。

4

1 に答える 1

5

HTML が jquery モバイルに必要な構造と一致しないため、何も表示されません。

表示する必要があるすべての 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 に答える