jQuery mobile - Panels with multiple internal pages

问题

I want to be able to use a sliding panel, and when the user selects an option from within the sliding panel, it to load a new page found internally within same html file. So far, I have this:

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

This code works, but as you'll notice I have to include the slide menu in each iteration. I'd like to be able to write the panel portion just once and have it open on each page. Is that possible?

I've already tried jQuery.load() and for some reason it won't work, despite it being on the same server so there shouldn't be a cross-domain issue. It could be an issue with the GoDaddy server I'm using, but I can't be sure.

I'd like to be able to do the same thing with the header and footer too, as they won't be changing across pages either.

回答1:

You can use an external panel for this: http://demos.jquerymobile.com/1.4.5/panel-external/

Pull your panel out of the individual pages and place it as a child of the body element. Make sure you apply a data-theme to it, as it has no container to inherit themes from.

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

Then on document ready, initialize the widget as a panel and also initialize the listview within it:

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

Here is a working DEMO

回答2:

You can use an external panel:

Jquery Mobile External panel demo

来源：https://stackoverflow.com/questions/28920240/jquery-mobile-panels-with-multiple-internal-pages

标签

jquery

html

css

jquery-mobile