このトピックでは、igPopover
™ コントロールのコンテンツの構成、アクティブ化、および配置する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igPopover の概要: このトピックでは、igPopover
コントロールとその主な特長および機能の概要を説明します。
igPopover の追加: このトピックでは、コード例を使用して、JavaScript または ASP.NET MVC で HTML ページに igPopover
コントロールを追加する方法を説明します。
このトピックは、以下のセクションで構成されます。
igPopover
コントロールはデフォルトの設定で十分に機能しますが、デフォルトの動作や外観をカスタマイズする場合に、ヘッダーや本文を構成できるプロパティのセットが提供されています。ポップオーバーのアクティブ化 (トリガーするイベント)、ディメンション、位置およびポインター矢印の表示を管理することもできます。
以下の表は、igPopover
コントロールの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。表の緑色で強調表示された要素は、このヘルプのコード例で詳細に紹介しています。
構成可能な項目 | 詳細 | プロパティ | |
---|---|---|---|
コンテンツ | ヘッダー | ヘッダーは構成できます。 ヘッダーのタイトルは、HTML 文字列または空です。空の場合、ヘッダーは表示されません。 ヘッダーにオプションで閉じるボタンを描画することもできます。 | |
ボディ |
igPopover コンテンツの本文は、カスタマイズできます。
以下に設定できます。
|
||
ターゲット | デフォルトでは、igPopover はシングル要素で初期化されます。selectors オプションに設定すると、マルチ ターゲットを構成できます。 | ||
アクティブ化 | ポップオーバーを表示するイベントは構成できます。 | ||
配置 | 方向 | ターゲット要素に対するポップオーバーの位置。 direction は、ポップオーバー コンテナーをターゲットのどちら側に表示するか指定します。 | |
位置 | ポップオーバーがターゲットより大きい場合のターゲット要素に対するポップオーバーの位置。ポップオーバーが小さい場合は、常に表示領域の中央に表示されます。 | ||
コンテインメント | コンテインメントは、ポップオーバーを表示できる領域を制限する、境界線が機能するオブジェクト (DIV コンテナーなど) を指定することにより機能します。 | ||
サイズとディメンション | ポップオーバーのコンテナーに対して事前定義された幅と高さを指定することができます。定義されていない場合、最大の幅と高さに設定されます。 | ||
ポインター |
ポップオーバー ポインターの矢印のサイズおよび色は構成できます。ポインターにはオプションがなく、CSS クラスで管理します。
|
デフォルトでは、igPopover
のヘッダーは表示されません。ヘッダーは、タイトルとして使用するように指定された文字列を表示します。また、オプションで閉じるボタンも表示します。ヘッダーは、HTML コンテンツを受け入れる headerTemplate.title プロパティを設定し管理します。CSS クラスを使用して、ヘッダーと閉じるボタンのルック アンド フィールをさらにカスタマイズできます (igPopover のスタイル設定を参照)。
以下の表は、任意の構成とそれを管理するプロパティ設定のマッピングを示します。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
ポップオーバーのタイトルの表示 | headerTemplate.title | HTML の文字列として使用する値 |
閉じるボタンの表示 | headerTemplate.closeButton | true |
閉じるボタンの非表示 | headerTemplate.closeButton | false |
以下のスクリーンショットは、以下の設定の結果、igPopover
の外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
headerTemplate.closeButton | true |
headerTemplate.title | “We're social” |
以下のコードはこの例を実装します。
JavaScript の場合:
$( '#popoverTooltip' ).igPopover( {
headerTemplate:{
closeButton: true,
title: 'We’re social'
},
closeOnBlur: false
} );
デフォルトでは、igPopover
はターゲット要素のタイトル属性に設定される本文コンテンツのみを表示します。カスタマイズしたコンテンツを表示するには、contentTemplate
オプションを使用します。以下に設定できます。
これにより、コンテキスト メニュー、表、画像、動的コンテンツの提供など、広範な使用シナリオに対応できます。
以下の表では、希望の構成をプロパティ設定にマップしています。
構成の目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
ポップオーバーの本文のコンテンツ | contentTemplate | 以下のいずれか:
|
以下のスクリーンショットは、テンプレート データを置き換え、最終コンテンツを HTML 文字列として返すために、igPopover
がそのコンテンツをテンプレートとターゲット DOM 要素の値属性を使用する関数に設定した結果として、外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
contentTemplate | JavaScript の場合:function contentFunction(){...} |
以下のコードはこの例を実装します。
JavaScript の場合:
$( '#popoverTooltip' ).igPopover( {
..
maxHeight: null,
maxWidth: 260,
contentTemplate: function contentFunction()
{
var imgTemplate = "<img class='map' alt='${value}' src='http://maps.google.com/maps/api/staticmap?zoom=10&size=250x250&maptype=terrain&sensor=false¢er=${value}'>";
var data = [{ value: $( this )[0].value }];
return $.ig.tmpl( imgTemplate, data );
}
} );
ポップオーバーを表示するユーザー操作を構成できます。これは、当該イベントを showOn プロパティの値として取り込むことで管理されます。規定値は 「mouseenter」 です。これにより、マウス ポインターをターゲット要素の上に置くと、ポップオーバーが表示されます。
注: アクティブ化イベントは、タッチ環境で制御することができません。アクティブ化にどのイベントが設定されていても、コントロールは常にユーザーのタップ操作を表示します (つまり、showOn オプションの設定は無視されます)。
以下の表では、希望の構成をプロパティ設定にマップしています。
ポップオーバーを表示するユーザー操作: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
マウス ポインターをターゲット要素の上に置く | showOn | “mouseenter” |
ターゲット要素をクリックする | showOn | “click” |
ターゲット要素にフォーカスを移動する | showOn | “focus” |
以下のスクリーンショットは、以下の設定の結果、igPopover
がどのように動作するかを示します。
プロパティ | 値 |
---|---|
showOn | “focus” |
以下のコードはこの例を実装します。
JavaScript の場合:
$( '#popoverTooltip' ).igPopover( {
selectors: "[title]",
showOn: "focus"
} );
ポップオーバーの配置は direction プロパティで管理されます。ターゲット要素の上下左右のセクションにポップオーバーを表示できます。
デフォルトの場合およびターゲット要素がポップオーバーより小さい場合、ポップオーバーは表示領域の中央に表示されます。
ポップオーバーがターゲット要素より大きい場合、ポップオーバーは、ターゲット要素の direction として設定された側に沿う始点、中間、または終点に配置できます。
ターゲット要素の側に沿ったポップオーバー配置の微調整は、position プロパティで管理されます。
以下の表では、希望の構成をプロパティ設定にマップしています。
ポップオーバーの配置先: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
自動的に、ターゲット要素の表示領域のもっとも適した位置 (優先順位は下 > 右 > 上 > 左の順です。) | direction | “auto” |
ターゲット要素の表示領域の左側 | direction | "left" |
ターゲット要素の表示領域の右側 | direction | "right" |
ターゲット要素の表示領域の上部 | direction | “top” |
ターゲット要素の表示領域の下部 | direction | “bottom” |
自動的 (「balanced」設定がもっともよく選択されます)ポップオーバーのサイズがターゲットより小さい場合は常にこの設定が適用されます。 | position | "auto" |
ターゲット要素の direction として設定された側の中央 | position | “balanced” |
ターゲット要素の direction として設定された側の始点(設定された側の始点とは、direction が「top」/「bottom」の場合は左側のセクション、「left」/「right」の場合は上部のセクションとみなされます。) | position | “start” |
ターゲット要素の direction として設定された側の終点(設定された側の終点とは、direction が「top」/「bottom」の場合は右側のセクション、「left」/「right」 の場合は下部のセクションとみなされます。) | position | “end” |
以下のスクリーンショットは、ターゲット要素より大きい igPopover
を示します。ポップオーバーは、以下の設定の結果として、ターゲット入力フィールドの右側に表示するように設定され、DOM 要素の始点 (以下の場合は上部) に表示されます。
以下のコードはこの例を実装します。
JavaScript の場合:
$( '#popoverTooltip' ).igPopover( {
direction: "right",
position: "start",
headerTemplate:{
closeButton: true,
title: 'Location of the city using Google maps'
},
closeOnBlur: false,
showOn: "focus"
} );
「コンテインメント」とは、指定された領域内にポップオーバーの配置を制限することを意味します。コンテインメントは、ポップオーバーを表示できる領域を制限する、境界線が機能するオブジェクト (DIV コンテナーなど) を指定することにより機能します。
以下の表では、希望の構成をプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
ポップオーバーを表示する領域の制限 | containment | ポップオーバーが表示される領域を制限する要素の jQuery オブジェクト。 |
以下のスクリーンショットは、アンカー要素 (青色の円) に関連するコンテンツを表示するために構成されたポップオーバーを示します。ただし、ポップオーバーはコンテインメント <div>
要素の内側でのみ表示するように制限されているため (点線の境界で示す)、ターゲット要素の下に表示されます。以下の設定の結果を示します。
プロパティ | 値 |
---|---|
containment | $( '#popoverContainment' ) |
以下のコードはこの例を実装します。
JavaScript の場合:
$( '#bodyParts' ).igPopover( {
direction: "auto",
position: "auto",
closeOnBlur: false,
animationDuration: 150,
maxHeight: 300,
selectors: "a",
containment: $("#bodyParts"),
headerTemplate: {
closeButton: true,
title: "Body parts"
},
showOn: "mouseenter"
} );
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
イベントの処理 (igPopover): このトピックでは、igPopover
コントロールのイベントを説明し、使用方法のコード例をいくつか紹介します。
igPopover のスタイル設定: このトピックでは、コード例を使用して、CSS を使用した igPopover
コントロールのルック アンド フィールを構成する方法を説明します。コンテンツの背景色、ポインターの表示と色、ヘッダーの色、および閉じるボタンの外観の設定が含まれます。
このトピックについては、以下のサンプルも参照してください。
基本的な使用方法: このサンプルは、JavaScript による igPopover
の基本的な初期化シナリオ (単一のターゲット要素および複数のターゲット要素) を紹介します。
ASP.NET MVC の使用方法: このサンプルは、ASP.NET MVC シナリオでの igPopover
コントロールを紹介します。コントロールは、チェーン構文を使用して View で初期化されます。
オンラインで表示: GitHub