在 jQuery Mobile 和 PhoneGap 中创建模板化/持久页眉/页脚模板 [英] Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

问题描述

我正在研究使用 jQuery Mobile/PhoneGap 编写移动应用程序.我正在使用 这个示例模板 开始，它使用 HTML/JS 来创建页面.他没有将所有 <page> 标签放在一个单独的 html 文件中，而是将其拆分，以便于编辑.

由于我将为每个页面创建一个单独的文件，那么包含带模板的页眉/页脚的最佳方法是什么?我只在您需要复制和粘贴整个页脚的地方看到它->导航栏代码进入每个 HTML 页面.这似乎不应该是.例如，如果要更改一个菜单项，则需要进入每个页面并进行更改.

我缺少什么解决方案?

也许我只是不了解 jQuery Mobile.例如，他们用于文档的侧边栏 - 侧边栏代码是否复制并粘贴到每个页面上?那没有意义.这与我在这里提出的有关页脚的问题的想法相同.

http://jquerymobile.com/test/docs/pages/page-缓存.html

这就是我所得到的似乎不正确的东西(并且 $.live('pageinit') 不起作用).这个 HTML 是每个 HTML 页面上的内容:

<div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-固定淡入淡出 ui-fixed-inline" role="contentinfo" style="top: 58px;">

还有 JS

$.live('pageinit', function (event) {显示页脚()；});功能显示页脚(){$('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">' +'
'+'<li><a href="#" id="menuitem1" data-icon="custom">菜单项 1</a></li>'+'<li><a href="#" id="menuitem2" data-icon="custom">菜单项 2</a></li>'+'<li><a href="#" id="menuitem3" data-icon="custom">菜单项 3</a></li>'+'</ul>'+'</div>');}

解决方案

我已经尝试解决这个问题好几天了，我已经非常接近解决方案了.我使用以下 HTML:

<div data-role="page" id="page"><div data-role="header"><h1 id="title">标题</h1></div><!--/header --><div data-role="content" id="content"><p>正在加载...</p></div><!--/content --><div data-role="footer" id="footer" data-position="fixed"><div data-role="navbar" id="navbar">

</div><!--/footer --></div><!--/page -->

我创建了以下函数来使用 ajax 加载菜单/内容:

$(document).on('pageinit', "#page", function() {//例如: displayFooter();加载内容(主要")；加载菜单(默认")；});功能加载内容(位置){return $('#content').load("views/content/"+location+".html", function() {$(this).trigger('create');});}功能加载菜单(位置){$("#menu").remove();$("#navbar").remove();$("#footer").html('<div data-role="navbar" id="navbar">');$("#navbar").html('<ul id="menu"></ul>');$("#menu").load("views/menus/"+location+".html", function() { $("#menu").parent().navbar(); });返回真；}

.trigger('create'); 和 .navbar(); 是保持 JQM 样式正确所需的方法，但是，仍然存在一个小错误.菜单的位置(使用 css top: ...px 设置)有时不正确，并且在第一次点击后移动到正确的位置.不过真的很近！

通过将 #footer 设置为 position: fixed; 我上面提到的小错误消失了.此外，如果由 top 值引起的位置由JQM 不正确.

I'm diving into writing a mobile app with jQuery Mobile/PhoneGap. I'm using this sample template to start from, which uses HTML/JS to create the pages. Rather than have all the <page> tags in one single html file, he's got it split up so it's easier to edit.

Since I will have a separate file for each page, what's the best way to include the tempated header/footer? I've only seen it where you need to copy and paste the whole footer->navbar code into each HTML page. This doesn't seem like it should be. For example, if you want to change one menu item, you need to go into each page and change it.

What's the solution that I'm missing?

Maybe I'm just not understanding jQuery Mobile. For example, their sidebar they use for their docs - is that sidebar code copy and pasted onto each page? That doesn't make sense. It's the same idea as the question I'm asking here about the footer.

http://jquerymobile.com/test/docs/pages/page-cache.html

This is what I've got that doesn't seem right (and $.live('pageinit') isn't working). This HTML is what goes on each HTML page:

<div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">

And the JS

$.live('pageinit', function (event) {
    displayFooter();
});

function displayFooter() {
    $('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">' +
        '<ul>' +
        '<li><a href="#" id="menuitem1" data-icon="custom">Menu Item 1</a></li>' +
        '<li><a href="#" id="menuitem2" data-icon="custom">Menu Item 2</a></li>' +
        '<li><a href="#" id="menuitem3" data-icon="custom">Menu Item 3</a></li>' +
        '</ul>' +
        '</div>');
}

解决方案

I've been trying to tackle this problem for a few days now and I've gotten really close to the solution. I use the following HTML:

<body>
    <div data-role="page" id="page">

        <div data-role="header">
            <h1 id="title">Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="content">  
            <p>Loading...</p>
        </div><!-- /content -->

        <div data-role="footer" id="footer" data-position="fixed">
            <div data-role="navbar" id="navbar">
            </div>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

And I've created the following functions to load the menu/content using ajax:

$(document).on('pageinit', "#page", function() {
    // for example: displayFooter();
    loadContent("main");
    loadMenu("default");
});

function loadContent(location) {
    return $('#content').load("views/content/"+location+".html", function() { 
        $(this).trigger('create');
    });
}
function loadMenu(location) {
    $("#menu").remove();
    $("#navbar").remove();

    $("#footer").html('<div data-role="navbar" id="navbar">');
    $("#navbar").html('<ul id="menu"></ul>');

    $("#menu").load("views/menus/"+location+".html", function() { $("#menu").parent().navbar(); });

    return true;
}

The .trigger('create'); and .navbar(); are the methods required to keep the JQM styling correct, however, there's still one little bug. The position of the menu (which is set using css top: ...px) is sometimes not correct and moves itself to the correct position after the first tap. Really close though!

Edit: By setting #footer to position: fixed; the minor bug I mentioned above is gone. Also, it's easy to make a method that calculates the top (in px) for the #footer if the position caused by the top value by JQM is incorrect.

这篇关于在 jQuery Mobile 和 PhoneGap 中创建模板化/持久页眉/页脚模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！