在jQuery Mobile的和PhoneGap的创建模板/持续性页眉/页脚模板在jQuery Mo

2019-05-13 10:17发布

站内文章 / 移动开发

10 0

祖国的老花朵

女 | 书童

私信

我潜入写作与jQuery Mobile的/ PhoneGap的移动应用。我使用这个示例模板开始从，它使用HTML / JS创建页面。而不是把所有的<page>在一个单一的HTML文件标签，他得到了它分裂，以便更容易编辑。

因为我将有一个单独的文件每一页，什么是对包括tempated页眉/页脚的最佳方式？ 你需要整个footer->导航栏代码复制并粘贴到每个HTML页面中我只看到它。这似乎并不像它应该是。例如，如果你想改变一个菜单项，你需要进入每一个页面，并改变它。

那是什么，我错过了解决方案？

也许我只是不理解jQuery Mobile的。例如，他们用他们的文档的侧边栏 - 是侧边栏的代码复制并粘贴到每个网页？这是没有意义的。这是同样的想法，因为我在这里问关于页脚的问题。

http://jquerymobile.com/test/docs/pages/page-cache.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-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">

而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>');
}

Answer 1:

我一直想现在就解决这个问题了几天，我已经得到了非常接近的解决方案。我用下面的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>

我已经创建了以下功能加载用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;
}

所述.trigger('create'); 和.navbar(); 是保持JQM造型正确所需的方法，但是，还是有一个小虫子。菜单的位置（这是使用CSS顶端设置：... PX）有时是不正确和移动自身到第一轻敲后的正确位置。真的非常接近，但！

编辑：通过设置#footer到position: fixed; 我上面提到的小错误不见了。此外，很容易作出这样的计算方法top为（单位：像素） #footer ，如果引起位置top值由JQM不正确。

Answer 2:

事情是这样的：

function getText() {
    //return footer text here
}


$("div:jqmData(role='page')").live("pagebeforecreate",function() {
    // get find the footer of the page
    var $footer =$(this).page().find('div:jqmData(role="footer")')
    // insert it where you want it... 
}

你可以只定义了gettext的作用=页脚，只是检查，看看它的定义......如果不是那么添加它。

Answer 3:

如果你真的想正确地做到这一点，你需要寻找到像胸或JavascriptMVC一个js框架。

在JMVC的应用程序，你可以从任何观点做到这一点：

<div data-role="page">
    <%== $.View('./header.ejs') %>
    <div data-role="content">
    ...
    </div>
    <%== $.View('./footer.ejs') %>
</div>

jQuery Mobile的真的只有渐进标记增强和造型为移动设备非常有用。对于实际的MVC部分，你需要一个MVC框架。

为jQuery Mobile的例子也多是面向建立其因为他们获取从服务器页面移动网站假设你的代码重用正在发生的服务器端。一个PhoneGap的应用程序是一个整体诺特尔野兽，因为你会被产生的飞行或从本地静态文件这些页面。这是MVC框架进来，你会使用控制器，视图，视图助手，和模型类来建立你的网页。您将所有到这一点的jQuery移动通过听取pagebeforeshow事件的JQM文档页所示脚本的网页

Answer 4:

我们还没有找到一个很好的办法做到这一点还没有任何。所以我们实际上是在我们自定义的js文件动态处理这个。寻找收盘容器 - 然后动态地追加页脚中的最后一个内容股利后关闭。

Answer 5:

取决于你如何加载相应的页面。

如果您使用rel =“外在” - 没有AJAX，每一页将完全重新加载。

如果使用常规的JQM - AJAX，JQM将抓住页面，并将其连接到现有的DOM。您的第一个页面视为你的“锚”页面，所有的后续页面添加/删除。

在第二种情况，你可以指定数据追加到所有页=“真”上你想拥有的每个页面上的元素属性。

这时只听相应的事件（pagebeforeshow？）和真实上映之前，上述标签的元素添加到新的一页。这样的元素将只需要在第一页上的设置，然后自动被添加到任何后续页面中被拉并添加到DOM。

我期待这个，现在有一个登录表单，我需要登录以外的每一页上，并要避免重复输入＃someID结束了。

编辑-可能的解决方案

把第一页上的各个元素，并添加独特的属性，就像这样：

 <div data-role="navbar" data-unique="true" data-unique-id="log">
     // full navbar
 </div>

所有其他网页刚刚得到的唯一元素容器

<div data-role="navbar" data-unique="true" data-unique-id="log"></div>

然后使用这个脚本：

$('div:jqmData(role="page")').live('pagebeforehide', function(e, data) {

    //  check page you are leaving for unique items 
    $(this).find('div:jqmData(unique="true")').each(function(){

         // more or less 1:1 stickyFooter
         var uniqueID = $(this).jqmData("unique-id"),
             nextPage = data.nextPage,
             nextUnique = nextPage && nextPage.find( "div:jqmData(unique-id='"+uniqueID+"')" ),
             nextMatches = nextUnique.length && nextUnique.jqmData('unique-id') === uniqueID;

         // if unique items on previous and new page are matching
         if ( uniqueID && nextMatches ) {
            nextUnique.replaceWith( uniqueID );
            $(this).jqmData("unique-id").empty();
            }
         });
     });

当然，这将意味着你需要在每一页上唯一的容器。但随后你只需携带它一起，你通过应用程序遍历内容。应该为我工作，避免具有相同的登录表单的DOM内2+倍。

另外，您将可以自由地修改它例如内容添加活动类。

Answer 6:

Don't use pageinit, the events that you should listen for are pagecreate and pageshow, pagecreate gets called the first time a page is loaded, but not when you navigate back to the page, e.g. on back button. Whereas pageshow fires everytime a page is shown, so just bind a live listener to the pageshow event for every page where you add your footer (assuming your footer may change, otherwise use pagecreate).

I have a longer example that shows you how to bind to the event properly in another question: https://stackoverflow.com/a/9085014/737023

And yes a great solution is just to use a PHP/CF include, which is what I use instead of JS.

EDIT My bad, seems pageinit is now used instead of pagecreate (see here), but it still stands that pageshow fires every time a page is shown - so you can use those as you need

文章来源: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap