0

jqmobileアプリの.trigger（'create'）メソッドで奇妙な問題が発生しています。

サイト全体で共有され、再利用されるページを作成しようとしています。

これが私のindex.htmlです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>phonegap & jquery mobile boilerplate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile.structure.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.theme.css"/>
    <script>
        var userAgent = navigator.userAgent + '';
        if (userAgent.indexOf('iPhone') > -1) {
            document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
            var mobile_system = 'iphone';
        } else if (userAgent.indexOf('Android') > -1) {
            document.write('<script src="js/lib/cordova-android.js"></sc' + 'ript>');
            var mobile_system = 'android';
        } else {
            var mobile_system = '';
        }
    </script>
    <script src="js/lib/jquery.js"></script>
    <!-- your scripts here -->
    <script src="js/app/app.js"></script>
    <script src="js/app/bootstrap.js"></script>
    <script src="js/lib/jquery.mobile.js"></script>
    <script src="js/globals.js"></script>
    <script src="js/logged_in.js"></script>
</head>
<body>
<div data-role="page">
    <div id="headerDiv" data-role='header'><a href="index.html" data-icon="home">Home</a>

        <h1>Jubilee Distributors</h1>
        <a href="login.html" id="logged_in" data-icon="home">Login</a></div>
    <div id="navDiv"></div>
    <div data-role="content">Blah Blah
    </div>

    <div id='footerDiv' data-role="footer"></div>

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

これが私の共有nav.htmlです：

<div data-role='navbar'>
    <ul>
        <li><a href="orders.html">Orders</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="products.html">Products</a></li>
    </ul>
</div>

dom readyで、globals.jsファイルで以下を実行しています。

$(document).bind("mobileinit", function () {
    jQuery.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

$(function () {
    $('#navDiv').load('shared/nav.html').trigger('create');
    $('#footerDiv').load('shared/footer.html').trigger("create");
});

htmlはdivに読み込まれますが、トリガーはスタイリングのように何もしていないようです。何か足りないものはありますか？

乾杯、

4

1 に答える 1

0

これを試してください。うまくいかない場合は、別のことを試してみます。

次のように、jquerymobileの前にglobals.jsを配置します。

   <script src="js/globals.js"></script>
   <script src="js/lib/jquery.mobile.js"></script>
   <script src="js/logged_in.js"></script>

それでもうまくいかない場合は、最後の関数を次のように書き直してください。

$(function () {
    $('#navDiv').load('shared/nav.html', function(){$(this).trigger('create')});
    $('#footerDiv').load('shared/footer.html', function(){$(this).trigger('create')});
});

そうすれば、jQMが拡張される前に、ファイルが完全にロードされてDOMに挿入されるまで待機します。

于 2012-11-27T00:39:01.977 に答える