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