jQuery Mobile - 包含外部文件的页脚

Posted 2023-03-21

【中文标题】jQuery Mobile - 包含外部文件的页脚

【英文标题】：jQuery Mobile - Include Footer from External File

【发布时间】：2011-12-19 22:50:21

【问题描述】：

我想创建一个可供我的 jQuery Mobile 应用程序中的所有页面使用的共享页脚（例如 footer.html）。但是，在从外部文件加载 html 后，我找不到让 jQuery 刷新页脚导航栏中的样式的方法。之后的想法将不胜感激。

页脚.html：

<div data-role="navbar" class="CSS" data-grid="d" id="footerNav">
    <ul >
        <li ><a href="#" id="a" data-icon="custom"><div>a</div></a></li>
        <li ><a href="#" id="b" data-icon="custom"><div>b</div></a></li>
        <li ><a href="#" id="c" data-icon="custom"><div>c</div></a></li>
        <li ><a href="#" id="d" data-icon="custom"><div>d</div></a></li>
        <li ><a href="#" id="e" data-icon="custom"><div>e</div></a></li>
    </ul>
</div>

索引.html：

<div data-role="page" style="position: relative" data-theme="a" id="index">
    <div data-role="header">
        <div class="homebutton" onclick="location.href='default.html'">
            &nbsp;</div>
        <h1>
            EVENT CALENDAR</h1>
    </div>
    <div data-role="content">
        <p>
            This is a single page boilerplate template that you can copy to build you first
            jQuery Mobile page. Each link or form from here will pull a new page in via Ajax
            to support the animated page transitions.</p>
    </div>

    <div data-role="footer" class="CSO" data-position="fixed" id="footerDiv">

    </div>

    <script>
    $('#index').live('pageinit', function (event, ui) 
         $('#footerDiv').load('Shared/Footer.html');
         [Some code to refresh the footer so it gets redrawn by Jquery Mobile]  
    );
    </script>   

【参考方案1】：

假设其余代码有效：

$('#footerDiv').load('Shared/Footer.html').trigger("create");

【讨论】：

是最接近的最佳答案，但不完全正确。

【参考方案2】：

对我来说，我必须使用回调函数，并将其添加到我的 pageinit 事件中：

$(document).on('pageinit', function(event)
  $("#footerDiv").load('_footer.html', function()$(this).trigger("create"));
);

【讨论】：

谢谢。但它会删除我的所有内容并仅添加页脚。我只想附加页脚。你有什么想法吗？