このトピックは、JavaScript または ASP.NET MVC のいずれかで igSplitter™ コントロールを HTML ページへ追加する方法をコード例を用いて説明します。
以下の表は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。
トピック
Ignite UI for jQuery で JavaScript リソースの使用: このトピックでは、Web アプリケーションで Ignite UI for jQuery® を操作して、必要なリソースを管理する方法について説明します。
igSplitter の概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igSplitter コントロールに関する概念的な情報を提供します。
このトピックは、以下のセクションで構成されます。
igSplitter は、何らかのコンテンツのある 2 つの子 DIV を持つ DIV 要素上で初期化するコントロールです。オプションを構成することなくコントロールをセットアップできます。ただし、この場合 igSplitter は、ブラウザ ー ウィンドウ全体を占めます。このため、まさにこれが望んでいる通りの状態である場合を除いて、コンテナーの幅と高さを設定して igSplitter を任意のサイズに構成しなければなりません。
幅と高さの呼び出しはページ上のスプリッターのサイズを指定し、その値は CSS で利用可能な単位で指定できます。
以下の表で、igSplitter コントロールの要件を簡単に説明します。
| 要件 / 必要なリソース | 説明 | 必要な作業 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery は、これらのフレームワークの最上位にビルドされます。
|
ページの head セクションで両方のライブラリにスクリプト参照を追加します。 |
||||||||
| Modernizr ライブラリ （オプション） |
Modernizr ライブラリは、ブラウザーとデバイス機能を検出するために igSplitter で使用されます。これは必須ではなく、含まれていない場合、コントロールは HTML5 をサポートするブラウザーが動作する通常のデスクトップ環境であるように動作します。
|
ページの head セクションでライブラリにスクリプト参照を追加します。 |
||||||||
| igSplitter JavaScript リソース |
Ignite UI for jQuery ライブラリの igSplitter 機能は、いくつかのファイルにて配布されます。必要なリソースは以下の方法で読み込むことができます。
|
以下のいずれかを追加します。
|
||||||||
| IG テーマ (オプション) | このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル: {IG CSS root}/themes/Infragistics/infragistics.theme.css | |||||||||
| igSplitter 構造 | 以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。 {IG CSS root}/structure/modules/infragistics.ui.splitter.css |
ページのファイルに style 参照を追加します。
|
注: JavaScript と CSS リソースを読み込むためには igLoader コンポーネントを使うことを推奨します。この方法の詳細については、「Infragistics Loader の使用」トピックを参照してください。さらに、オンラインの Ignite UI for jQuery サンプル ブラウザー では、igSplitter コンポーネントで igLoader を使用する方法について特有の例が示されています。
igSplitter を HTML ページへ追加するための一般的な手順をおおまかに示すと、次のようになります。
必要なリソースへの参照を追加する
igSplitter コントロールを追加する
この手順は、実際の HTML/JavaScript 実装を使用して基本機能を持つ igSplitter コントロールを HTML ページへ追加するステップを説明します。igSplitter コントロールによって必要とされるすべての Ignite UI for jQuery リソースを読み込むための Infragistics Loader コンポーネントを使用します。
以下のスクリーンショットは最終結果のプレビューです。
以下の手順は、基本的な igSplitter コントロールを Web ページに追加する方法を示します。
必要なリソースへの参照を追加します。
必要なファイルを構造化します。
A. jQuery、jQueryUI および Modernizr JavaScript のリソースを Web ページが置かれているディレクトリ内に Scripts という名前のフォルダーに追加します。
B. Content/ig という名前のフォルダーに Ignite UI for jQuery CSS ファイルを追加します (詳細は、Ignite UI for jQuery のスタイル設定とテーマ設定のトピックを参照してください)。
C. Ignite UI for jQuery JavaScript ファイルを Web サイト またはアプリケーション内の Scripts/ig という名前のフォルダーに追加します (詳細は 「Ignite UI for jQuery での JavaScript リソースの使用」 トピックを参照)。
必要な JavaScript ライブラリへの参照を追加します。
jQuery、jQuery UI および Modernizr ライブラリの参照をページの head セクションに追加します。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="Scripts/modernizr.js"></script>
igLoader への参照を追加します。ページ内に igLoader スクリプトを含めます。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
必要なリソースをロードします。
igLoader をインスタンス化します。
HTML の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "Scripts/ig/",
cssPath: "Content/ig/",
resources: "igSplitter"
});
<script>
igSplitter コントロールを追加します。
HTML 要素を igSplitter をホストするために追加します。
HTML ページ上で igSplitter をホストするために HTML div 要素を追加します。
HTML の場合:
<div id="splitter">
<div>
First panel with grid example: <br />
<div id="grid"></div>
</div>
<div>
Second panel with html editor example: <br />
<div id="htmlEditor"></div>
</div>
</div>
igSplitter をインスタンス化します。
HTML ページのスクリプト要素に初期化コードを追加します。初期化コードは、以前に追加された div 要素で igSplitter インスタンスを作成します。
以下のコードは、コンテナーのサイズを指定することなく igSplitter コントロールのインスタンスを作成します。
JavaScript の場合:
$.ig.loader(function () {
// Create a basic igSplitter control
$("#splitter").igSplitter({
});
});
多くの場合、インスタンスのサイズを指定することになります。以下のコードでは、igSplitter コンテナーを 400 x 600 ピクセル (幅 x 高さ) になるよう構成します。
$.ig.loader(function () {
// Create a basic igSplitter control
$("#splitter").igSplitter({
width: 400,
height: 600 });
});
この手順は、基本的な機能を備えた igSplitter を ASP.NET MVC View に追加する方法を示します。この例では、必要なローダーの構成とともに ASP.NET MVC 構文を使用します。
以下のスクリーンショットは最終結果のプレビューです。
以下の手順は、基本的な igSplitter コントロールを ASP.NET MVC アプリケーションに追加する方法を示します。
必要なリソースへの参照を追加します。
必要なファイルを構造化します。
A. jQuery、jQueryUI および Modernizr JavaScript のリソースを Web ページが置かれているディレクトリ内に Scripts という名前のフォルダーに追加します。
B. Content/ig という名前のフォルダーに Ignite UI for jQuery CSS ファイルを追加します (詳細は、Ignite UI for jQuery のスタイル設定とテーマ設定のトピックを参照してください)。
C. Ignite UI for jQuery JavaScript ファイルを Web サイト またはアプリケーション内の Scripts/ig という名前のフォルダーに追加します (詳細は 「Ignite UI for jQuery での JavaScript リソースの使用」 トピックを参照)。
必要な JavaScript ライブラリへの参照を追加します。jQuery、jQuery UI および Modernizr ライブラリの参照をページの head セクションに追加します。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="Scripts/modernizr.js"></script>
igLoader への参照を追加します。ページ内に igLoader スクリプトを含めます。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
igSplitter 用の Loader MVC ヘルパー構成を追加する
ASP.NET MVC ビューへ以下のコードを追加します。
ASPX の場合:
@(Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Render()
)
igSplitter コントロールを追加します。
HTML 要素を igSplitter をホストするために追加します。
HTML ページ上で igSplitter をホストするために HTML div 要素を追加します。
HTML の場合:
<div id="splitter">
<div>
First panel with grid example: <br />
<div id="grid"></div>
</div>
<div>
Second panel with html editor example: <br />
<div id="htmlEditor"></div>
</div>
</div>
igSplitter をインスタンス化します。以下のコードは、コンテナーのサイズを指定することなく igSplitter コントロールのインスタンスを作成します。
@(Html.Infragistics()
.Splitter()
.ID("splitter")
.Height("300px")
.Width("900px")
.SplitterPanelSettings(p =>
{
p.AddPanel().Size("300px").Min("30px").Max("300px");
p.AddPanel().Size("500px").Collapsible(true);
})
.Render()
)
多くの場合、インスタンスのサイズを指定することになります。以下のコードでは、igSplitter コンテナーを 400 x 600 ピクセル (幅 x 高さ) になるよう構成します。
@(Html.Infragistics()
.ID("splitter")
.Height("400")
.Width("600")
.Render()
)
このサンプルでは、垂直 igSplitter コントロールを使用してページのレイアウトを TypeScript で管理する方法を紹介します。
最初のコンテナーは TypeScript クラスとして定義される国および大陸を含む igTree コントロールを表示します。
ノードをクリックすると、選択した項目の説明が右パネルに表示されます。
以下のスクリーンショットは最終結果のプレビューです。
以下の手順は、TypeScript を使用して基本的な igSplitter コントロールを追加する方法を示します。
必要なリソースへの参照を追加します。
Ignite UI for jQuery のテーマと構造ファイルを含めます。
HTML の場合:
<!-- 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" />
JavaScript ライブラリを追加します (modernizr はオプションです)。
HTML の場合:
<!-- JavaScript Library Dependencies -->
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
Ignite UI for jQuery スクリプトを含めます。カスタム ダウンロードを使用できますが、その他の方法については「Ignite UI for jQuery で JavaScript リソースを使用」を参照できます。
HTML の場合:
<!-- 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>
アプリケーション用の TypeScript ファイルまたは外部のリソースの参照パスを追加します。
HTML の場合:
<script src="./TypeScript/sampleApp.js"></script>
HTML の場合:
<script src="http://www.igniteui.com/data-files/continents-with-countries-and-cities.js"></script>
<script src="http://www.igniteui.com/TypeScriptSamples/splitter/typescript.js"></script>
igSplitter コントロールを追加します。
HTML 要素を igSplitter をホストするために追加します。
HTML ページ上で igSplitter をホストするために HTML div 要素を追加します。
HTML の場合:
<div id="splitter">
<div style="overflow: auto">
<ul id="tree"></ul>
</div>
<div><p>Select a destination from tree.</p></div>
</div>
データ ソースの追加
var continentsWithCountries = [{
"Text": "Europe",
"Description": "Europe is..",
"Countries": [{ "Text": "Bulgaria", "Description": "Bulgaria, officially .." }]
}, {
"Text": "Asia",
"Description": "Asia is the world's largest..",
"Countries": [{ "Text": "Japan", "Description": "Japan is an island.." }, { .. }]
}, {
"Text": "North America",
"Description": "North America..",
"Countries": [{ "Text": "United States", "Description": "The United States.." }]
}];
TypeScript 実装コードを追加し、TypeScript 用の Ignite UI for jQuery と jQuery の型定義への参照パスを含めます。
TypeScript の場合:
/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
declare var continentsWithCountries;
$(function () {
$("#splitter").igSplitter({
height: "300px",
panels: [{ size: 160, min: 100, max: 250 }]
});
$("#tree").igTree({
dataSource: continentsWithCountries,
bindings: {
textKey: "Text",
valueKey: "Text",
childDataProperty: "Countries"
}
});
$("#tree").on("igtreeselectionchanged", function (sender, eventArgs) {
var node = eventArgs.selectedNodes[0];
if (node.data.Description) {
(<JQuery>$("#splitter").igSplitter("secondPanel")).html(node.data.Description);
} else {
(<JQuery>$("#splitter").igSplitter("secondPanel")).html("No information found.");
}
});
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igSplitter の構成: このトピックは、igSplitter コントロールの構成方法をコード例を用いて説明します。
イベント処理 (igSplitter): このトピックは、イベント ハンドラーを igSplitter にアタッチする方法をコード例を用いて説明します。
アクセシビリティの遵守 (igSplitter): このトピックは、igSplitter コントロールのアクセシビリティ機能を説明し、このコントロールを含むページに対してアクセシビリティ準拠を実現させる方法に関するアドバイスを提供します。
既知の問題と制限 (igSplitter): このトピックでは、igSplitter コントロールの既知の問題と制限に関する情報を提供します。
jQuery と MVC API リンク (igSplitter): このトピックでは、igSplitter コントロールの jQuery および ASP.NET MVC ヘルパー クラスの API ドキュメントへのリンクを提供します。
このトピックについては、以下のサンプルも参照してください。
ベーシック垂直スプリッター: このサンプルでは、スプリッター コントロールを使用してページの垂直レイアウトを管理する方法を紹介します。最初のコンテナーは大陸および国を含むツリー コントロールを表示します。左の垂直パネルはサイズ変更の最大値および最小値があります。ノードをクリックすると、選択した項目の説明が右パネルに表示されます。
ベーシック水平スプリッター: このサンプルでは、スプリッター コントロールを使用して水平レイアウトのマスター/詳細グリッドを管理する方法を紹介します。最初のコンテナーは顧客データを含むマスター グリッドを含みます。マスター グリッドの行がクリックした後に 2 つ目のコンテナーにこの顧客の注文を含むグリッドを表示します。
ネスト スプリッター: このサンプルでは、ネスト スプリッターのレイアウトを管理する方法を紹介します。パネルは大陸、国、および都市を含むツリーを表示します。ノードをクリックすると、2 つ目のスプリッターにあるマップはノードの座標によって中央揃えます。国が選択した場合、その国の都市を含むグリッドはマップの下に表示されます。パネルはデフォルトでサイズ変更できません。
ASP.NET MVC の基本的な使用方法: このサンプルでは、 igSplitter の ASP.NET MVC ヘルパーを使用する方法を紹介します。
スプリッター API およびイベント: このサンプルでは、igSplitter コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。
オンラインで表示: GitHub