0

我对 JQuery 很陌生，并且有一个项目来创建一个小型 web 应用程序，我主要可以在我的手机上使用。我已经阅读了以下关于 MultiHTMLPage 和 MultiPage 之间区别的帖子https://stackoverflow.com/a/14148550/2943045 ，并决定使用多页模板。不过，我想将公共部分（页眉、导航栏、页脚等）存储在独立的 HTML 文件中，所以我尝试在每个页面加载时生成它们。

  1. 我做对了吗？

  2. 我在使用右侧面板时遇到问题（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>

页眉.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>

左面板.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>

页脚.html

<h4>Page Footer</h4>

提前感谢各位大侠的帮助和建议，

4

1 回答 1

0

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

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

2.模板/页面代码/html的加载发生在一个单独的js文件的开头。无需将与加载外部数据相关的逻辑弄乱主页面，尤其是随着页面的增加，这会增加。

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

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

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

于 2013-10-31T22:32:06.113 回答