このトピックではコード例を使用して、JavaScript または ASP.NET MVC のいずれかで igTileManager コントロールを HTML ページに追加する方法を説明します。このトピックは、HTML マークアップでの igTileManager の初期化について説明します。データ ソースからコントロールのインスタンスを作成する場合は、igTileManager とデータのバインドのトピックを参照してください。
このトピックを理解するためには、以下のトピックを理解しておく必要があります:
igTileManager コントロールについて概念的な情報を提供します。このトピックは、以下のセクションで構成されます。
igTileManager は、DIV 要素で初期化するコントロールです。DIV に追加されたマークアップやデータ ソースから、igTileManager を作成できます (igTileManager とデータのバインドを参照してください)。このトピックは、マークアップでの初期化を説明します。
igTileManager コントロールによって必要とされるすべての Ignite UI for jQuery リソースを読み込むために、Infragistics Loader (igLoader) コンポーネントを使用します。マークアップについても、HTML ページに定義されています。
以下の表で、igTileManager コントロールの要件を簡単に説明します。
| 要件 / 必要なリソース | 説明 | 必要な作業 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery は、これらのフレームワークの最上位にビルドされます。 |
ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。
|
||||||||||||||
| JavaScript リソース |
Ignite UI for jQuery ライブラリの igTileManager 機能は、いくつかのファイルにて配布されます。必要なリソースは以下の方法で読み込むことができます。
|
以下のいずれかを追加します。
|
||||||||||||||
| IG テーマ (オプション) |
このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル:
{IG CSS root}/themes/Infragistics/infragistics.theme.css
|
ページのファイルに style 参照を追加します。
|
||||||||||||||
| スタイル リファレンス |
コントロールを正しく描画するには、以下の CSS ファイルが必要です。{IG CSS root}/structure/modules/infragistics.ui.layout.css``{IG CSS root}/structure/modules/infragistics.ui.splitter.css
|
ページのこれらのファイルに スタイル リファレンスを追加します。
|
||||||||||||||
igTileManager structure
|
以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。
{IG CSS root}/structure/modules/infragistics.ui.tilemanager.css
|
ページのファイルに style 参照を追加します。
|
注: JavaScript と CSS リソースを読み込むためには
igLoaderコンポーネントを使うことを推奨します。この方法の詳細は、Infragistics Loader による必要なリソースの自動追加のトピックを参照してください。さらに、オンラインの Ignite UI for jQuery サンプル ブラウザー には、igTileManagerコンポーネントでigLoaderを使用する方法の具体的な例が記載されています。
igTileManager を HTML ページへ追加するための一般的な手順をおおまかに示すと、次のようになります。
igTileManager コントロールをホストするための HTML 要素の追加
igTileManager のインスタンス作成
この手順は、実際の HTML/JavaScript 実装を使用して、基本機能を持つ igTileManager コントロールを HTML ページへ追加するステップを説明します。igTileManager コントロールによって必要とされるすべての Ignite UI for jQuery リソースを読み込むために、Infragistics Loader コンポーネント (igLoader) を使用します。マークアップについても、HTML ページに定義されています。
以下のスクリーンショットは最終結果のプレビューです。
必要なリソースが追加され、適切に参照されていること。(リソースの概要については、要件を参照してください。)以下が含まれます。
適切な場所に追加された必要なファイル:
Web サイトまたはアプリケーションにある Scripts/ig という名前のフォルダーに追加された Ignite UI for jQuery JavaScript ファイル (詳細は、Ignite UI for jQuery での JavaScript リソースの使用のトピックを参照してください。)
ページの <head> セクションで参照される、必要な JavaScript リソース。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
HTML の場合:
<script type="text/javascript">
以下の手順は、基本的な igTileManager コントロールを Web ページに追加する方法を示します。その他のシナリオについては、igTileManager の構成を参照してください。
ターゲット要素を igTileManager をホストするために追加します。
Web ページで、igTileManager コントロールの基本オブジェクトとして提供するためにターゲットの HTML DIV 要素を定義し、その ID を設定します。HTML ページの 3 つのタイルを表す見出しと合わせて 3 つの DIV を追加します。
HTML の場合:
<style type="text/css">
#dashboard {
position: relative;
width: 100%;
height: 800px;
}
</style>
<div id="dashboard">
<div>
<figure class=”minimized”>
<figcaption>Miami Heat</figcaption>
<img src="miami-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="miami-maximized.jpg" alt="error">
<ul>
<li>Top scorer: LeBron James - 25,9 PPG</li>
<li>Most rebounds per game: LeBron James - 8.40 TOT</li>
<li>Highest three point percentage: James Jones - 0.750</li>
</ul>
</div>
</div>
<div>
<figure class=”minimized”>
<figcaption>San Antonio Spurs</figcaption>
<img src="San-Antonio-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="San-Antonio-maximized.jpg" alt="error">
<ul>
<li>Top scorer: Tony Parker - 20,3 PPG</li>
<li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>
<li>Highest three point percentage: Matt Bonner - 0.442</li>
</ul>
</div>
</div>
<div>
<figure class=”minimized”>
<figcaption>New York Knicks</figcaption>
<img src="NY-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="ny-maximized.jpg" alt="error">
<ul>
<li>Top scorer: Carmelo Anthony - 28,7 PPG</li>
<li>Most rebounds per game: Tyson Chandler - 10.70 TOT</li>
<li>Highest three point percentage: Steve Novak - 0.425</li>
</ul>
</div>
</div>
igTileManager のインスタンスを作成し、任意のレイアウトを指定します。
HTML ページのスクリプト要素に初期化コードを追加します。初期化コードが、以前に追加された DIV 要素で igTileManager インスタンスを作成します。
以下のコードは、各辺が 250 ピクセルの四角形のタイルで igTileManager コントロールのインスタンスを作成します。
JavaScript の場合:
$.ig.loader(function () {
// Create a basic igTileManager control
$("#dashboard").igTileManager({
columnWidth: 250,
columnHeight: 250,
minimizedState: “.minimized”,
maximizedState: “.maximized”
});
});
この手順は、基本的な機能を備えた igTileManager を ASP.NET MVC View に追加する方法を示します。この例では、必要なローダーの構成とともに ASP.NET MVC 構文を使用します。
以下のスクリーンショットは、最終結果のプレビューです。
必要なリソースが追加され、適切に参照されていること。 (リソースの概要については、要件を参照してください。)以下が含まれます。
ページの <head> セクションで参照される、必要な JavaScript リソース。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
ページで参照される igLoader コンポーネント。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
igTileManager 用に構成された Ignite UI for MVC Loader:
ASPX の場合:
@(Html.Infragistics()
.Loader()
.ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Render()
)
以下の手順は、基本的な igTileManager コントロールを ASP.NET MVC アプリケーションに追加する方法を示します。その他のシナリオについては、igTileManager の構成を参照してください。
ターゲット要素を igTileManager をホストするために追加します。
Web ページで、igTileManager コントロールの基本オブジェクトとして提供するためにターゲットの HTML DIV 要素を定義し、その ID を設定します。HTML ページの 3 つのタイルを表す見出しと合わせて 3 つの DIV を追加します。
HTML の場合:
<style type="text/css">
#dashboard {
position: relative;
width: 100%;
height: 800px;
}
</style>
<div id="dashboard">
<div>
<figure class=”minimized”>
<figcaption>Miami Heat</figcaption>
<img src="miami-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="miami-maximized.jpg" alt="error">
<ul>
<li>Top scorer: LeBron James - 25,9 PPG</li>
<li>Most rebounds per game: LeBron James - 8.40 TOT</li>
<li>Highest three point percentage: James Jones - 0.750</li>
</ul>
</div>
</div>
<div>
<figure class=”minimized”>
<figcaption>San Antonio Spurs</figcaption>
<img src="San-Antonio-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="San-Antonio-maximized.jpg" alt="error">
<ul>
<li>Top scorer: Tony Parker - 20,3 PPG</li>
<li>Most rebounds per game: Tim Duncan - 9.90 TOT</li>
<li>Highest three point percentage: Matt Bonner - 0.442</li>
</ul>
</div>
</div>
<div>
<figure class=”minimized”>
<figcaption>New York Knicks</figcaption>
<img src="NY-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="ny-maximized.jpg" alt="error">
<ul>
<li>Top scorer: Carmelo Anthony - 28,7 PPG</li>
<li>Most rebounds per game: Tyson Chandler - 10.70 TOT</li>
<li>Highest three point percentage: Steve Novak - 0.425</li>
</ul>
</div>
</div>
igTileManager のインスタンス作成
以下のコードは、各辺が 250 ピクセルの四角形のタイルで igTileManager コントロールのインスタンスを作成します。
ASPX の場合:
@(Html.
Infragistics().
ID("dashboard").
minimizedState(“.minimized”).
maximizedState(“.maximized”).
Render()
)
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igTileManager とデータのバインド: このトピックでは、igTileManager コントロールをJavaScript 配列、XML データ、厳密に型指定された MVC ビュー、およびリモート サービスからの JSON レスポンスにバインドする方法を説明します。
igTileManager の構成: このトピックでは、igTileManager コントロールの機能およびビヘイビアーを構成する方法を説明します。
イベントの処理 (igTileManager): このトピックではコード例を使用して、イベント ハンドラーを igTileManager に添付する方法を説明します。
アクセシビリティの遵守 (igTileManager): このトピックでは、igTileManager コントロールのアクセシビリティ機能を説明し、このコントロールを含むページのアクセシビリティ遵守を実現する方法を説明します。
既知の問題と制限 (igTileManager): このトピックでは、igTileManager コントロールの既知の問題と制限、その回避策に関する情報を提供します。
jQuery および MVC API リファレンス リンク (igTileManager): このトピックは、igTileManager コントロールの API 参照ドキュメントのリンクの一覧です。
このトピックについては、以下のサンプルも参照してください。
ASP.NET MVC の基本的な使用方法: このサンプルは、igTileManager コントロールの ASP.NET MVC ヘルパーを使用する方法を紹介します。
タイル マネージャーの JSON バインド: このサンプルは、igTileManager コントロールを JSON データ ソースにバインドする方法を紹介します。
タイル マネージャーの項目構成: このサンプルは、igTileManager 内部にタイルの位置とサイズを設定する方法を紹介します。
タイル マネージャーでリード タイルを構成: このサンプルでは、既存のマークアップでコンテナーに対して、igTileManager をインスタンス化して、リード タイルを定義 / 構成する方法を紹介します。リード タイルは展開した際に、残りのタイルと切り替わります。
オンラインで表示: GitHub