web-dev-qa-db-ja.com

タブが多すぎる場合にJqueryUIタブを水平方向にスクロールさせる方法

It appears as multiple line by default.

上の画像は「タブが多すぎます」の例です。デフォルトでは複数行で表示されます。

ただし、最初のタブの前と最後のタブの後に2つの矢印を追加するか、自動的にスクロールしても問題ないように、1行で水平方向にスクロールできるようにします。

javascriptjquerycssuser-interfacetabs
15
Aloong

タブのスクロールは直感に反すると思うので、この問題には別のアプローチがあります。タブが2行目に分割されたときにドロップダウンを実行するプラグインを作成しました。

https://github.com/jasonday/plusTabs

7
Jason

私は最近これに対する解決策を探していましたが、他のプラグイン/例はどれもjQuery 1.9+で動作しないようでした。また、「詳細」タブを作成し、ドロップダウンとして追加のタブを表示するというジェイソンの答えが最良だと思いますUIの経験があるので、私は彼の答えを拡張し、1.9 +のjQueryプラグインを作成しました。これは、すべての幅の合計があれば、jQueryUIタブを拡張します。タブがタブコンテナの幅を超えると、追加のタブがドロップダウンにグループ化されます。

enter image description here

JSFiddle Demo を確認して、実際の動作を確認できます。ブラウザウィンドウのサイズを変更して、機能することを確認してください。

または、 JSFiddle で完全なプラグインコードを表示できます。

「オーバーフロータブ」の初期化は次のように簡単です。

$("#tabs").tabs({
    overflowTabs: true,
    tabPadding: 23, 
    containerPadding: 40,
    dropdownSize: 50
});

tabPaddingは、タブ内のテキストの周囲のパディングのピクセル数です。

containerPaddingはコンテナのパディングです。

dropdownSizeは、ドロップダウンセレクターボタンのピクセルサイズです

これを最新バージョンのChrome、Firefox、およびIEでテストしました。問題を見つけたり、これを改善できる場合は、遠慮なくフォークして先に進んでください。

GitHub でも利用できるようになりました。

6
Paul Blundell

ここにリストされているプラ​​グインはどれも私にとってはうまく機能しませんでした（ほとんどは古く、jQuery 2.0+と互換性がありません）が、最終的にこれを見つけました： https://github.com/joshreed/jQuery-ScrollTabs .. 。リストに追加する価値があります。

5
Digs

このための非常に単純なプラグインを作成しました。基本的に、タブナビゲーターに固定長のdivと移動可能なdivを1つずつ追加する必要があります。

プラグインコード：

(function ($) {
var settings = {
    barheight: 38
}    

$.fn.scrollabletab = function (options) {

    var ops = $.extend(settings, options);

    var ul = this.children('ul').first();
    var ulHtmlOld = ul.html();
    var tabBarWidth = $(this).width()-60;
    ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
    var leftArrow = ul.children().last();
    leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
    leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');        

    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
    var rightArrow = ul.children().last();
    rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
    rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');        

    var moveable = ul.find('.moveableContainer').first();
    leftArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;

        if (currentPosition + offset >= 0) {
            moveable.stop().animate({ left: '0' }, 'slow');
        }
        else {
            moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
        }
    });

    rightArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;
        var tabsRealWidth = 0;
        ul.find('li').each(function (index, element) {
            tabsRealWidth += $(element).width();
            tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
        });

        tabsRealWidth *= -1;

        if (currentPosition - tabBarWidth > tabsRealWidth) {
            moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
        }
    });


    return this;
}; })(jQuery);

http://jsfiddle.net/Bua2d/ でチェックしてください

4
André Lourenço

そのためのプラグインは次のとおりです。 http://jquery.aamirafridi.com/jst/

3
Simeon

jQueryプラグインも作成しました ここ ですが、私の主な焦点はモバイルサイト用のそのような構造の作成でしたスペースが少なく、touchやコントロール矢印を使用して水平方向にスクロールすることもできます。

解決策は次のようになります。 enter image description here

私はBootstrapを使用しており、プラグインを実装するには、基本的に次のものを含める必要があります。

あなたのHTMLでは、矢印が正しく機能するように次の構造を使用しています（私はfont-awesomeを使用しています）

 <div id="js_image_selection" class="horizontal-scrollable-tabs">
  <div class="scroller arrow-left"><i class="fa fa-arrow-left"></i></div>
  <div class="scroller arrow-right"><i class="fa fa-arrow-right"></i></div>
  <div class="horizontal-tabs">
    <ul role="tablist" class="nav nav-tabs nav-tabs-horizontal">
      <li role="presentation" class="active"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
    </ul>
  </div>
</div>

そして、あなたにJsを呼んでください：

$("#js_image_selection").horizontalTabs();

それが将来誰にでも役立つことを願っています！乾杯！

2
Lucas Lazaro

Re：AndréLourenço-すばらしいアドオンです。ウィンドウのサイズ変更時にスクローラーのサイズを変更できるようにするための調整が必要なハックを投入したかっただけです（つまり、モバイルデバイスを回転させます）。

    if(!$(".fixedContainer").length) {
        ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
        ul.append('<div class="leftBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
        var leftArrow = ul.children().last();
        leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
        leftArrow.children('.ui-icon-carat-1-w').first().css('text-align', 'center');        

        ul.append('<div class="rightBtn" style="width: 40px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
        var rightArrow = ul.children().last();
        rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
        rightArrow.children('.ui-icon-carat-1-e').first().css('text-align', 'center');        
    } else {
        var leftArrow = $(".leftBtn");
        var rightArrow = $(".rightBtn");
        $(".fixedContainer").css("width", tabBarWidth);
    }

次に、ウィンドウのサイズ変更でもう一度呼び出します。

    $(window).resize(function(e){
        $("#tabs").scrollabletab();
    });

それを行うための最も効率的な方法ではありませんが、現時点では私のテスト目的には機能します。

1
viperaus

このためにさらに別のプラグインを作成しました。今回はChromeスタイルのタブサイズ変更動作を使用します。

overflowResize

で初期化

$( ".tabpanel" ).tabs().tabs('overflowResize');

デモ

GitHub

1
Adam Jimenez

1つのプラグインはここにあります https://github.com/Casper1131/scroller それは任意の順序付けられていないリストに使用できます。

1
Christopher Thomas

タブを1行で表示する場合、処理するシナリオとケースは複数あります。

  1. 簡単な解決策は、ui-tab-header <ul>の周りにdivを追加し、オーバーフローをscrollとして設定することです。このメソッドは、ブラウザがタブヘッダーのスクロールを処理するため、すぐに使用できます。ただし、ブラウザが提供するデフォルトのスクロールバーは奇妙に見えます。したがって、カスタマイズ/スタイリッシュなスクロールバーアドオンが必要です。 [〜＃〜]または[〜＃〜]
  2. 以下のようなjQueryUIタブ拡張機能を使用するには：

スクロール可能なタブ機能を提供し、必要に応じてナビゲーションコントロールを表示することで、レスポンシブなページサイズの変更を自動的に処理する拡張jQueryUIウィジェット。

特徴：

  • レスポンシブまたは流動的なレイアウト
  • タッチデバイスのタブヘッダーをスクロールするためのタッチスワイプをサポートしています（*外部依存関係が必要です）
  • 完全にカスタマイズ可能なCSSベースのスタイリング
  • 閉じるボタンを使用したタブの削除をサポート
  • 追加のHTML構造の変更は必要ありません。マークアップは、その場で自動的に拡張されます。

https://davidsekar.github.io/jQuery-UI-ScrollTabs

0
David Chelliah