使用 PageContainer 动态加载面板答案

【问题标题】：Dynamic load Panel with PageContainer使用 PageContainer 动态加载面板
【发布时间】：2016-07-06 20:28:02
【问题描述】：

我知道这个问题已经被问过好几次了，但我想为所有页面加载一个动态面板，但它不起作用。有时css样式未加载或面板未打开.. 有什么建议？ ;(

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css"
          href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
    <link rel="stylesheet" type="text/css"
          href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="css/own.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript"
            src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript">
        $(document).one('pagebeforecreate', function () {


            $.mobile.pageContainer.find("div[data-role=page]").each(function () {
                var panelHtml = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
                });
                $(this).append(panelHtml);
                $("#panel_" + this.id).panel();
                $("#panel_" + this.id).panel().enhanceWithin();
                $("#panel_" + this.id).enhanceWithin();
            });

        });
    </script>
    </head>
    <body>
    <div data-role="page" id="page1">
    <div data-role="content">
        <h2>Content</h2>
        <a href="#panel_page1">Open Panel</a>
    </div>
    </div>
    <div data-role="page" id="page2">
    <div data-role="content">
        <h2>Content</h2>
    </div>
    </div>
    <div data-role="page" id="page3">
    <div data-role="content">
        <h2>Content</h2>
    </div>
   </div>
   </body>
   </html>

我的面板.html

<ul data-role="listview" data-theme="g" data-divider-theme="g">
<li data-role="list-divider">Panel</li>
<li><a href="#searchPage">Page1</a></li>
<li><a href="#downloadPage">Page2</a></li>
<li><a href="#playerPage">Pag3</a></li>
</ul>

【问题讨论】：

如果您希望每个页面都使用相同的面板，您是否考虑过外部面板：demos.jquerymobile.com/1.4.5/panel-external
另外，在 beforecreate 的代码中执行此操作意味着您不需要增强面板：jsfiddle.net/ezanker/uuffrfz6

标签： javascript jquery html css jquery-mobile

【解决方案1】：

感谢您的提示....one('pagebeforecreate',

在所有页面中加载相同的页眉和/或页脚并不容易。

找到合适的活动真的很难。

我稍微修改了你的解决方案，它更简洁，可以更快。

$(document).one('pagebeforecreate', function () {

    $.get('header.html').success(function(htmlHeader){
        $.get('footer.html').success(function(htmlFooter){

            $(htmlHeader).prependTo($('[data-role="page"]'));
            $(htmlFooter).appendTo($('[data-role="page"]'));
            $('body').enhanceWithin(); // All pages in once
        });
    });
});

【讨论】：

【解决方案2】：

@感谢ezanker
- 我不知道存在外部面板，谢谢
- 我在 jsfiddle 上对其进行了测试，它有效，但我没有在本地工作，我不知道为什么

这就是我的解决方案
当您知道存在外部面板时，它有点傻，但是在这里

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css"
          href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
    <link rel="stylesheet" type="text/css"
          href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="css/own.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script type="text/javascript">
        $(document).one('pagebeforecreate', function () {

            $.mobile.pageContainer.find("div[data-role=page]").each(function () {
                var id = this.id;
                var html = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
                    $("#" + id).append(html);
                    $("#" + id).enhanceWithin();
                });
            });

            $.mobile.pageContainer.find("div[data-role=page]").each(function () {
                var id = this.id;
                var html = $('<div data-role="header">').load("templates/header/header.html", function () {
                    $("#" + id).prepend(html);
                    $("#" + id).enhanceWithin();
                });
            });

            $.mobile.pageContainer.find("div[data-role=page]").each(function () {
                var id = this.id;
                var html = $('<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">').load("templates/footer/footerUp.html", function () {
                    $("#" + id).append(html);
                    $("#" + id).enhanceWithin();
                });
            });

            $.mobile.pageContainer.find("div[data-role=page]").each(function () {
                var id = this.id;
                var html = $('<div data-role="popup" id="popup_' + this.id + '" data-theme="a" class="ui-corner-all">').load("templates/popup/type_1/popup.html", function () {
                    $("#" + id).append(html);
                    $("#" + id).enhanceWithin();
                });
            });
        });
    </script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-role="content">
        <h2>Content</h2>
        <a href="#panel_page1">Open Panel</a>
        <a href="#" onclick='$("#popup_page1").popup("open")'>Open PopUp</a>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="content">
        <h2>Content</h2>
        <a href="#panel_page2">Open Panel</a>
        <a href="#" onclick='$("#popup_page2").popup("open")'>Open PopUp</a>
    </div>
</div>
<div data-role="page" id="page3">
    <div data-role="content">
        <h2>Content</h2>
        <a href="#panel_page3">Open Panel</a>
        <a href="#" onclick='$("#popup_page3").popup("open")'>Open PopUp</a>
    </div>
</div>
</body>
</html>

【讨论】：