このトピックではコード例を使用して、JavaScript または ASP.NET MVC で HTML ページに igPopover
™ コントロールを追加する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igPopover
コントロールとその主な特長および機能の概要を説明します。このトピックは、以下のセクションで構成されます。
igPopover
コントロールは、任意の DOM 要素 (「ターゲット要素」と呼ばれる) で初期化できます。igPopover
は、ネスト化された DIV 要素にコンテンツを描画します。コンテンツは、デフォルトでターゲット要素のタイトルですが、ハードコーディングされた 文字列、HTML コンテンツ、 または HTML 文字列を返す JavaScript 関数.のいずれかにすることもできます。
以下の表では、igPopover
の追加の要件を簡単に説明します。
要件 / 必要なリソース | 説明 | 必要な作業 | ||||
---|---|---|---|---|---|---|
jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery™ は、これらのフレームワークの最上位にビルドされます。 | ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。 | ||||
igPopover JavaScript リソース |
Ignite UI for jQuery ライブラリの igPopover の機能性は、複数のファイル間に配布されます。必要なリソースは以下の方法で読み込むことができます。
|
以下のいずれかを追加します。
|
||||
IG テーマ (オプション) | このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル: {IG CSS root}/themes/Infragistics/infragistics.theme.css | |||||
igPopover の構造 | 以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。 {IG CSS root}/structure/modules/infragistics.ui.popover.css | ページのファイルにスタイル参照を追加します。 |
注: JavaScript と CSS リソースを読み込むためには igLoader コンポーネントを使うことを推奨します。この方法の詳細は、Infragistics Loader による必要なリソースの自動追加のトピックを参照してください。さらに、オンラインの Ignite UI for jQuery サンプル ブラウザーには、
igPopover
コンポーネントでigLoader
を使用する方法の具体的な例が記載されています。
以下は、igPopover
を HTML ページに追加する一般的な手順です。
ターゲット HTML 要素の追加
igPopover
の追加
この手順は、実際の HTML/JavaScript の実装を使用して、基本機能を持つ igPopover
を HTML ページに追加するステップを説明します。igPopover
コントロールで必要なすべての Ignite UI for jQuery リソースを読み込むには、Infragistics Loader コンポーネントを使用します。
この手順は、デフォルト構成の基本的な igPopover
コントロールを input HTML 要素に追加します。ポップオーバーは入力のタイトルを含み、マウスを要素の上にホバーすると表示されます。
次のスクリーンショットは最終結果のプレビューです。操作の結果として、UI に表示されたポップオーバー。
必要なリソースが追加され、適切に参照されていること。(リソースの概要については、要件を参照してください。)以下が含まれます。
適切な場所に追加された必要なファイル:
ig という名前のフォルダーに追加された Ignite UI for jQuery CSS ファイル (詳細は、Ignite UI for jQuery のスタイル設定とテーマ設定のトピックを参照してください。)
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>
igLoader
コンポーネント。HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
igLoader
コンポーネント:HTML の場合:
<script type="text/javascript">
以下はプロセスの概念的概要です。
ターゲット HTML 要素の追加
igPopover
の追加
以下の手順は、HTML ページで基本的な igPopover
コントロールを追加する方法を説明します。
ターゲット HTML 要素の追加
igPopover のターゲットになる HTML 要素を追加します。
この手順の例では、input HTML 要素を追加します。
HTML の場合:
<input id=”firstName” type=”text” title=”Please enter your first name” value=””>
igPopover
コントロールを追加します。
igPopover
をインスタンス化します。
HTML ページのスクリプト要素に初期化コードを追加します。初期化コードが、手順 1 で作成されたターゲット要素を対象とする igPopover
インスタンスを作成します。
以下のコードは、オプションを指定せずに igPopover
コントロールのインスタンスを作成します手順 1 で作成された入力要素「firstName」を対象にします。
JavaScript の場合:
$.ig.loader(function () {
// Create a basic igPopover control
$("#firstName").igPopover();
});
この手順は、基本的な機能の igPopover
を ASP.NET MVC View に追加するステップを説明します。ここでは、必要なローダー構成と共に ASP.NET MVC 構文を使用します。
この手順は、デフォルト構成の基本的な igPopover
コントロールを input HTML 要素に追加します。
ポップオーバーは入力のタイトルを含み、マウスを要素の上にホバーすると表示されます。
次のスクリーンショットは最終結果のプレビューです。操作の結果として、UI に表示されたポップオーバー。
この手順を実行するには、以下のリソースが必要です。
必要なリソースが追加され、適切に参照されていること。(これらのリソースの概念については、「要件」を参照してください。)以下が含まれます。
適切な場所に追加された必要なファイル:
Content/ig という名前のフォルダーに追加された Ignite UI for jQuery CSS ファイル (詳細は、Ignite UI for jQuery のスタイル設定とテーマ設定のトピックを参照してください。)
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>
igLoader
コンポーネント。HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
igLoader
コンポーネント:HTML の場合:
@(Html.Infragistics()
.Loader() .ScriptPath("http://localhost/ig_ui/js/")
.CssPath("http://localhost/ig_ui/css/")
.Render()
)
以下はプロセスの概念的概要です。
ターゲット HTML 要素の追加
igPopover
の追加
以下の手順は、基本的な igPopover
コントロールを ASP.NET MVC に追加する方法を示します。
ターゲット HTML 要素の追加
igPopover のターゲットになる HTML 要素を追加します。
この手順の例では、HTML input 要素を追加します。
HTML の場合:
<input id=”firstName” type=”text” title=”Please enter your first name” value=””>
igPopover
コントロールを追加します。
Popover
の Ignite UI for MVC 構成を ASP.NET MVC View に追加します。
以下のコードは、オプションを指定せずに igPopover
コントロールのインスタンスを作成します手順 1 で作成された入力要素「firstName」を対象にします。
ASPX の場合:
@(Html.Infragistics().Popover()
.ID(“firstName”)
.Render()
)
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
イベントの処理 (igPopover): このトピックでは、igPopover
コントロールのイベントを説明し、イベント ハンドラーをアタッチするコード例を示します。
igPopover の構成: このトピックでは、igPopover
コントロールのコンテンツの構成、アクティブ化、および配置する方法を説明します。
igPopover のスタイル設定: このトピックでは、コード例を使用して、CSS を使用した igPopover
コントロールのルック アンド フィールを構成する方法を説明します。コンテンツの背景色、ポインターの表示と色、ヘッダーの色、および閉じるボタンの外観の設定が含まれます。
アクセシビリティ準拠 (igPopover): このトピックでは、igPopover コントロールのアクセシビリティ機能について説明し、コントロールを含むページに対するアクセシビリティの準拠を実現する方法を紹介します。
既知の問題と制限事項 (igPopover): このトピックでは、igPopover
コントロールの既知の問題と制限事項および回避策についての情報を提供します。
jQuery と MVC API リンク (igPopover): このトピックでは、igPopover
コントロールの jQuery および ASP.NET MVC ヘルパー クラスの API 参照ドキュメントへのリンクを提供します。
このトピックについては、以下のサンプルも参照してください。
基本的な使用方法: このサンプルは、JavaScript による igPopover
の基本的な初期化シナリオ (単一のターゲット要素および複数のターゲット要素) を紹介します。
ASP.NET MVC の基本的な使用方法: このサンプルは、ASP.NET MVC シナリオでの igPopover
コントロールを紹介します。コントロールは、チェーン構文を使用して View で初期化されます。
オンラインで表示: GitHub