javascript - Jquery ui タブが別の行に折り返されています

Question

Web サイトに jquery タブがありますが、小さな画面ではタブが別の行に折り返されます。タブがこれを行わないようにする方法はありますか?

Answer 1

NAVEED のリンクをたどったのですが、面倒でした。インラインブロックを実装するサポートブラウザのみで生活できる場合は、次を試してください。

jQuery('#mytabs')
    .tabs()
    .find('.ui-tabs-nav')
        .css('white-space','nowrap')
        .css('overflow','hidden')
        .find('li')
            .css('display','inline-block')
            .css('float','none')
            .css('vertical-align','bottom');

クイック＆ダーティ、テストされていません。

フィドル (js): http://jsfiddle.net/yxPa6/4/

フィドル (css): http://jsfiddle.net/kUuTE/2/

Answer 2

スクロール ボタンを追加することは、1 行に収まらないタブを非表示にする良い方法です。これは、 jquery-ui-tabs-pagingプラグインを使用して簡単に実行できます。サンプルページをご覧ください。