Question

我希望能够使用滑动面板，当用户从滑动面板中选择一个选项时，它会加载在同一个html文件内部找到的新页面。到目前为止，我有这个：

      <!DOCTYPE html>
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <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-1.11.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <script type="text/javascript">
      $( document ).ready(function() {
          $("body").pagecontainer("change", "#Home");;
      }); 
      function navigate(page){
          //$.mobile.changePage("#" + page);
          $("body").pagecontainer("change", "#" + page);
      }
      </script>
      </head>
      <body>

      <div data-role="page" id="Bio">
        <div data-role="panel" id="bioPanel"> 
          <ul id="menu">
            <li onclick="navigate('Bio')">Bio</li>
            <li onclick="navigate('Media')">Media</li>
            <li onclick="navigate('Booking')">Booking</li>
          </ul>
        </div> 

        <div data-role="header">
          <h1>My Site</h1>
        </div>

        <div data-role="main" class="ui-content">
          <p>Biography</p>
          <a href="#bioPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
        </div>

        <div data-role="footer">
          <h1>My Site</h1>
        </div> 
      </div> 

      <div data-role="page" id="Media">
        <div data-role="panel" id="mediaPanel"> 
          <ul id="menu">
            <li onclick="navigate('Bio')">Bio</li>
            <li onclick="navigate('Media')">Media</li>
            <li onclick="navigate('Booking')">Booking</li>
          </ul>
        </div> 

        <div data-role="header">
          <h1>My Site</h1>
        </div>

        <div data-role="main" class="ui-content">
          <p>Media</p>
          <a href="#mediaPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
        </div>

        <div data-role="footer">
          <h1>My Site</h1>
        </div> 
      </div>

      <div data-role="page" id="Booking">
        <div data-role="panel" id="bookingPanel"> 
          <ul id="menu">
            <li onclick="navigate('Bio')">Bio</li>
            <li onclick="navigate('Media')">Media</li>
            <li onclick="navigate('Booking')">Booking</li>
          </ul>
        </div> 

        <div data-role="header">
          <h1>My Site</h1>
        </div>

        <div data-role="main" class="ui-content">
          <p>Booking</p>
          <a href="#bookingPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
        </div>

        <div data-role="footer">
          <h1>My Site</h1>
        </div> 
      </div>

      </body>
      </html>

此代码有效，但正如您所注意到的，我必须在每次迭代中包含幻灯片菜单。我希望能够只编写一次面板部分并在每页上打开它。这可能吗？

我已经尝试过jQuery.load（）并且由于某种原因它不会工作，尽管它在同一台服务器上，所以不应该是跨域问题。这可能是我使用的GoDaddy服务器的一个问题，但我无法确定。

我也希望能够对页眉和页脚做同样的事情，因为他们也不会在页面之间进行更改。

Answer 1

您可以使用外部面板：http://demos.jquerymobile.com/1.4.5/panel-external/

将面板拉出各个页面，并将其放置为body元素的子元素。确保将数据主题应用于它，因为它没有容器来继承主题。

<div data-role="panel" id="bioPanel" data-theme="a">
    <ul id="menu">
        <li><a href="#Bio">Bio</a>
        </li>
        <li><a href="#Media">Media</a>
        </li>
        <li><a href="#Booking">Booking</a>
        </li>
    </ul>
</div>

然后在文档就绪时，将窗口小部件初始化为面板，并初始化其中的列表视图：

$(function () {
    $("body>[data-role='panel']").panel().find("ul").listview();
});

这是一个有效的 DEMO

Answer 2

您可以使用外部面板：

Jquery Mobile External panel demo

jQuery mobile - 具有多个内部页面的面板

2 个答案: