Ignite UI™ API ヘルプ

ui.igSplitter

スプリッターは、レイアウトを 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>

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

デフォルト:

defaults

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

コードサンプル

//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

コードサンプル

//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

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

Ignite UI for jQuery | API リファレンス

ui.igSplitter

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル