Question

我是JQuery的新手，并且有一个项目可以创建一个小型的webapp，我可以使用我的手机。我已阅读以下帖子https://stackoverflow.com/a/14148550/2943045关于MultiHTMLPage和MultiPage之间的区别，并决定采用多页面模板。不过，我想在独立的HTML文件中存储公共部分（标题，导航栏，页脚等），所以我试着在每个页面加载时生成它们。

我做得对吗？
我遇到了右侧面板（id = options）属性的问题没有正确应用（在我看来左侧面板属性而是应用）。

现在代码：

的index.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>

左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>

右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>

先谢谢你们的帮助和建议，

Answer 1

我热衷于从外部文件加载页面内容。当使用jqm，handlebars和ember实现混合移动应用程序和Web应用程序时，我遵循了类似的方法。我会提供一些有关我所做的事情的信息，这可能会对您有所帮助。

1. 我不仅保留了外部文件中常用的页面部分，还保留了模板/页面的内容。您可以将部分或全部页面内容存储在单独的文件中。然后你可以懒得加载它们或者只是在开始时加载它们。

2. 模板/页面代码/ html的加载发生在一个单独的js文件的开头。不需要使用与加载外部数据相关的逻辑来混乱主页面，尤其是这会随着你的网页增加而增加。

3. 从外部文件检索的数据存储在变量中。特别是在我的情况下，它被移交给ember-handlebars模板数据结构，用于在运行时保存所有模板。您可以在您的情况下应用它，不需要或潜在的问题，请求每次访问页面时都会调用 pagebeforeshow 上所有页面的数据。应该检索一次数据，并根据需要多次使用。因此，一旦从外部文件中检索数据，请尝试将它们存储在数据结构中，即关联数组。然后，您可以随时在任何页面上附加html。您可以编写一个使用 pagebeforeshow 回调的通用代码来检查当前页面并附加已存储的数据。这样一切都会更快，更顺畅。

通常，具有模板/页面内容的单独文件为您提供了很多灵活性，例如易于维护，重用能力，减轻主页，延迟加载内容，替换实现。

最后一点与您尝试追加的属性相关，我认为最好将它们放在jqm代码中，而不是尝试动态追加它们。我没有看到这样做的好处。您的代码会有一些开销和复杂性，尤其是当您的页面增加时，实际上无法获得任何收益。

[JQuery Mobile]多页面模板，包含外部HTML文件中的常用部分

1 个答案: