このトピックでは、igTileManager
™ コントロールの機能およびビヘイビアーを構成する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igTileManager の概要: このトピックでは、主要機能、最小要件およびユーザー機能性など、igTileManager
コントロールについて概念的な情報を提供します。
igTileManager の追加: このトピックではコード例を使用して、JavaScript または ASP.NET MVC のいずれかで igTileManage
コントロールを HTML ページに追加する方法を説明します。
igTileManager とデータのバインド: このトピックは、igTileManager
コントロールをサポートされているデータ ソースにバインドする方法を説明します。
このトピックは、以下のセクションで構成されます。
igTileManager
コントロールの構成可能な主な項目:
各要素については、igTileManager の構成で説明します。
以下の表は、igTileManager
コントロールを構成できる要素を示します。各要素の詳細は、この概要表の後のセクションを参照してください。
構成可能な項目 | 詳細 | JavaScript プロパティ | ASP.NET MVC プロパティ | |
---|---|---|---|---|
行数と列数 | 行数 | タイル グリッドに描画する行数と列数を構成できます。 | ||
列の数 | ||||
各列 | 列の高さ | タイル グリッドの列の幅と高さを構成できます。 | ||
列の幅 | ||||
タイルの左の余白 | タイル グリッドの各タイルの上と左の余白を構成できます。 | |||
タイルの上の余白 | ||||
操作モード | 最大化されたタイルのパネル数と配置 | 最大化されたタイルを最小化されたタイルと別のパネルに表示する、または同じパネルに同時に表示するか指定できます。後者の場合、最大化されたタイルの位置をパネル内に構成できます。 | ||
項目の位置とスパン | 項目の位置 | タイル グリッドでの項目の位置は、任意の位置の行とインデックスを指定して構成できます。 | ||
項目のサイズ | 長い項目が使用できるように、項目は複数の行と列にまたがって構成できます。 | |||
タイルの状態 | 最小化された状態 | タイルの状態は、各状態で個別に設定します。 | ||
最大化された状態 | ||||
タイルの余白 | 上の余白 | 最小化されたタイルの上と左の余白を構成し、タイル間のアウトセットを形成できます。 | ||
左の余白 | ||||
最小化されたタイル パネル | 列の数 | 最小化されたタイル パネルに描画する列数を構成できます。 | ||
最小化されたタイルの幅 | 最小化されたタイル パネルのタイルの幅を構成できます。 | |||
最小化されたタイルの高さ | 最小化されたタイル パネルのタイルの高さを構成できます。 | |||
スクロールバー | タイルがオーバーフローした場合に、最小化されたタイル パネルがスクロールバーで表示できるように指定できます。スクロールバーが無効の場合は、隠れたタイルを表示するためにスプリッターを移動する必要があります。 | |||
スプリッター バーの表示 | スプリッターの表示を指定できます。デフォルトで、スプリッターは表示されます。 | |||
アニメーション化されたトランジションの期間 | コンテナーのサイズ変更時のトランジションの期間 |
コンテナーのサイズとタイル状態(最小化または最大化)の変更時のアニメーション化されたトランジションの期間は、animationDuration オプションで構成されるため、常に同じ期間です。
|
||
最小化または最大化時のトランジションの期間 | ||||
ユーザー操作 | 最大化トリガー |
最大化をトリガーしない最小化されたタイルの要素を指定できます。デフォルトで、<a> タグと <inputs> タグをクリックしても最大化はトリガーされません。
|
タイル グリッドに描画する行数と列数を構成できます。行と列の数が指定されていない場合、コンテナーのタイルが最も良い位置に収まるように計算されます。
操作モード (デュアル パネルまたはシングル パネル) にかかわらず、cols オプションと rows オプションは、コンテナー全体の行数と列数を設定します。
デュアル パネル モードの場合は、rightPanelCols オプションがコンテナー全体の列数から、最小化されたタイルに応じた最小化されたタイル パネルの一定の列数を確保します。これは、最小化されたタイル パネルと 最大化されたタイル パネルの幅を事前に定義することになります。最大化されたタイル パネルは、columnWidth 設定と同じ最小幅を確保する必要があることに注意してください。rightPanelCols
の値を cols-1 未満に設定し、最大化されたタイル パネルに 1 つ以上のグリット列を確保します。
rightPanelCols
オプションは、デュアル パネル モードでのみ有効です。
タイル グリッドの列の幅と高さを構成できます。
デフォルトで、タイル マネージャーは利用可能なスペース全体を使用して、コンテナーに収まるように等しいサイズのタイルを描画します。columnWidth または columnHeight が設定されている場合、igTileManager
は設定に従って構成を描画し、コンテナーにタイルが収まり、残るスペースを使用するようにオプションの残りを計算します。
タイル グリッドの各タイルの上と左の余白を構成できます。デフォルトの構成には、余白は含まれていません。
columnWidth オプションと columnHeight オプションは、ピクセル単位またはパーセンテージ単位で設定できます。ディメンションの選択は、列の描画ロジックに影響します。
cols/rows 両方のオプションと columnWidth
/columnHeight
両方のオプションを、それぞれ同時に定義することができます。この場合、行のタイル数は cols オプション値に応じて設定され、各タイルのサイズは columnWidth
オプション値に応じて定義されます。同じ行のすべてのタイルの幅の合計がコンテナーの幅より大きい場合、水平スクロールバーが描画されます。
注: 利便性の点から、
columnWidth
/columnHeight
がパーセンテージで設定されている場合、その値は左と上の余白を含みます。たとえば、コンテナーの幅が 1000 ピクセルで、columnWidth
が '50%' に設定されている場合、各タイルの幅は 500 ピクセルになります。 ただし、marginLeft
: 50px が追加されると、タイルの幅は 450 ピクセルになります。したがって、パーセンテージを使用してタイルの幅と高さを指定する方が作業が容易になります。
また、コンテナーに表示されたスクロールバーは、コンテナーの幅または高さの一部として計算されません。したがって、スクロールバーのある 1000 ピクセル幅の同じコンテナーの例では、columnWidth
: '50%' で余白なしにすると、タイルの幅は 500 ピクセルより狭くなります。:
タイル グリッドでの項目の位置は、任意の位置の行とインデックスを指定して構成できます。また、長い項目を使用できるように、項目は複数の行と列にまたがって構成できます。各タイルの位置とサイズは、items オプションによって個別に指定できます。items オプションは、各タイルの位置とサイズの設定によって配置します。
以下の表で、項目の位置とサイズを構成するためのオプションについて説明します。
項目の位置とサイズの構成は列構成より優先順位が高いため、列構成をオーバーライドします。
最小化されたタイル パネルに配置された最小化されたタイルの外観も構成できます。最小化されたタイルを配置する列数 (rightPanelCols オプションを使用)、および最小化されたタイル パネルでのタイルの高さと幅 (rightPanelTilesHeight オプションと rightPanelTilesWidth オプションを使用) を定義できます。
タイルの状態は、minimizedState オプションと maximizedState オプションによりそれぞれの状態を個別に構成できます。タイルの状態の構成方法は、igTileManager
コントロールのインスタンスを作成する方法に応じて異なります。
igTileManager
を初期化する場合は、minimizedState
オプションと maximizedState
オプションに対して igTemplating
™ 文字列を提供します。提供されない場合は、コンテンツがタイルに描画されません。igTileManager
を初期化する場合は、minimizedState
オプションと maximizedState
オプションに対して jQuery セレクターを提供し、コンテンツが対応する状態で描画されるように指定します。いずれのオプションも指定されていない場合は、タイルのコンテンツ全体が状態に応じて表示されます。最小化されたタイルの余白は、グリッドの各タイルの周囲のスペースを定義します。最小化されたタイルの上と左の余白を構成し、タイル間のアウトセットを形成できます。タイルの余白は、marginTop オプションと marginLeft オプションで構成されます。
タイルの余白の値の構成方法は、タイルのサイズに影響します。タイルの幅は、コンテナーの幅から余白の合計を減算した残りの幅で計算されます。たとえば、800 ピクセルのコンテナーの各行に 4 つのタイルあり、タイルの左の余白に 10 ピクセル設定されている場合、タイル幅はコンテナーの幅に比例して設定され、各タイルの幅は 760 ピクセル (800 - (4 x 10) = 760) の 25 %になります。
最小化されたタイル パネルでスクロールを無効にできます。最小化されたタイル パネルのスクロールバーを非表示にするには、showRightPanelScroll オプションを false に設定します。スクロールバーを非表示に設定した場合は、スプリッターを移動して、最小化されたタイル パネルの隠れたタイルを表示します。
パネルサイズが変更されないように、スプリッター バーも非表示にできます。スプリッター バーを非表示にするには、showSplitter オプションを false に設定します。
コンテナーのサイズとタイル状態(最小化または最大化)の変更時のアニメーション化されたトランジションの期間は、1 つのオプション - animationDuration - で設定できます。この設定は最小化および最大化の両方のアニメーションに適用されます。animationDuration は、ミリ秒単位で設定します。デフォルト値は 500 です。このオプションを 0 に設定すると、アニメーション化される期間を無効にできます。
デフォルト構成の概要
デフォルト設定では、igTileManager
コントロールは、マークアップされた項目のタイルを左と上の余白なしで描画します。すべてのタイルは、タイルの数に応じて行数と列数が同じになるようにコンテナーに収められます。デフォルトの構成には、余白は含まれていません。
以下の表は、このトピックで使用したコード例をまとめたものです。
例 | 説明 |
---|---|
特定の行数と列数の構成 | この例は、HTML マークアップから指定された列数、行数、余白を持つタイル グリッドを描画するために igTileManager コントロールを構成する方法を示します。 |
各列の構成 | この例は、HTML マークアップから指定された列のディメンションと余白を持つタイル グリッドを描画するために igTileManager コントロールを構成する方法を示します。 |
タイルの任意の位置とスパンの構成 | この例は、個別に位置指定された項目を持つタイル グリッドを描画するために igTileManager コントロールを構成する方法を示します。 |
カスタム タイルの構成 | この例は、最小化されたタイル状態と最大化されたタイル状態を持つタイル グリッドを描画するために igTileManager コントロールを構成する方法を示します。 |
最小化されたタイル パネルの構成 | この例は、カスタム レイアウトで最小化されたタイル パネルを構成する方法を示します。 |
アニメーション化されたトランジションの期間の構成 | この例は、コンテナーのサイズを変更しタイルを最小化または最大化するために igTileManager のアニメーション化されたトランジションを構成する方法を示します。 |
この例は、HTML マークアップから指定された列数、行数、余白を持つタイル グリッドを描画するために igTileManager
コントロールを構成する方法を示します。
例では、高さが 800 ピクセル、ウィンドウの幅全体 (100%) を使用する igTileManager
コントロールを構成します。タイルは 5 列 4 行で配置されます。左と上のタイルの余白は 10 ピクセルです。各タイルは高さ 190 ピクセルで、互いに 10 ピクセルの余白でアウトセットされます。タイルの幅は、コンテナーのサイズに合わせて計算されます。
タイルは、コントロール描画時にすべて最小化された状態となるように構成します。つまり、最初はチームのロゴのみが表示されます。任意のタイルをクリックすると、そのタイルが展開され、チームに関するいくつかの統計情報が表示されます。
以下のコードはこの例を実装します。
HTML の場合:
<style type="text/css">
#dashboard {
position: relative;
width: 100%;
height: 800px;
}
</style>
<div id="dashboard">
<div>
<figure class="minimized">
<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">
<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">
<img src="wizards-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="wizards-maximized.jpg" alt="error">
<ul>
<li>Top scorer: John Wall - 18,5 PPG</li>
<li>Most rebounds per game: Emeka Okafor - 8,80 TOT</li>
<li>Highest three point percentage: Martell Webster - 0.422</li>
</ul>
</div>
</div>
</div>
JavaScript の場合:
$("#dashboard").igTileManager({
cols: 5,
rows: 4,
marginLeft: 10,
marginTop: 10,
minimizedState: ".minimized",
maximizedState: ".maximized"
});
この例は、HTML マークアップから指定された列のディメンションと余白を持つタイル グリッドを描画するために igTileManager コントロールを構成する方法を示します。
例では、高さが 800 ピクセル、ウィンドウの幅全体 (100%) を使用する igTileManager
コントロールを構成します。タイル マネージャーの列は、それぞれ高さ 250 ピクセル、幅 250 ピクセルになります。グリッドの列と行の数は、コンテナーのサイズによって決定します。タイルの左と上の余白は 10 ピクセルに設定されます。
タイルは、コントロール描画時にすべて最小化された状態となるように構成します。 つまり、最初はチームのロゴのみが表示されます。 任意のタイルをクリックすると、そのタイルが展開され、チームに関するいくつかの統計情報が表示されます。
以下のコードはこの例を実装します。
HTML の場合:
<style type="text/css">
#dashboard {
position: relative;
width: 100%;
height: 800px;
}
</style>
<div id="dashboard">
<div>
<figure class="minimized">
<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">
<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">
<img src="wizards-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="wizards-maximized.jpg" alt="error">
<ul>
<li>Top scorer: John Wall - 18,5 PPG</li>
<li>Most rebounds per game: Emeka Okafor - 8,80 TOT</li>
<li>Highest three point percentage: Martell Webster - 0.422</li>
</ul>
</div>
</div>
</div>
JavaScript の場合:
$("#dashboard").igTileManager({
columnWidth: 250,
columnHeight: 250,
marginLeft: 10,
marginTop: 10,
minimizedState: ".minimized",
maximizedState: ".maximized"
});
この例は、個別に位置指定された項目を持つタイル グリッドを描画するために igTileManager
コントロールを構成する方法を示します。
以下のコードはこの例を実装します。
HTML の場合:
<style type="text/css">
#dashboard {
position: relative;
width: 100%;
height: 800px;
}
</style>
<div id="dashboard">
<div>
<figure class="minimized">
<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">
<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">
<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>
<div>
<figure class="minimized">
<img src="boston-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="boston-maximized.jpg" alt="error">
<ul>
<li>Top scorer: Jeff Green - 20.3 PPG</li>
<li>Most rebounds per game: Kevin Garnett - 13.70 TOT</li>
<li>Highest three point percentage: Jeff Green - 0.455</li>
</ul>
</div>
</div>
</div>
JavaScript の場合:
$("#dashboard").igTileManager({
items: [
{ rowIndex: 0, colIndex: 0, rowSpan: 1, colSpan: 2 },
{ rowIndex: 1, colIndex: 0, rowSpan: 1, colSpan: 1 },
{ rowIndex: 1, colIndex: 1, rowSpan: 2, colSpan: 1 },
{ rowIndex: 2, colIndex: 0, rowSpan: 1, colSpan: 1 }
],
minimizedState: ".minimized",
maximizedState: ".maximized"
});
この例は、最小化されたタイル状態と最大化されたタイル状態を持つタイル グリッドを描画するために igTileManager
コントロールを構成する方法を示します。コントロールのインスタンスをデータ ソースと HTML マークアップの 2 種類の方法で作成します。
以下のコードは、タイル グリッドをデータ ソースで初期化するときに実装します。
JavaScript の場合:
$("#dashboard").igTileManager({
dataSource: dataSource,
minimizedState: '<h3>${name} - Minimized</h3>',
maximizedState: '<h3>${name} - Maximized</h3>'
});
以下のコードは、タイル グリッドを HTML マークアップで初期化するときに実装します。
JavaScript の場合:
$("#dashboard").igTileManager({
dataSource: ,
minimizedState: '.minimized',
maximizedState: '.maximized'
});
この例は、カスタム レイアウトで最小化されたタイル パネルを構成する方法を示します。
例では、最初にタイルを選択し最大化します。次に最小化されたタイル パネルの 2 列に、最小化されたタイルを再グループ化します。スプリッター バーは無効に設定します。
以下のコードはこの例を実装します。
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>Boston Celtics</figcaption>
<img src="boston-logo.jpg" alt="error">
</figure>
<div class="maximized">
<img src="boston-maximized.jpg" alt="error">
<ul>
<li>Top scorer: Jeff Green - 20.3 PPG</li>
<li>Most rebounds per game: Kevin Garnett - 13.70 TOT</li>
<li>Highest three point percentage: Jeff Green - 0.455</li>
</ul>
</div>
</div>
</div
JavaScript の場合:
$("#dashboard").igTileManager({
rightPanelCols: 2,
rightPanelTilesWidth: 100,
rightPanelTilesHeight: 100,
showSplitter: false
});
この例は、コンテナーのサイズを変更しタイルを最小化または最大化するために igTileManager のアニメーション化されたトランジションを構成する方法を示します。
例では、2000 ミリ秒のアニメーション化されたトランジションを構成します。
以下のコードはこの例を実装します。
JavaScript の場合:
$("#dashboard").igTileManager({
animationDuration: 2000,
columnWidth: 250,
columnHeight: 250
});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
イベントの処理 (igTileManager): このトピックではコード例を使用して、イベント ハンドラーを igTileManager
に添付する方法を説明します。
アクセシビリティの遵守 (igTileManager): このトピックでは、igTileManager
コントロールのアクセシビリティ機能を説明し、このコントロールを含むページのアクセシビリティ遵守を実現する方法を説明します。
既知の問題と制限 (igTileManager): このトピックでは、igTileManager
コントロールの既知の問題と制限、その回避策に関する情報を提供します。
jQuery および MVC API リファレンス リンク (igTileManager): このトピックでは、igTileManager
コントロールの jQuery および ASP.NET MVC ヘルパー クラスの API 参照ドキュメントへのリンクを提供します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
JSON データへのタイル マネージャーのバインド: このサンプルは、igTileManager
コントロールを JSON データ ソースにバインドする方法を紹介します。
タイル マネージャーの項目構成: このサンプルは、igTileManager
内部にタイルの位置とサイズを設定する方法を紹介します。
オンラインで表示: GitHub