5

jqtouch の基本テーマで固定ヘッダー (+ フッター) を使用するには、何を変更すればよいですか? position:fixed で試しましたが、何も機能しませんでした...

4

6 に答える 6

3

jQTouch のこのプラグインをチェックしてください - http://code.google.com/p/jqtscroll/

于 2010-06-15T22:32:33.587 に答える
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 に答える
1

Mobile Safari は position:fixed をサポートしていません (少なくとも Web 開発に役立つ方法ではありません)。

または、この JavaScript ソリューションを実装することもできます

于 2009-11-23T21:16:23.543 に答える
1

DataZombies jQtouch Forkをご覧ください。彼の拡張機能は非常にクールで、固定ヘッダーとフッターが含まれています。

=>タブバーのデモ

彼はiScrollを使用しているようですが、これは独立して使用することもできます。

于 2011-02-28T00:37:34.403 に答える
0

Thomas が指摘したように、iPhone で動作する現在のバージョンの Mobile Safari では、これはサポートされていません。

とにかくjQTouchを使用している場合は、最新のダウンロードにバンドルされている「floaty」拡張機能を見てください。多少の遅延はありますが、スクロールに合わせて移動するフローティング div を追加します。この動作は、モバイル GMail インターフェースの「アーカイブ」バーに非常に似ています。

floaty について言及している jQTouch の拡張機能ページは次のとおりです: 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 に答える