2

DIVのすべてのページで「ナビゲーションバー」を繰り返す必要がありますか？または、複数ページのhtml内のすべてのページに1つのフッターのみを使用するソリューションはありますか？

 <div data-role="page" id="page11">
        <div data-role="header"> <h1>Home</h1> </div>

        <div data-role="content"> <h3>TEST</h3>
            <p> <a href="#dialog" data-rel="dialog" data-transition="pop" data-role="button">Dialogbox </a> </p>
        </div>

        <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

    <div data-role="page" id="page2">
        <div data-role="header"> <h1>Hilfe </h1> </div>
        <div data-role="content"> <h3>TEST </h3> </div>

         <div data-role="footer" data-id="foo1" data-position="fixed"> 
            <div data-role="navbar">
                <ul>
                    <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                    <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
                </ul>
            </div> 
        </div>
    </div>

どんなアイデアでもThx！

4

2 に答える 2

2

はい、navbar / footer/headerはすべてのpage-DOM-elementsに存在する必要があります。ただし、繰り返しを避けるために、クライアント側やサーバー側には多くのオプションがあります。このような状況では、常に何らかのテンプレートを使用することをお勧めします。

クライアント側では、ナビゲーションバーを<script>タグの下の<body>タグに配置できます。このスクリプトタグに一意のid属性を割り当て、次のようなJavaScriptを追加します。

テンプレートスニペット：

<script type="text/template" id="myFooterTemplateID">
    <div data-role="footer" data-id="foo1" data-position="fixed"> 
        <div data-role="navbar">
            <ul>
                <li> <a href="#page1" data-iconpos="top" data-icon="home">Start </a> </li>
                <li> <a href="#page2" data-iconpos="top" data-icon="help">Hilfe </a> </li>
            </ul>
        </div> 
    </div>
</script>

JavaScript：

jQuery('*[data-role="page"]').on("pagebeforecreate", function(e) {
    var page = jQuery(this);
    // please replace this part with a template engine ...
    var header = jQuery(jQuery("#myFooterTemplateID").html()); 

    // bind some events to the header's content here - if any
    // for example: 
    // header.find('.myButtonClass').bind('tap', onButtonClicked);

    // append to page
    page.append(header);
});

独自のライブラリを作成する代わりに、 Handlebars.jsまたはUnderscore-Templatesをチェックして、本番環境に対応したJSテンプレートを確認してください。

于 2012-10-04T19:53:40.780 に答える
2

いいえ、バージョン1.4.0などの新しいjqmバージョンでは、各ページDOM要素内にナビゲーションバーを含める必要はありません。

これは、すべてのページに表示され、page-elementsの外部に1回だけ含まれるナビゲーションバーの例です：http：//demos.jquerymobile.com/1.4.0/toolbar-fixed-persistent/

data-position="fixed"基本的には、ヘッダー/フッターに追加し、次のコマンドでツールバーを開始する必要があります。

$(function() {
    $( "[data-role='navbar']" ).navbar();
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});
于 2015-05-21T11:45:38.690 に答える