1

タブの実装のためにjQueryモバイルでプラグインを検索しています。タブはページのコンテンツに含まれている必要があります。これは私が持っているワットです...

<div data-role="page" id="nav">
  <div data-role="page" id="nav">
    <div data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">

        <div data-role="navbar" data-iconpos="top">

            <ul>
                <li>
                    <a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
                        Button
                    </a>
                    </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="page" id="one" data-transition="slide">
            <div data-role="content" style="background-color:#ff0;">    
                <h1>One</h1>
            </div>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <h3>
            Footer
        </h3>
    </div>
</div>

ページID「one」をクリックすると。それぞれのコンテンツが表示されていません。誰でも私を助けてくれますか？

4

2 に答える 2

6

または、私の tabview プラグインを使用できます。JQM 折りたたみセットに基づいて、JQM 折りたたみ可能および折りたたみ可能セット ウィジェットを私のバージョンに置き換えるだけです。古い折り畳み式のものは、通常どおり機能し続けます。data-type="horizontal"折りたたみ可能なセットに追加すると、... タブ...

デモはこちら、リポジトリはGithubにあります。

タブビューのデモ

私は他の解決策も好きです。

于 2012-11-06T17:10:54.080 に答える
2

jQuery.mobile-tabsを変更して、タブ バーをページ内の任意の場所に配置できるようにしました。これはあなたが考えていたことですか？

タブ

于 2012-11-06T16:57:23.637 に答える