ui.igSplitter

ui.igSplitter_image

スプリッターは、レイアウトを 2 つのパネルに分割する jQuery UI に基づくウィジェットです。エンド ユーザーがスプリッター バーを使用してパネルを展開または縮小し、パネルをサイズ変更する機能を提供します。

コード サンプル

        <!doctype html>
        <html>
        <head>
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- Infragistics Loader Script -->
            <script src="js/infragistics.loader.js" type="text/javascript"></script>
            <!-- Infragistics Loader Initialization -->
            <script type="text/javascript">
                $.ig.loader({
                    scriptPath: "js/",
                    cssPath: "css/",
                    resources: "igSplitter"
                });
        
                $.ig.loader(function () {
                    $("#splitter").igSplitter({
                        height: "500px",
                        width: "700px",
                        panels: [
                            { size: "300px", min: "250px", max: "350px", collapsible: true },
                            { collapsible: true }
                        ]
                    });
                });
            </script>
        </head>
        <body>
            <div id="splitter">
                <div>First Panel</div>
                <div>Second Panel</div>
            </div>
        </body>
        </html>
        

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.splitter-en.js

継承

  • dragDelta

    タイプ:
    number
    デフォルト:
    3

    スプリッター バーのドラッグ デルタを指定します。ドラッグで "move" モードを開始するには、マウスが元の位置から特定の距離を移動する必要があります。

    コード サンプル

     
                        // Initialize
                        $('.selector').igSplitter({
                            dragDelta: 6
                        });
    
                        // Get
                        var delta = $('.selector').igSplitter("option", "dragDelta");
                     
  • height

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの高さを取得または設定します。

    メンバー

    • null
    • タイプ:object
    • その他の幅が定義されない場合、その親コンテナー内のツリーに合わせられます。
    • string
    • 高さと幅はピクセル (px) およびパーセント (%) で設定できます。
    • number
    • 高さと幅は数値としてピクセルで設定できます。

    コード サンプル

     
                        // Initialize
                        $('.selector').igSplitter({
                            height: "400px"
                        });
                        // Get
                        var height = $('.selector').igSplitter("option", "height");
                        // Set
                        $('.selector').igSplitter("option", "height", "400px");
                     
  • language
    継承

    タイプ:
    string
    デフォルト:
    "en"

    ウィジェットのロケール言語設定を取得または設定します。

    コード サンプル

     
    					//Initialize
    				$(".selector").igSplitter({
    					language: "ja"
    				});
    
    				// Get
    				var language = $(".selector").igSplitter("option", "language");
    
    				// Set
    				$(".selector").igSplitter("option", "language", "ja");
    			 
  • locale
    継承

    タイプ:
    object
    デフォルト:
    null

    ウィジェットのロケール設定を取得または設定します。

    コード サンプル

     
    					//Initialize
    				$(".selector").igSplitter({
    					locale: {}
    				});
    
    				// Get
    				var locale = $(".selector").igSplitter("option", "locale");
    
    				// Set
    				$(".selector").igSplitter("option", "locale", {});
    			 
  • orientation

    タイプ:
    enumeration
    デフォルト:
    vertical

    スプリッターの方向を指定します。

    メンバー

    • vertical
    • タイプ:string
    • horizontal
    • タイプ:string

    コード サンプル

     
                        // Initialize
                        $('.selector').igSplitter({
                            orientation: "horizontal"
                        });
                        // Get
                        var height = $('.selector').igSplitter("option", "orientation");
                        // Set
                        $('.selector').igSplitter("option", "orientation", "horizontal");
                     
  • panels

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    パネル設定を指定するオブジェクト オプションの配列。パネルの数は 2 以下です。設定は列挙体によって指定されます。

    コード サンプル

     
                        $("#splitter").igSplitter({
                            panels: [
                                {size: "50%", min: "40%", max: "55%", collapsed: true, collapsible: true},
                                {collapsible: true}
                            ]
                        });
    
                        // Get
                        var panels = $(".selector").igSplitter("option", "panels");
                        panels[0].size;
                     
    • collapsed

      タイプ:
      bool
      デフォルト:
      false

      パネルが最初に縮小状態にあるかどうかを取得します。

      コード サンプル

       
                                  // Initialize
                                  $('.selector').igSplitter({
                                      panels: [{
                                          collapsed: true
                                      }]
                                  });
      
                                  // Get
                                  var panels = $(".selector").igSplitter("option", "panels");
                                  panels[0].collapsed;
                               
    • collapsible

      タイプ:
      bool
      デフォルト:
      false

      パネルを縮小できるかどうかを取得します。

      コード サンプル

       
                                  // Initialize
                                  $('.selector').igSplitter({
                                      panels: [{
                                          collapsible: true
                                      }]
                                  });
      
                                  // Get
                                  var panels = $(".selector").igSplitter("option", "panels");
                                  panels[0].collapsible;
                               
    • max

      タイプ:
      enumeration
      デフォルト:
      null

      パネルの最大サイズを取得します。

      コード サンプル

       
                                  // Initialize
                                  $('.selector').igSplitter({
                                      panels: [{
                                          max: "600px"
                                      }]
                                  });
                                  // Get
                                  var panels = $(".selector").igSplitter("option", "panels");
                                  panels[0].max;
                               
    • min

      タイプ:
      enumeration
      デフォルト:
      null

      パネルの最小サイズを取得します。

      コード サンプル

       
                                  // Initialize
                                  $('.selector').igSplitter({
                                      panels: [{
                                          min: "200px"
                                      }]
                                  });
                                  // Get
                                  var panels = $(".selector").igSplitter("option", "panels");
                                  panels[0].min;
                               
    • resizable

      タイプ:
      bool
      デフォルト:
      false

      パネルをサイズ変更できるかどうかを取得します。

      コード サンプル

       
                                  // Initialize
                                  $('.selector').igSplitter({
                                      panels: [{
                                          resizable: true
                                      }]
                                  });
      
                                  // Get
                                  var panels = $(".selector").igSplitter("option", "panels");
                                  panels[0].resizable;
                               
    • size

      タイプ:
      enumeration
      デフォルト:
      null

      パネル サイズを取得します。

      コード サンプル

       
                                  // Initialize
                                  $('.selector').igSplitter({
                                      panels: [{
                                          size: "300px"
                                      }]
                                  });
                                  // Get
                                  var panels = $(".selector").igSplitter("option", "panels");
                                  panels[0].size;
                               
  • regional
    継承

    タイプ:
    enumeration
    デフォルト:
    en-US

    ウィジェットの領域設定を取得または設定します。

    コード サンプル

     
    				//Initialize
    				$(".selector").igSplitter({
    					regional: "ja"
    				});
    				// Get
    				var regional = $(".selector").igSplitter("option", "regional");
    				// Set
    				$(".selector").igSplitter("option", "regional", "ja");
    			 
  • resizeOtherSplitters

    タイプ:
    bool
    デフォルト:
    true

    このスプリッターがサイズ変更するとき、ページのその他のスプリッターがサイズ変更されるかどうかを指定します。

    コード サンプル

     
                        // Initialize
                        $('.selector').igSplitter({
                            resizeOtherSplitters: false
                        });
    
                        // Get
                        var resizeSplitters = $('.selector').igSplitter("option", "resizeOtherSplitters");
                     
  • width

    タイプ:
    enumeration
    デフォルト:
    null

    コンテナーの幅を取得または設定します。

    メンバー

    • null
    • タイプ:object
    • 他の幅が定義されていない場合、データがフィットするよう伸縮します。
    • string
    • ウィジェットの幅はピクセル (px) およびパーセント (%) で設定できます (%)。
    • number
    • ウィジェットの幅は数値としてピクセルで設定できます。

    コード サンプル

     
                        // Initialize
                        $('.selector').igSplitter({
                            width: "500px"
                        });
                        // Get
                        var width = $('.selector').igSplitter("option", "width");
                        // Set
                        $('.selector').igSplitter("option", "width", "500px");
                     

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示
  • collapsed

    キャンセル可能:
    false

    縮小が実行された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、スプリッター インスタンスへの参照を取得します。
    ui.index を使用して、縮小されたパネルのインデックスを取得します。

    コード サンプル

     
                        //Bind after initialization
                        $(document).on("igsplittercollapsed", ".selector", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                            // index of the collapsed panel
                            ui.index;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            collapsed: function(evt, ui) {...}
                        });
                     
  • expanded

    キャンセル可能:
    false

    展開が実行された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、スプリッター インスタンスへの参照を取得します。
    ui.index を使用して、展開されたパネルのインデックスを取得します。

    コード サンプル

     
                        //Bind after initialization
                        $(document).on("igsplitterexpanded", ".selector", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                            // index of the expanded panel
                            ui.index;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            expanded: function(evt, ui) {...}
                        });
                     
  • layoutRefreshed

    キャンセル可能:
    false

    ブラウザーのサイズ変更によって、パネルが更新された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、スプリッター インスタンスへの参照を取得します。

    コード サンプル

     
                        //Bind after initialization
                        $(document).on("igsplitterlayoutrefreshed", ".selector", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            layoutRefreshed: function(evt, ui) {...}
                        });
                     
  • layoutRefreshing

    キャンセル可能:
    true

    ブラウザーのサイズ変更によって、パネルが更新される前に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、スプリッター インスタンスへの参照を取得します。

    コード サンプル

     
                        //Bind after initialization
                        $(document).on("igsplitterlayoutrefreshing", ".selector", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            layoutRefreshing: function(evt, ui) {...}
                        });
                     
  • resizeEnded

    キャンセル可能:
    false

    ブラウザーのサイズ変更によって、パネルが更新された後に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、スプリッター インスタンスへの参照を取得します。

    コード サンプル

     
                        //Bind after initialization
                        $(document).on("igsplitterresizeended", ".selector", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            resizeEnded: function(evt, ui) {...}
                        });
                     
  • resizeStarted

    キャンセル可能:
    false

    スプリッター バーの移動が実行される前に発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、スプリッター インスタンスへの参照を取得します。

    コード サンプル

     
                        //Bind after initialization
                        $(document).on("igsplitterresizestarted", ".selector", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            resizeStarted: function(evt, ui) {...}
                        });
                     
  • resizing

    キャンセル可能:
    true

    スプリッター バーの移動が実行されているときに発生します。
    関数は引数 evt および ui を受け取ります。
    ui.owner を使用して、スプリッター インスタンスへの参照を取得します。

    コード サンプル

     
                        //Bind after initialization
                        $(document).on("igsplitterresizing", ".selector", function (evt, ui) {
                            // reference to igSplitter
                            ui.owner;
                        });
    
                        // Initialize
                        $(".selector").igSplitter({
                            resizing: function(evt, ui) {...}
                        });
                     
  • changeGlobalLanguage
    継承

    .igSplitter( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
    				$(".selector").igSplitter("changeGlobalLanguage");
    			 
  • changeGlobalRegional
    継承

    .igSplitter( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

     
    				$(".selector").igSplitter("changeGlobalRegional");
    			 
  • changeLocale
    継承

    .igSplitter( "changeLocale", $container:object );

    指定したコンテナーに含まれるすべてのロケールを options.language で指定した言語に変更します。
    注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。

    • $container
    • タイプ:object
    • オプションのパラメーター: 設定しない場合、ウィジェットの要素を $container として使用します。

    コード サンプル

     
    				$(".selector").igSplitter("changeLocale");
    			 
  • collapseAt

    .igSplitter( "collapseAt", index:object );

    指定したパネルを縮小します。

    • index
    • タイプ:object
    • 縮小するパネルのインデックスを指定します。

    コード サンプル

     
                        $(".selector").igSplitter("collapseAt", 0);
                         
  • destroy

    .igSplitter( "destroy" );

    igSplitter ウィジェットを破棄します。

    コード サンプル

     
                    $(".selector").igSplitter("destroy");
                     
  • expandAt

    .igSplitter( "expandAt", index:object );

    指定したパネルをインデックスにより展開します。

    • index
    • タイプ:object
    • 展開するパネルのインデックスを指定します。

    コード サンプル

     
                        $(".selector").igSplitter("expandAt", 1);
                         
  • firstPanel

    .igSplitter( "firstPanel" );
    返却型:
    object
    返却型の説明:
    最初のパネル要素の jQuery オブジェクトを返します。

    最初のパネルの jQuery 要素を取得します。

    コード サンプル

     
                    var panel = $(".selector").igSplitter("firstPanel");
                     
  • refreshLayout

    .igSplitter( "refreshLayout" );

    スプリッター レイアウトを更新します。レイアウトに変更が適用される場合、このメソッドを使用してスプリッターを再描画します。

    コード サンプル

     
                    $(".selector").igSplitter("refreshLayout");
                     
  • secondPanel

    .igSplitter( "secondPanel" );
    返却型:
    object
    返却型の説明:
    第 2 のパネル要素の jQuery オブジェクトを返します。

    第 2 のパネルの jQuery 要素を取得します。

    コード サンプル

     
                    var panel = $(".selector").igSplitter("secondPanel");
                     
  • setFirstPanelSize

    .igSplitter( "setFirstPanelSize", size:object );

    スプリッターが描画された後に最初のパネルの新しいサイズを設定できます。

    • size
    • タイプ:object
    • 最初のパネルの新しいサイズを指定します。

    コード サンプル

     
                    $(".selector").igSplitter("setFirstPanelSize", 100);
                     
  • setSecondPanelSize

    .igSplitter( "setSecondPanelSize", size:object );

    スプリッターが描画された後に第 2 のパネルの新しいサイズを設定できます。

    • size
    • タイプ:object
    • 第 2 のパネルの新しいサイズを指定します。

    コード サンプル

     
                    $(".selector").igSplitter("setSecondPanelSize", 100);
                     
  • widget

    .igSplitter( "widget" );
    返却型:
    object
    返却型の説明:
    このウィジェットを表す要素を返します。

    このウィジェットを表す要素を返します。

    コード サンプル

     
                    var widget = $(".selector").igSplitter("widget");
                     
  • ui-igsplitter-splitbar

    スプリッターの分割バーに適用されるクラス。
  • ui-igsplitter-splitbar-focus ui-state-focus

    分割バーのフォーカス状態のスタイル設定を定義するクラス。
  • ui-igsplitter-splitbar-collapsed

    分割バーの縮小状態のスタイル設定を定義するクラス。
  • ui-igsplitter-splitbar-hover ui-state-hover

    分割バーのホバー状態のスタイル設定を定義するクラス。
  • ui-igsplitter-splitbar-invalid

    分割バーの無効な状態のスタイル設定を定義するクラス。
  • ui-igsplitter-splitbar-default ui-state-default

    分割バーのデフォルト状態のスタイル設定を定義するクラス。
  • ui-state-default

    ボタンのデフォルト状態のスタイル設定を定義するクラス。
  • ui-igsplitter-collapse-button-hover ui-state-hover

    ボタンのホバー状態のスタイル設定を定義するクラス。
  • ui-igsplitter-collapse-button-pressed

    ボタンの押された状態のスタイル設定を定義するクラス。
  • ui-igsplitter-collapse-single-button

    単一の場合に分割バーのボタンに適用されるクラス。
  • ui-igsplitter-collapse-button-horizontal-left

    縮小された場合に分割バーの左の水平縮小ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-s

    水平方向の右縮小されたボタン アイコンを定義するクラス。
  • ui-igsplitter-collapse-button-horizontal-left

    展開された場合に分割バーの左の水平縮小ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-n

    水平方向の左展開されたボタン アイコンを定義するクラス。
  • ui-igsplitter-collapse-button-horizontal-right

    縮小された場合に分割バーの右の水平縮小ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-n

    水平方向の右縮小されたボタン アイコンを定義するクラス。
  • ui-igsplitter-collapse-button-horizontal-right

    展開された場合に分割バーの右の水平縮小ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-s

    水平方向の右展開されたボタン アイコンを定義するクラス。
  • ui-igsplitter-panel-horizontal ui-widget-content

    スプリッターの水平パネルに適用されるクラス。
  • ui-igsplitter-no-scroll

    幅が 0 の場合、パネル スクロールを無効にするクラス。
  • ui-igsplitter-splitbar-resize-handler

    分割バーのサイズ変更ハンドラーに適用されるクラス。
  • ui-igsplitter-splitbar-resize-handler-inner

    分割バーの内部のサイズ変更ハンドラーに適用されるクラス。
  • ui-igsplitter ui-widget ui-widget-content

    最上位のコンテナー要素に適用されるクラス。
  • ui-igsplitter-collapse-button-vertical-left

    縮小された場合に分割バーの左の垂直縮小ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-e

    垂直方向の左縮小されたボタン アイコンを定義するクラス。
  • ui-igsplitter-collapse-button-vertical-left

    展開された場合に分割バーの左の垂直縮小ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-w

    垂直方向の左展開されたボタン アイコンを定義するクラス。
  • ui-igsplitter-collapse-button-vertical-right

    縮小された場合に分割バーの右の垂直ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-w

    垂直方向の右縮小されたボタン アイコンを定義するクラス。
  • ui-igsplitter-collapse-button-vertical-right

    展開された場合に分割バーの右の垂直縮小ボタンに適用されるクラス。
  • ui-icon ui-icon-triangle-1-e

    垂直方向の右展開されたボタン アイコンを定義するクラス。
  • ui-igsplitter-panel-vertical ui-widget-content

    スプリッターの垂直パネルに適用されるクラス。

Copyright © 1996 - 2019 Infragistics, Inc. All rights reserved.