当前位置：文江博客话题详情

修复了 Jqtouch 中的标头

发布于 2024-08-12 07:30:41 字数 175 浏览 6 评论 0原文

我应该在基本主题 jqtouch 有一个固定的页眉（+页脚也许......）？我尝试过使用位置：固定..但没有任何效果...

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

永不分离 2024-08-19 07:30:41

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

回复收藏 0 原文

叹梦 2024-08-19 07:30:41

Mobile Safari 不支持position:fixed（至少不支持Web 开发）。

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

回复收藏 0 原文

丘比特射中我 2024-08-19 07:30:41

看看这个网站：
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%;}

Take a look at this site:
http://demo.lvengine.net/mobileuplink

Note that it uses an extra div:

<div id="jqt">

Take a look at the javascripts and css from this site. The author modified the original jqtouch scripts a bit to fit this modification.

For a "fixed" footer, e.g. tab bar, you simply add an addition div at the same level as div#jqt:

<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>

Then code up the css for .tabbar. Use mine as example:

 .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%;}

回复收藏 0 原文