1

私がやりたいことは、navbar HTML マークアップを 1 か所にまとめることです (簡単に編集できるようにするため)。現在、私の index.html 本文の内容は次のようになっています。

<div data-role="page" id="SomePage">
    <div data-role="header">
        <h1>This is Page 1</h1>
    </div>
    <div data-role="navbar"></div>
</div>

ヘッダーで my ファイルを次のように呼び出しています。

<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 type="text/javascript" language="javascript" src="app.js"></script>

私のapp.jsファイルでは、ナビゲーションバーをロードしようとしている場所です。私はそれを2つの方法で試しました

最初：

var NavBar = function() {
$('div[data-role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

$(document).ready(function() {
    NavBar();
});

これにより、アプリがリンクを表示するページが表示されますが、リストスタイルのない通常の ul のようにスタックされます

私が試した2番目の方法は次のとおりです。

var NavBar = function() {
$('div:jqmData[role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

$(document).ready(function() {
    NavBar();
});

これにより、リンクがまったく表示されなくなります。

「navbar」を 1 か所にロードし、jQuery Mobile スタイルを使用する関数を作成するにはどうすればよいですか?

4

1 に答える 1

1

document readyと一緒に使用しないでください。jQuery Mobile通常、ページが にロードされる前にトリガーされますDOM。このトピックの詳細については、このARTICLEを参照するか、こちらを参照してください。

代わりに、適切なjQuery Mobileページ イベントを使用する必要があります。

動作する jsFiddle の例を作成しました。

$(document).on('pagebeforecreate', '#index', function(){       
    $('[data-role="navbar"]').html('<ul>' +
        '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
        '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
        '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
        '</ul>');
});
于 2013-03-20T15:30:28.940 に答える