使用 jAM 页眉和页脚将非 jquery Mobile 页面加载到 jQM DOM

Question

我有一个 html 页面，我正在使用 jquery mobile 来创建一个具有多个具有 data-role="page" 属性的 div 的 Web 应用程序。每个页面都有一个固定的页眉和页脚，通过页面转换保持一致。

但是，我想将另一个不是在 jquery-mobile 框架中构建但在同一目录中的 html 页面加载到 DOM 中，并在该页面上显示持久的、固定的页眉和页脚。

这可能吗？我查看了使用 $mobile.changePage() 和 $mobile.loadPage() 的 jquery Mobile 文档，但并不清楚如何实现它。

到目前为止，我有这个（根据@Jack 的说明进行编辑）：

HTML

    <div data-role="page" id="dog_bars">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Dog About Town</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link">
                <h2>303 Bar &amp; Grill</h2>
                <p>303 W. Davis St., Dallas</p>
        </a></li>
            </ul>
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->          
</div>


<!-- page to be loaded into -->

<div data-role="page" class="content_page" id="external_page">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Casual Dining</h1>
    </div><!-- end header -->
    <section data-role="content" class="content" id="external">

    </section>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>                    
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->
</div><!--end page-->   

jQuery

$(document).on('pageinit'(function() {
$("#external").load("external_page.html").trigger("create");
}));

目前，单击该链接可以很好地加载带有页眉和页脚的#external_page，但不会加载external_page.html 的内容。 #external_page 的部分仍然是空的。

想法？

Answer 1

您应该能够使用 jQuery 的 load 加载外部页面，然后将其包装在带有 data-role="page" 的 div 中，并带有适当的页眉/页脚，将其附加到 DOM，然后触发 create event初始化页面。或者，您也可以在第一页上准备一个页面包装器（带有data-role="page" 的div），然后将外部页面的内容插入其中（您现在尝试这样做的方式）。

查看您当前的 JavaScript，.on 的语法有点偏离，并且缺少一个逗号。

使用您的标记，您应该能够执行以下操作

<div data-role="page" id="dog_bars">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
        <h1>Dog About Town</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-filter="true">
            <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link">
                <h2>303 Bar &amp; Grill</h2>
                <p>303 W. Davis St., Dallas</p>
        </a></li>
            </ul>
    </div>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->          
</div>


<!-- page to be loaded into -->

<div data-role="page" class="content_page" id="external_page">
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header">
       <a href="#" data-rel="back" data-icon="back">Back</a> <h1>Casual Dining</h1>
    </div><!-- end header -->
    <section data-role="content" class="content" id="external">

    </section>
    <div data-role="footer" data-id="bestFooter" data-position="fixed">
        <nav data-role="navbar">
            <ul>                
                <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li>
                <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>                    
                <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>                    
            </ul>            
        </nav> 
    </div><!-- end footer -->
</div><!--end page-->   


    <script type="text/javascript">
        $(document).on('pageinit', '#dog_bars', function () {
             //you can probably leave out the trigger('create') since the wrapper
             //is already part of the DOM and JQM should enhance it
            $('#external').load("external_page.html").trigger("create");
        });
    </script>

external_page.html

<!DOCTYPE >
<html >
<head>
    <title></title>
</head>
<body>
    <div id="pageWrapper">
        <p>Some test text</p>
        <input type="text" />

        <select>
            <option value="value">Option1</option>
            <option value="value2">Option2</option>
        </select>

    </div>
</body>
</html>