如何在jquery mobile上添加外部面板

我试图在JQM 1.4.5上实现外部面板，但我没有成功在我的web应用上正确显示它。 JQM 1.4.5 doc about external panel
我的代码写在下面。如何在jquery mobile上添加外部面板

感谢您的帮助，
克莱门特

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div data-role="page" id="home"> 
 
     <div data-role="header"> 
 
     <a href="#mypanel" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all" data-ajax="false">No text</a> 
 
     </div> 
 
     <div role="main" class="ui-content"> 
 
     some content 
 
     </div> 
 
    </div> 
 
    <div data-role="page" id="contact"> 
 
     <div data-role="header"> 
 
     <a href="#mypanel" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all" data-ajax="false">No text</a> 
 
     </div> 
 
     <div role="main" class="ui-content"> 
 
     some other content 
 
     </div> 
 
    </div> 
 
    
 
    
 
    <div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a"> 
 
\t <div class="ui-panel-inner"> 
 
\t \t <ul data-role="listview"> 
 
\t \t \t <li data-icon="home"> 
 
\t \t \t \t <a id="menu-home" href="index.php#home">Home</a> 
 
\t \t \t </li> 
 
\t \t \t <li data-icon="user"> 
 
\t \t \t \t <a id="menu-account" href="#">Account</a> 
 
\t \t \t </li> 
 
\t \t \t <li data-icon="gear"> 
 
\t \t \t \t <a id="menu-settings" href="#">Settings</a> 
 
\t \t \t </li> 
 
\t \t \t <li data-icon="mail"> 
 
\t \t \t \t <a id="menu-contact" href="#contact">Contact</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div> 
 
    </div><!-- /mypanel --> 
 
    </body> 
 
</html>

来源

2015-07-20 Clement05

你需要提高的Java脚本的面板。在$(document).ready中写下如下代码：

$('#mypanel').enhanceWithin().panel();

来源

2015-08-24 08:06:55

好吧我试过了，它工作完美。感谢http://codepen.io/Clement05/pen/NGqxGM – Clement05

如何在jquery mobile上添加外部面板

回答

相关问题