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初始化页面。或者，您也可以在第一页上准备页面包装器（div data-role="page"），然后将外部页面的内容插入其中（现在尝试这样做的方式）。

查看您当前的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>

使用jQM页眉和页脚将非jqueryMobile页面加载到jQM DOM中

1 个答案: