jquery - [JQuery Mobile] 外部 HTML ファイルに共通部分を含むマルチページテンプレート

Question

私はJQueryを初めて使用し、主に携帯電話で使用できる小さなWebアプリを作成するプロジェクトを持っています。MultiHTMLPage と MultiPage の違いに関する次の投稿https://stackoverflow.com/a/14148550/2943045を読み、マルチページテンプレートを使用することにしました。それにもかかわらず、独立した HTML ファイルに共通部分 (ヘッダー、ナビゲーションバー、フッターなど) を保存したいので、ページの読み込みごとにそれらを生成しようとしました。

私はそれを正しくやっていますか？
右側のパネル (id=options) で問題が発生しました。属性が適切に適用されていません (代わりに左側のパネルの属性が適用されているようです)。

今コード：

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile Demos - Slide Panel</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <!--Demo source: http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html -->

<script>
$(document).on("pagebeforecreate", function() {

        $(document).on('pagebeforeshow', function() {
            var PageName = $.mobile.activePage.attr( "id" );
            console.log( "Opening " + PageName );

            console.log('Set header');
            $("div[data-role='header']").attr( {
                'data-theme':'d',
                'data-position':'fixed'
            });
            $.get( "header.html", function( data ) {
                var HDiv = $("div[data-role='header']");
                HDiv.html(data);
            });

            console.log('Set left panel');
            $("div[data-role='panel'][id='nav-panel']").attr( {
                'data-position-fixed': 'false',
                'data-display': 'reveal',
                'data-theme': 'd'
            });
            $.get( "left-panel.html", function( data ) {
                var HDiv = $("div[data-role='panel'][id='nav-panel']");
                HDiv.html(data);
            });

            console.log('Set right panel');
            $("div[data-role='panel'][id='options']").attr( {
                'data-position-fixed': 'false',
                'data-display': 'overlay',
                'data-theme': 'd'
            });
            $.get( "right-panel.html", function( data ) {
                var HDiv = $("div[data-role='panel'][id='options']");
                HDiv.html(data);
            });

            console.log('Set footer on opened page');
            $("div[data-role='footer']").attr( {
                'data-theme': 'd'
            });
            $.get( "footer.html", function( data ) {
                var HDiv = $("div[data-role='footer']");
                HDiv.html(data);
                $("#"+PageName).trigger('pagecreate');/*Reload all styles*/
            });
        });

});


</script> 
    </head>
    <body>

        <div data-role="page" id="main" class="ui-responsive-panel">

                <div data-role="header" class="header"></div>


                <div data-role="content">
                    <h2>Page 1</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis blandit tellus id viverra. Maecenas mollis, quam et accumsan fermentum, erat sapien blandit eros, eu malesuada magna dolor sit amet felis. Vivamus ornare ante in mi aliquet viverra. Nam non massa eu lorem placerat mollis. Mauris bibendum, nulla non blandit iaculis, massa dui blandit tellus, id rhoncus felis libero in sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque imperdiet scelerisque mattis. Praesent vel pulvinar leo.</p>
                    <p>Morbi laoreet faucibus tempor. Praesent et enim nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam non diam vitae felis egestas aliquet imperdiet at tellus. Aliquam erat volutpat. Vestibulum auctor sodales lobortis. Morbi eget imperdiet metus. Ut id velit non ligula lacinia cursus in vitae risus. Nam pharetra ullamcorper quam sit amet dictum. Morbi egestas urna vitae leo porta, at tristique risus varius. Ut dictum lacus sed viverra eleifend.</p>
                </div><!-- /content -->


                <!-- left panel (menu) -->
                <div data-role="panel" id="nav-panel" class="left-panel" data-position="left"></div>
                <!-- /panel -->

                <!-- right panel (options)-->
                <style>
                    .userform { padding:.8em 1.2em; }
                    .userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); }
                    .userform label { display:block; margin-top:1.2em; }
                    .switch .ui-slider-switch { width: 6.5em !important }
                    .ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); }
                </style>
                <div data-role="panel" id="options" class="right-panel" data-position="right"></div>
                <!-- /panel -->

                <!-- Footer-->
                <div data-role="footer"></div><!-- /footer -->

        </div><!-- /page -->


        <!-- Start of second page: #Userpanel -->
        <div data-role="page" id="userpanel" data-theme="d" class="ui-responsive-panel">

                <div data-role="header"></div>

                <div data-role="content">   
                    <h2>Page 2</h2>
                    <p>Pellentesque at tristique diam. Aenean consectetur, ante in tincidunt tincidunt, ante ligula bibendum velit, ultricies rutrum metus dui vitae nibh. Nulla vestibulum sollicitudin metus eu mollis. Integer risus tellus, tempor ac ipsum sit amet, dapibus luctus nisl. Morbi consectetur ac justo eu suscipit. Vestibulum placerat, ante sed mollis dictum, risus leo ornare arcu, vel auctor turpis nisi eu felis. Sed purus nunc, faucibus et urna in, pretium molestie massa. Donec fermentum vehicula nunc. Etiam auctor gravida lectus ac ullamcorper. Morbi molestie nunc id turpis semper, porta placerat turpis accumsan. Donec vel accumsan purus. Nam facilisis, nulla a placerat mattis, ante ipsum gravida sapien, et volutpat elit mauris at odio. Nunc placerat libero non adipiscing interdum. Praesent in enim eget erat auctor sagittis at id lacus. Proin fringilla lorem vitae porttitor suscipit.</p>
                    <p>Nulla molestie tortor eu felis mattis, sit amet facilisis arcu congue. Suspendisse dictum turpis id tristique tempus. Praesent vulputate aliquam ante, a egestas risus suscipit et. Curabitur leo lorem, laoreet eu malesuada vel, congue id ligula. Phasellus facilisis risus risus. Mauris sed lectus ut risus dapibus consectetur. Nunc non elit arcu. Duis nibh leo, tempor ut accumsan molestie, mollis non justo. Nam in eros in neque pharetra eleifend id ut metus. In facilisis id mauris non cursus. Nunc vitae augue non elit vehicula elementum. Proin sapien massa, convallis et nibh a, convallis congue ligula. Phasellus feugiat, ipsum ac consectetur convallis, ligula tortor egestas quam, in adipiscing tortor arcu id felis.</p>
                </div><!-- /content -->

                <!-- left panel (menu) -->
                <div data-role="panel" id="nav-panel" class="left-panel" data-position="left"></div>
                <!-- /panel -->

                <!-- right panel (options)-->
                <style>
                    .userform { padding:.8em 1.2em; }
                    .userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); }
                    .userform label { display:block; margin-top:1.2em; }
                    .switch .ui-slider-switch { width: 6.5em !important }
                    .ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); }
                </style>
                <div data-role="panel" id="options" class="right-panel" data-position="right"></div>
                <!-- /panel -->

            <!-- Footer-->
            <div data-role="footer"></div><!-- /footer -->


    </body>
</html>

Header.html

<h1>My App</h1>
<a href="#nav-panel" data-icon="bars" data-theme="d" data-iconpos="notext">Menu</a>
<a href="#options" data-icon="gear" data-theme="d" data-iconpos="notext">Add</a>

left-panel.html

<ul data-role="listview" data-theme="d" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
    <li data-icon="delete" style="margin-top:13px;">
        <a href="#nav-panel" data-rel="close">Close menu</a>
    </li>
    <li data-filtertext="Home">
        <a href="#main">Home</a>
    </li>
    <li data-filtertext="User Panel">
        <a href="#userpanel">User Panel</a>
    </li>
    <li data-filtertext="Menu Item 2">
        <a href="#">Menu Item 2</a>
    </li>
</ul>

right-panel.html

<form class="userform">
    <h2>Options</h2>

    <div class="switch">
    <label for="status">Audio</label>
    <select name="status" id="slider" data-role="slider" data-mini="true">
        <option value="off">ON</option>
        <option value="on">OFF</option>
    </select>
    </div>

    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#options" data-rel="close" data-role="button" data-theme="d" data-mini="true">Cancel</a></div>
        <div class="ui-block-b"><a href="#options" data-rel="close" data-role="button" data-theme="d" data-mini="true">Save</a></div>
    </div>
</form>

footer.html

<h4>Page Footer</h4>

事前に助けとアドバイスをありがとうございました。

jquery - [JQuery Mobile] 外部 HTML ファイルに共通部分を含むマルチページ テンプレート

1 に答える 1

Related

Reference

jquery - [JQuery Mobile] 外部 HTML ファイルに共通部分を含むマルチページテンプレート