帶有PageContainer的動態加載面板

我知道這個問題已被多次詢問過，但我想爲所有頁面加載動態面板，但它不起作用。有時CSS樣式不加載或面板不打開.. 有什麼建議嗎？（帶有PageContainer的動態加載面板

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

我panel.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>

來源

2016-07-06 ApfelPresse

如果你想在每一頁上相同的面板，你有沒有考慮外部的面板：http://demos.jquerymobile.com/1.4.5/panel-external/ – ezanker

另外，在beforecreate手段代碼做你不需要增強面板：https：//jsfiddle.net/ezanker/uuffrfz6/ – ezanker

謝謝你的提示... .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 
     }); 
    }); 
});

來源

2018-02-05 21:53:56 vvdb

@thanks到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>

來源

2016-07-07 13:32:03 ApfelPresse

帶有PageContainer的動態加載面板

回答

相關問題