Jqtouch中的固定標題

Question

我應該如何更改jqtouch的basic theme以擁有固定標題（+頁腳也許...）？ 我嘗試過的位置：固定..但沒有任何工作...

Answer 1

移動Safari不支持位置：固定（至少不會使其對Web開發有用）。

或者你可以嘗試實施this javascript solution

Answer 2

正如托馬斯指出，有一個在當前版本的Mobile Safari的是在iPhone上運行，這不支持。

如果您正在使用jQTouch，請查看附帶最新下載內容的「floaty」擴展。它添加了一個浮動div，隨着您的滾動一起移動，儘管有一些延遲。該行爲與移動GMail界面中的「歸檔」欄非常相似。

下面是提到輕飄上jQTouch擴展頁： http://code.google.com/p/jqtouch/wiki/Extensions

只需下載最新的包和一切都在那裏。這不是一個完美的解決方案，但總比沒有好。

Answer 3

看看這個插件jQTouch - http://code.google.com/p/jqtscroll/

Answer 4

看看這個網站： http://demo.lvengine.net/mobileuplink

注意，它使用一個額外的div：

<div id="jqt"> 

看一看的Java腳本和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 5

看一看DataZombies jQtouch Fork - 他的增強是真的很酷，包括固定的頁眉和頁腳！

=>Tabbar Demo

看來他使用iScroll，這可能是使用單獨爲好。

Answer 6

我的工作我的版本，對jQtouch 添加一個固定的TabBar http://www.itabbar.com

它與jQtouch，iScroll和iTabbar

這裏工作的一個online demo（僅適用於Safari和Chrome桌面瀏覽器）