1

これについてインターネットで見つけたすべてを試しましたが、まだ機能していません。

次のようなdivにhtmlコンテンツをロードする必要があるメインページがあります。

<div data-role="content" id="mainc">
</div>

問題は、jquerymobile css がコンテンツに適用されていないことです。作成イベントをトリガーする .load を試してみましたが、.html で試してみましたが、何も役に立ちませんでした。

(コンテンツは完全に読み込まれますが、jquery スタイルは適用されません)

$("#mainc").load(target, function () {
    $(this).trigger('create');
});

--

$('#mainc').load(target);
$('#mainc').trigger('create');

--

$.get(target, function(data) {
    $("#mainc").html(data);
    $('#mainc').listview('refresh');
});

など、まだ同じことをしています。

結果は次のとおりです。

ここに画像の説明を入力

4

1 に答える 1

2

説明:

通常、最初の読み込み方法は正しいですが、リストビューのみを読み込む場合は機能しないという問題が 1 つあります。しかし、もちろん回避策があります。

作業例:

index.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 src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
            $(document).on('pagebeforeshow', '#index', function(){ 
                $("#index").load("load.html", function() {
                    $(this).trigger("pagecreate");
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="index">

        </div>    
    </body>
</html>

load.html

<div data-theme="b" data-role="header">
    <h1>Index page</h1>
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->  
</div>

<div data-role="content">
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->  
</div>
于 2013-06-03T11:15:19.863 に答える