5

我应该在 jqtouch 的基本主题中进行什么更改以具有固定的页眉（+ 页脚可能......）？我尝试过使用 position:fixed.. 但没有任何效果...

4

6 回答 6

3

查看 jQTouch 这个插件 - http://code.google.com/p/jqtscroll/

于 2010-06-15T22:32:33.587 回答
1

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

=>标签栏演示

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

于 2011-02-28T00:37:34.403 回答
1

移动版 Safari 不支持 position:fixed（至少不支持它对 Web 开发有用的方式）。

或者，您可以尝试实现这个 javascript 解决方案

于 2009-11-23T21:16:23.543 回答
1

看看这个网站： 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%;}
于 2010-08-03T06:26:49.430 回答
0

正如 Thomas 指出的那样，在 iPhone 上运行的当前版本的 Mobile Safari 中不支持此功能。

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

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

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

于 2009-11-24T23:58:55.877 回答
0

我正在开发我的版本，在 jQtouch http://www.itabbar.com上添加一个固定的标签栏

它适用于 jQtouch、iScroll 和 iTabbar

这是一个在线演示（仅适用于桌面浏览器的 Safari 和 Chrome）

于 2012-02-27T06:00:17.570 回答