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.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");

  • 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;

  • 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
        $(document).delegate(".selector", "igsplittercollapsed", function (evt, ui) {
            //return reference to igSplitter
            ui.owner;
            // return index of collapsed panel
            ui.index;
        });
 
        //Initialize
        $(".selector").igSplitter({
            collapsed: function(evt, ui) {...}
        });

  • expanded

    キャンセル可能:
    false

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

    コード サンプル

      
        //Bind
        $(document).delegate(".selector", "igsplitterexpanded", function (evt, ui) {
            //return reference to igSplitter
            ui.owner;
            // return index of expanded panel
            ui.index;
        });
 
        //Initialize
        $(".selector").igSplitter({
            expanded: function(evt, ui) {...}
        });

  • layoutRefreshed

    キャンセル可能:
    false

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

    コード サンプル

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

  • layoutRefreshing

    キャンセル可能:
    true

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

    コード サンプル

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

  • resizeEnded

    キャンセル可能:
    false

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

    コード サンプル

      
        //Bind
        $(document).delegate(".selector", "igsplitterresizeended", function (evt, ui) {
            //return reference to igSplitter
            ui.owner;
        });
 
        //Initialize
        $(".selector").igSplitter({
            resizeEnded: function(evt, ui) {...}
        });

  • resizeStarted

    キャンセル可能:
    false

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

    コード サンプル

      
        //Bind
        $(document).delegate(".selector", "igsplitterresizestarted", function (evt, ui) {
            //return reference to igSplitter
            ui.owner;
        });
 
        //Initialize
        $(".selector").igSplitter({
            resizeStarted: function(evt, ui) {...}
        });

  • resizing

    キャンセル可能:
    true

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

    コード サンプル

      
        //Bind
        $(document).delegate(".selector", "igsplitterresizing", function (evt, ui) {
            //return reference to igSplitter
            ui.owner;
        });
 
        //Initialize
        $(".selector").igSplitter({
            resizing: function(evt, ui) {...}
        });

  • 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 - 2024 Infragistics, Inc. All rights reserved.