Open external HTML snippet as popup in jquery mobile

Question

ok I am a bit rusty with jquery and new to jquery mobile so go easy on me ;). Ok I am creating a mobile website with jquery mobile and it has a lot of pages so rather than keep all the pages in one large multi-page template I have them in seperate page templates. I have a menu button that when clicked a popup appears with a listview menu in it, this works but I have to put the menu in every page template but I would rather just keep the menu in its own html file or even just somewhere in the dom that is outside the jquery mobile page structure so that I dont have to repeat the code in each page template.

How to I load the menu into the popup when its located in its own file? Failing that how do I load a div into that popup that is not inside a jquery mobile page?

My button:

   <a href="#main-menu" data-rel="popup">Menu</a>

my listview menu html:

 <div data-role="popup" id="main-menu">
        <ul data-role="listview" data-divider-theme="b" data-inset="true">
            <li data-role="list-divider" role="heading">
                Menu
            </li>
            <li data-theme="c">
                <a href="#how-it-works" data-transition="slide">
                    How it Works
                </a>
            </li>
            <li data-theme="c">
                <a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
                    Order Now
                </a>
            </li>
            <li data-theme="c">
                <a href="#faq" data-transition="slide">
                    FAQ
                </a>
            </li>
            <li data-theme="c">
                <a href="#help" data-transition="slide">
                    Help
                </a>
            </li>
            <li data-theme="c">
                <a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
                    Support
                </a>
            </li>
            <li data-theme="c">
                <a href="http://www.backuptoweb.co.uk/" data-transition="slide">
                   Main Website
                </a>
            </li>
        </ul>
 </div>     

Answer 1

从一般意义上讲，这是将外部文件中的html加载到div中的方法，除此之外，我不确定您到底要做什么。

$('#myDiv').load('somepath/somefile.html');

Answer 2

I have the exact same problematic, I have written something that displays the popup but partially renders the CSS [edit] a few more tries and I was able to make it render CSS perfectly:

$('[data-role=page]').live('pageshow', function (event, ui) {

  $('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
    $('#'+event.target.id).find('[id=main-menu]').trigger('create');
  });

});

Btw your main html page should contain the div declaration:

<div data-role="popup" id="main-menu"></div>
<a href="#main-menu" data-rel="popup">Menu</a>

And your menu.html should contain only what's inside the div:

<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>