Question

我有一个jQM应用程序，它使用标题作为导航栏。我遇到的问题是页面转换（特别是幻灯片）将标题与内容一起移动为一个“页面”。我正在寻找一种方法在页面转换期间保持标题静态。

我检查了API，似乎找不到任何东西。有没有人想出办法来实现这一目标？甚至可以用jQM吗？

任何帮助将不胜感激！

Answer 1

您需要构建自己的标头，该标头不属于<div data-role="page">元素。通常，您将页眉/页脚添加为<div data-role="page">元素的子元素，但这会使它们与页面的其余部分一起转换。

要从转换中删除标题，您可以将自定义标题放在页面顶部，然后将填充添加到data-role="content" div元素，这样标题不会隐藏任何内容。

<style>
#my_header {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 50px;
    z-index  : 1000;
    overflow : hidden;
}
[data-role="content"] {
    padding-top : 50px;
}
</style>
<body>
    <div data-role="page">...</div>
    <div id="my_header">...</div>
</body>
<!-- Notice the header div is not nested within any data-role="page" divs -->

我没有对此进行过测试，但我为网站范围的菜单做了类似的工作，效果很好。页面应该在标题后面转换，标题应保持原位。

Answer 2

This link to the jquerymobile site概述了如何“正确”执行此操作。在1.20可能是新的（我刚刚加入这个，所以不确定）。比我的填充解决方案更好，但只有当你不需要标题的相同静态实例时，这可能是OP所遵循的，因为它保持状态。无论如何，方便的链接。

Answer 3

我不认为这是可能的。在JQM中，您正在处理页眉和页脚所属的页面结构。然后将页面过渡应用于整个页面。我倾向于将页面过渡设置为淡入淡出以使其不那么突兀。

Answer 4

您需要一个外部库，如iScroll-4（http://cubiq.org/iscroll-4）或Scrollability，以获得全平台解决方案。我更喜欢iScroll，工作顺利有效。

对于iOS5，您可以在CSS中使用position：fixed作为标题。结合溢出：触摸;

JQM api也允许静态标题，但是他们实现它的方式就像你描述的那样，页眉和页脚消失并再次出现，因为它重新计算屏幕大小以适应页眉/页脚的位置。 http://jquerymobile.com/demos/1.0/docs/toolbars/bars-fixed.html

此外，这是一个关于全局菜单的好主题（适用于全局标题）：What's the best way to create a menu in jQueryMobile在它们中是一个完美的链接：http://www.roughlybrilliant.com/three_ways_to_implement_a_global_menu_in_jquery_mobile

这有帮助吗？

jQuery移动静态标题

4 个答案: