Question

我尝试在JQM 1.4.5上实现外部面板，但我没有成功在我的网络应用程序上正确显示它。 JQM 1.4.5 doc about external panel
我的代码写在下面。

感谢您的帮助克莱门特

<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">
	<div class="ui-panel-inner">
		<ul data-role="listview">
			<li data-icon="home">
				<a id="menu-home" href="index.php#home">Home</a>
			</li>
			<li data-icon="user">
				<a id="menu-account" href="#">Account</a>
			</li>
			<li data-icon="gear">
				<a id="menu-settings" href="#">Settings</a>
			</li>
			<li data-icon="mail">
				<a id="menu-contact" href="#contact">Contact</a>
			</li>
		</ul>
	</div>
    </div><!-- /mypanel -->
  </body>
</html>

Answer 1

您需要在java脚本中增强面板。在$(document).ready中编写以下代码：

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

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

1 个答案: