Question

我应该在jqtouch的basic theme中更改一个固定标题（+页脚可能......）？我已经尝试了位置：修复..但没有任何效果......

Answer 1

查看此插件以获取jQTouch - http://code.google.com/p/jqtscroll/

Answer 2

Mobile Safari不支持position：fixed（至少不会使其对Web开发有用）。

或者，您可以尝试实施this javascript solution

Answer 3

看看这个网站： http://demo.lvengine.net/mobileuplink

请注意，它使用额外的div：

<div id="jqt">

查看本网站的javascripts和css。作者修改了原始的jqtouch脚本以适应这种修改。

对于“固定”页脚，例如标签栏，您只需添加与div＃jqt：

相同级别的添加div

<div id="other">
    <div class="tabbar">
        <ul>
            <li class="two"><a href="first.html">first tab</a></li>
            <li class="two"><a href="two.html">second tab</a></li>
        </ul>
    </div>
</div>

然后为.tabbar编写css代码。以我的为例：

 .tabbar 
{
    position: absolute;
    bottom:0px;
    width:100%;
    height:48px;
    border-top:1px solid #444;
    overflow:hidden;
    padding: 0;
    margin: 0;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
}

.tabbar li
{
    float: left;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: smaller;
    display: block;
    text-align: center;
    border-right:1px solid #333;
    border-left:1px solid #6a6a6a;
}

.tabbar li:first-child
{
    border-right:1px solid #333;
    border-left:0;
}

.tabbar li:last-child
{
    border-right:0;
    border-left:1px solid #6a6a6a;
}

.tabbar ul
{
    border: 0;
    margin: 0;
    list-style: none;
}

.tabbar a 
{
    padding: 0;
    margin: 0;
    display:block;
    text-decoration:none;
    font-size: 0.8em;
    color:#eee;
    line-height:1.6em;
}

.tabbar li.two      {width: 50%;}

Answer 4

看看DataZombies jQtouch Fork - 他的增强功能非常酷，包括固定的页眉和页脚！

=＆GT; Tabbar Demo

他似乎使用iScroll，也可以单独使用。

Answer 5

正如托马斯指出的那样，在iPhone上运行的当前版本的Mobile Safari中没有支持。

如果您正在使用jQTouch，请查看最新下载捆绑的“floaty”扩展程序。它添加了一个与滚动一起移动的浮动div，尽管有一些延迟。该行为与移动GMail界面中的“存档”栏非常相似。

这是jQTouch上的扩展页面，提到了floaty： http://code.google.com/p/jqtouch/wiki/Extensions

只需下载最新的捆绑包，一切都在那里。这不是一个完美的解决方案，但总比没有好。

Answer 6

我正在处理我的版本，在jQtouch上添加固定的标签栏 http://www.itabbar.com

它正在使用jQtouch，iScroll和iTabbar

此处有online demo（仅适用于桌面浏览器的Safari和Chrome）

修复了Jqtouch中的标题

6 个答案: