OSS で利用できる機能
スプリッター - スプリッター API およびイベント
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
最初のパネル
2 つ目のパネル
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、スプリッター コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<!-- Used to add markup and provide logging
functionality for the API Explorer and API Viewer UI -->
<script src="/js/apiviewer.js"></script>
</head>
<body>
<div id="splitter">
<div>最初のパネル</div>
<div>2 つ目のパネル</div>
</div>
<div class="api-explorer">
<fieldset>
<legend>スプリッターの API 設定</legend>
<input type="button" id="igButtonSplitterFirstPanelCollapse" value="最初のパネルの縮小" style="margin-bottom: 20px;" />
<input type="button" id="igButtonSplitterFirstPanelExpand" value="最初のパネルの展開" style="margin-bottom: 20px;" />
<input type="button" id="igButtonSplitterSecondPanelCollapse" value="2 つ目のパネルの縮小" style="margin-bottom: 20px;" />
<input type="button" id="igButtonSplitterSecondPanelExpand" value="2 つ目のパネルの展開" style="margin-bottom: 20px;" />
<br />
コンテンツを設定: <input type="text" id="firstPanelText"/> 位置: <input type="button" id="igButtonSplitterFirstPanel" value="最初のパネル" style="margin-bottom: 20px;" />
<br />
コンテンツを設定: <input type="text" id="secondPanelText"/> 位置: <input type="button" id="igButtonSplitterSecondPanel" value="2 つ目のパネル" style="margin-bottom: 20px;" />
<br />
パネル サイズを設定: <input type="text" id="firstPanelSize"/> 100px など <input type="button" id="igButtonSplitterFirstPanelSize" value="最初のパネル" style="margin-bottom: 20px;" />
<br />
パネル サイズを設定: <input type="text" id="secondPanelSize"/> 100px など <input type="button" id="igButtonSplitterSecondPanelSize" value="2 つ目のパネル" style="margin-bottom: 20px;" />
</fieldset>
</div>
<br />
<div class="api-viewer"></div>
<script>
$(function () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
/*----------------- Method & Option Examples -------------------------*/
// process events of buttons
$('#igButtonSplitterFirstPanelCollapse').on({
click: function () {
$("#splitter").igSplitter("collapseAt", 0);
}
});
$('#igButtonSplitterSecondPanelCollapse').on({
click: function () {
$("#splitter").igSplitter("collapseAt", 1);
}
});
$('#igButtonSplitterFirstPanelExpand').on({
click: function () {
$("#splitter").igSplitter("expandAt", 0);
}
});
$('#igButtonSplitterSecondPanelExpand').on({
click: function () {
$("#splitter").igSplitter("expandAt", 1);
}
});
$('#igButtonSplitBarButtons').on({
click: function () {
$("#splitter").igSplitter("splitBar").children("div").remove();
}
});
$('#igButtonSplitterFirstPanel').on({
click: function () {
$("#splitter").igSplitter("firstPanel").text($("#firstPanelText").val());
}
});
$('#igButtonSplitterSecondPanel').on({
click: function () {
$("#splitter").igSplitter("secondPanel").text($("#secondPanelText").val());
}
});
$('#igButtonSplitterFirstPanelSize').on({
click: function () {
$("#splitter").igSplitter("setFirstPanelSize", $("#firstPanelSize").val());
}
});
$('#igButtonSplitterSecondPanelSize').on({
click: function () {
$("#splitter").igSplitter("setSecondPanelSize", $("#secondPanelSize").val());
}
});
/*----------------- Event Examples -------------------------*/
$("#splitter").on("igsplitterresizestarted", function (evt, ui) {
var message = "igsplitterresizestarted";
apiViewer.log(message);
});
$("#splitter").on("igsplitterresizing", function (evt, ui) {
var message = "igsplitterresizing";
apiViewer.log(message);
});
$("#splitter").on("igsplitterresizeended", function (evt, ui) {
var message = "igsplitterresizeended";
apiViewer.log(message);
});
$("#splitter").on("igsplittercollapsed", function (evt, ui) {
var message = "igsplittercollapsed panel: " + ui.index;
apiViewer.log(message);
if (ui.index === 0) {
$("#igButtonSplitterFirstPanelExpand").attr("disabled", false);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", true);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", true);
} else {
$("#igButtonSplitterSecondPanelExpand").attr("disabled", false);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", true);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", true);
}
});
$("#splitter").on("igsplitterexpanded", function (evt, ui) {
var message = "igsplitterexpanded panel: " + ui.index;
apiViewer.log(message);
if (ui.index === 0) {
$("#igButtonSplitterFirstPanelExpand").attr("disabled", true);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", false);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", false);
} else {
$("#igButtonSplitterSecondPanelExpand").attr("disabled", true);
$("#igButtonSplitterFirstPanelCollapse").attr("disabled", false);
$("#igButtonSplitterSecondPanelCollapse").attr("disabled", false);
}
});
/*----------------- Instantiation -------------------------*/
$("#splitter").igSplitter({ height: 300, panels: [{ collapsible: true }, { collapsible: true}] });
$("#igButtonSplitterFirstPanelExpand").attr("disabled", true);
$("#igButtonSplitterSecondPanelExpand").attr("disabled", true);
});
</script>
</body>
</html>