jQuery Mobile中的持久标头

无法找到一种方法来为我的旧问题提供赏金，所以我重新发布它，因为它可能是一个错误。

简短版本：我希望PhoneGap + JQM应用程序中的持久标头在页面转换之间保持原位（从不移动），就像页脚可以设计的那样。

长版：首先，我是jQuery和JQM的新手，所以请指出我所犯的任何新错误。

我正在尝试在应用程序中的不同页面之间保留一个标题。 当用户在页面之间转换时，它必须像持久的页脚一样保持在原位。 使用data-role =“footer”data-id =“（某些一致id）”data-position =“fixed”来实现持久页脚。 它运作得相当好（随机故障，因为它错位，然后几秒后自动修复）。 有关我正在寻找的内容的更多信息，请参阅此处的“持久页脚”： http ： //jquerymobile.com/test/docs/#/test/docs/toolbars/docs-footers.html

并在下面的链接中查看持久页脚的示例。 了解如何选择页脚中的项目转换为全新页面，但页脚不会移动： http ： //jquerymobile.com/test/docs/#/test/docs/toolbars/footer-persist-a.html

现在我正在尝试做同样的事情，但我希望它在应用程序的顶部而不是底部。 我尝试过以下的事情：

• 将页脚移动到页面顶部（不知道jQuery中要捕获的标记。尝试使用几个jQuery类的div。（jQuery类），但没有一个工作。我使用FireBug来确定它是“顶级”CSS属性需要改变。

每页上的HTML：

JavaScript：

 $('div.ui-footer').css('top', '0px'); $('div.ui-footer-fixed').css('top', '0px'); $('div.fade').css('top', '0px'); $('div.ui-fixed-overlay').css('top', '0px'); $('div.ui-bar-a').css('top', '0px'); 

• 使用data-role =“header”（不像页脚那样持久）。 这个方法将创建我想要的标题（因为我覆盖了一些CSS），但是当我在页面之间转换时，它不会将标题保持在顶部。 JQM文档也没有声明它们支持持久标头，但它确实声明它支持持久页脚：

每页上的HTML：

Answer 1

一点点jquery就可以了

    
 
 
Foo
 
 
 
Home
 
 
My
Profile
 
 
 
  
 
I'm first in the source order so I'm shown as the page.
 
View internal page called bar
 
  
 
I'm second in the source order so I'm shown as the page.
 
View internal page called bar
 
 
 
Page Footer
 
 
 

Answer 2

几天来，我一直在反对这个问题，而谷歌一直没有帮助。 我终于想出了以下解决方案。 它在转换开始之前将标题HTML复制到新页面，然后在转换完成后从上一页中删除代码。 页眉和页脚仍将随页面转换一起移动，但即使在导航嵌套列表时它们也会保留。

 // dynamically move the header and footer between pages on load events $('div.ui-page').live('pagebeforeshow', function(event, ui) { // avoid duplicating the header on the first page load if (ui.prevPage.length == 0) return; // remove the jQuery Mobile-generated header $('.ui-header').addClass('to-remove-now'); $('#header').removeClass('to-remove-now'); $('.to-remove-now').remove(); // grab the code from the current header and footer header = $('#header')[0].outerHTML; footer = $('#footer')[0].outerHTML; // mark the existing header and footer for deletion $('#header').addClass('to-remove'); $('#footer').addClass('to-remove'); // prepend the header and append the footer to the generated HTML event.currentTarget.innerHTML = header + event.currentTarget.innerHTML + footer; }); // remove header from previous page $('div.ui-page').live('pagehide', function(event, ui) { $('.to-remove').remove(); }); 

然后只需将id="header"添加到页眉div并将id="footer"到页脚，然后像往常一样将它们放在内容中。

Answer 3

将以下css添加到您的页面或css文件的底部

请注意我没有在移动设备上测试此代码..

Answer 4

1）除了jquery.js之外，jquerymobile.js和.css文件还包括：jquery.easing.1.3.js，jquery.mobile.scrollview.js和scrollview.js。 （谷歌）

2）标准页眉，列表视图和页脚，样式属于以下内容：

 
...
 
List item 1
 
... 

正如这里详细描述的那样 。

Answer 5

这里有一个使用页脚的例子： http ： //jquerymobile.com/demos/1.0/docs/toolbars/footer-persist-a.html

我没有机会尝试一下，但它应该以标题的方式工作。

Answer 6

嗨，这可能会晚，但这对我有用。

 [data-role=page] { min-height: 100%; height: auto !important; height: 100%; overflow: scroll; margin: 0 auto -40px; } .footerPlaceHolder { height: 40px; } [data-role=footer]{height:40px; bottom:0; position:fixed !important; top: auto !important; width:100%; z-index: 9999;} 

你的HTML

 
 ....Your content.... 
 
 Back Settings 
  

PS请注意我不擅长这件事特别是css。 所有评论将不胜感激。

谢谢。

Answer 7

我试着调查jquery移动源，持续页脚的魔力发生在这里，我想。

 $( document ).delegate( ".ui-page", "pagebeforeshow", function( event, ui ) { var page = $( event.target ), footer = page.find( ":jqmData(role='footer')" ), id = footer.data( "id" ), prevPage = ui.prevPage, prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" ), prevFooterMatches = prevFooter.length && prevFooter.jqmData( "id" ) === id; if ( id && prevFooterMatches ) { stickyFooter = footer; setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) ); } }) .delegate( ".ui-page", "pageshow", function( event, ui ) { var $this = $( this ); if ( stickyFooter && stickyFooter.length ) { setTimeout(function() { setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) ); stickyFooter = null; }, 500); } $.mobile.fixedToolbars.show( true, this ); }); 

我想补充一下

 setTop( page.find( ":jqmData(role='header')").removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) ); 

它。 祝我好运 …

Answer 8

如果你可以使用一个单独的共享头，你可以在主页面中提供头:(注意：没有涉及jQuery，抱歉“只使用jQuery”伙伴:-p）

 
 
 
 
 
 
 
Your Page
 
  

然后使用CSS将每个页面的顶部向下推：

 .ui-page{ top:64px !important; } 

我对此并不满意！在那里很重要 ，但jQueryM在CSS中使用的规则具有最高的特异性，没有使用ID。 如果你知道你的所有身份证，你可能没有它…随意建议更好的其他规则..我已经击败了我的头，太长时间不在乎了。

Answer 9

我认为这是最近添加到JQM的。 http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

此链接清楚地表明您可以将data-id属性添加到BOTH。 页眉和页脚。 但这对我不起作用。

编辑：我注意到，您必须打开持久标头的页面转换。 但过渡使应用程序放慢了太多……

Answer 10

检查此示例，在“使页脚和标题持久化”下。