igPopover の構成

トピックの概要

目的

このトピックでは、igPopover™ コントロールのコンテンツの構成、アクティブ化、および配置する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

• igPopover の概要: このトピックでは、igPopover コントロールとその主な特長および機能の概要を説明します。

• igPopover の追加: このトピックでは、コード例を使用して、JavaScript または ASP.NET MVC で HTML ページに igPopover コントロールを追加する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• igPopover の構成 - 概要
  • igPopover 構成の概要
  • igPopover 構成の概要表
• ヘッダーの構成
  • 概要
  • プロパティ設定
  • 例
• 本文の構成
  • 概要
  • プロパティ設定
  • 例
• アクティブ化の構成
  • 概要
  • プロパティ設定
  • 例
• 配置の構成
  • 概要
  • プロパティ設定
  • 例
• コンテインメントの構成
  • 概要
  • プロパティ設定
  • 例
• 関連コンテンツ
  • トピック
  • サンプル

igPopover の構成 - 概要

igPopover 構成の概要

igPopover コントロールはデフォルトの設定で十分に機能しますが、デフォルトの動作や外観をカスタマイズする場合に、ヘッダーや本文を構成できるプロパティのセットが提供されています。ポップオーバーのアクティブ化 (トリガーするイベント)、ディメンション、位置およびポインター矢印の表示を管理することもできます。

igPopover 構成の概要表

以下の表は、igPopover コントロールの構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。表の緑色で強調表示された要素は、このヘルプのコード例で詳細に紹介しています。

ヘッダーの構成

概要

デフォルトでは、igPopover のヘッダーは表示されません。ヘッダーは、タイトルとして使用するように指定された文字列を表示します。また、オプションで閉じるボタンも表示します。ヘッダーは、HTML コンテンツを受け入れる headerTemplate.title プロパティを設定し管理します。CSS クラスを使用して、ヘッダーと閉じるボタンのルック アンド フィールをさらにカスタマイズできます (igPopover のスタイル設定を参照)。

プロパティ設定

以下の表は、任意の構成とそれを管理するプロパティ設定のマッピングを示します。

例

以下のスクリーンショットは、以下の設定の結果、igPopover の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

$( '#popoverTooltip' ).igPopover( {
    headerTemplate:{
        closeButton: true,
        title: 'We’re social'
    },
    closeOnBlur: false
} );

本文の構成

概要

デフォルトでは、igPopover はターゲット要素のタイトル属性に設定される本文コンテンツのみを表示します。カスタマイズしたコンテンツを表示するには、contentTemplate オプションを使用します。以下に設定できます。

• HTML 文字列
• HTML コンテンツを描画する jQuery コード
• ポップオーバーの表示のたびに呼び出される関数

これにより、コンテキスト メニュー、表、画像、動的コンテンツの提供など、広範な使用シナリオに対応できます。

プロパティ設定

以下の表では、希望の構成をプロパティ設定にマップしています。

例

以下のスクリーンショットは、テンプレート データを置き換え、最終コンテンツを HTML 文字列として返すために、igPopover がそのコンテンツをテンプレートとターゲット DOM 要素の値属性を使用する関数に設定した結果として、外観がどのようになるか示しています。

以下のコードはこの例を実装します。

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&center=${value}'>";
        var data = [{ value: $( this )[0].value }];
        return $.ig.tmpl( imgTemplate, data );
    }      
} );

アクティブ化の構成

概要

ポップオーバーを表示するユーザー操作を構成できます。これは、当該イベントを showOn プロパティの値として取り込むことで管理されます。規定値は 「mouseenter」 です。これにより、マウス ポインターをターゲット要素の上に置くと、ポップオーバーが表示されます。

注: アクティブ化イベントは、タッチ環境で制御することができません。アクティブ化にどのイベントが設定されていても、コントロールは常にユーザーのタップ操作を表示します （つまり、showOn オプションの設定は無視されます）。

プロパティ設定

以下の表では、希望の構成をプロパティ設定にマップしています。

例

以下のスクリーンショットは、以下の設定の結果、igPopover がどのように動作するかを示します。

以下のコードはこの例を実装します。

JavaScript の場合:

$( '#popoverTooltip' ).igPopover( {                       
    selectors: "[title]",
    showOn: "focus"      
} );

配置の構成

概要

ポップオーバーの配置は direction プロパティで管理されます。ターゲット要素の上下左右のセクションにポップオーバーを表示できます。

デフォルトの場合およびターゲット要素がポップオーバーより小さい場合、ポップオーバーは表示領域の中央に表示されます。

ポップオーバーがターゲット要素より大きい場合、ポップオーバーは、ターゲット要素の direction として設定された側に沿う始点、中間、または終点に配置できます。

• direction プロパティが 「left」または「right」に設定されている場合、ポップオーバーはターゲット要素の左側または右側の外側に配置されます。さらに配置する側に置く位置 （上、中、下） も指定できます。(ポップオーバーのポインターは、常にターゲット要素の中央を指しますが、ポップオーバー自体はポインターの上側、下側、または両側に描画されます。)
• direction プロパティが 「top」または「bottom」に設定されている場合、ポップオーバーはターゲット要素の上側または下側の外側に配置されます。さらにその側のどこに置くかも指定できます(左端、中央、右端)。(ポップオーバーのポインターは、常にターゲット要素の中央を指しますが、ポップオーバー自体はポインターの左側、右側または両側にレンダリングされます。)

ターゲット要素の側に沿ったポップオーバー配置の微調整は、position プロパティで管理されます。

プロパティ設定

以下の表では、希望の構成をプロパティ設定にマップしています。

例

以下のスクリーンショットは、ターゲット要素より大きい 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 コンテナーなど) を指定することにより機能します。

プロパティ設定

以下の表では、希望の構成をプロパティ設定にマップしています。

例

以下のスクリーンショットは、アンカー要素 (青色の円) に関連するコンテンツを表示するために構成されたポップオーバーを示します。ただし、ポップオーバーはコンテインメント <div> 要素の内側でのみ表示するように制限されているため (点線の境界で示す)、ターゲット要素の下に表示されます。以下の設定の結果を示します。

以下のコードはこの例を実装します。

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 で初期化されます。