1

jQuery UIタブヘッダーを「スタック」する方法はありますか？説明させてください。タイトルをわかりやすくするために2つ以上の単語が必要なタブがあります。例えば：

「PDP未開発」

私の問題は、たくさんのタブを追加するときにスペースが不足していることです。したがって、タブを次のように記述する代わりに

PDP Undeveloped

として表示したい

    PDP
Undeveloped

それは可能ですか？そうでない場合、この問題を解決する別の方法はありますか？

前もって感謝します。

バーラト

4

1 に答える 1

0

<br />タグの使用をお勧めします。スペースが不足している場合にのみ有効にしたいので、メディアクエリを使用して複数行表示をオンにすることをお勧めします。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc <br />tincidunt</a></li>
        <li><a href="#tabs-2">Proin <br />dolor</a></li>
        <li><a href="#tabs-3">Aenean <br />lacinia</a></li>
    </ul>
    <div id="tabs-1">Tab 1</div>
    <div id="tabs-2">Tab 2</div>
    <div id="tabs-3">Tab 3</div>
</div>

<style>
    br { display: none; }

    /* Replace 700px with whatever width you want the multi line display to start */
    @media screen and (max-width: 700px) {
        .ui-tabs li { height: 4em; }    
        br { display: inline; }
    }
</style>

実際の例: http://jsfiddle.net/vvpeF/

于 2012-05-23T18:10:39.320 に答える