このトピックでは、igDialog
™ コントロールのプロパティを紹介します。
このトピックは、以下のセクションで構成されます。
以下の表は、igDialog
コントロールの主なプロパティの目的と機能の概要をまとめたものです。mainElement
と temporaryUrl
の値以外、プロパティはすべて動的に変更できます。
プロパティ |
タイプ |
値 (デフォルト値) |
説明 |
---|---|---|---|
object |
null DOM オブジェクト |
このプロパティでは、jQuery HTML DIV オブジェクトの設定と取得ができます。このオブジェクトはダイアログのメイン コンテナーとして使用します。このプロパティの使用時には以下の制約が課せられるので注意してください。
|
|
object |
null DOM オブジェクト jQuery オブジェクト |
igDialog の HTML コンテナー要素を取得または設定します。デフォルトで、オリジナル ターゲット要素の親フォームを使用します。親が利用できない場合は HTML body オブジェクトを使用します。CSS コンテナー プロパティ 「position」 の設定値が 「static」でない場合、位置の値は「relative」になります。 |
|
string |
opened “closed” “minimized” “maximized” |
このプロパティでは、ダイアログの状態の設定と取得ができます。 |
|
boolean |
true false |
ダイアログのピン留め状態を取得または設定します。 |
|
object |
null [100, 200] { my: “left top”, at: “left top”, offset: “100 200” } |
igDialog の初期位置を取得または設定します。位置は、左座標と上座標を表す 2 つの数値の配列で指定できます。もう 1 つのオプションは、jQuery |
|
boolean |
true false |
igDialog のモーダル状態を取得または設定します。ウィンドウが最小化やピン留めの状態では、この状態は利用できません。 |
|
boolean |
true false |
igDialog コントロールをドラッグする機能を取得または設定します。 |
|
boolean |
true false |
igDialog のサイズを変更する機能を取得または設定します。 |
|
boolean |
true false |
ダイアログにあるコントロール自体と、その子要素のフォーカス イベントとブラー イベントを処理する機能を取得または設定します。 |
|
boolean |
true false |
ヘッダーの状態を、フォーカス設定状態と非フォーカス状態に調節する機能を取得または設定します。このプロパティは、 |
|
number |
0 |
igDialog メイン HTML 要素に適用した |
|
number |
1000 |
igDialog メイン HTML 要素に適用した |
|
string |
null “” |
IFRAME src 属性の一時値を取得または設定します。基本要素の親が HTML IFRAME 要素の場合、このプロパティで親を変更します。このプロパティは必須ではありませんが、これが例外防止になる場合があります。 |
|
string/boolean |
“auto” true false |
igDialog ヘッダーをダブル クリックしたときに生じるアクションを取得または設定します。 値が false の場合、マウスをダブル クリックしてもウィンドウは反応しません。値を true に設定したときは反応します。また、auto 状態になると、ヘッダーに最大化アイコンがある場合にだけ、ダブル クリックに igDialog が反応します。 |
|
height | number |
null 100 “100px” “2em” “100%” |
ノーマル状態ダイアログのピクセル単位の初期高さを取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズが適用され、igDialog を開くときにだけ反応します。 |
number |
300 “300px” “2em” “100%” |
ノーマル状態ダイアログのピクセル単位の初期幅を取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズが適用され、igDialog を開くときにだけ反応します。 |
|
number |
100 “100px” “2em” “100%” |
ノーマル状態ダイアログの最低高さを取得または設定します。 |
|
number |
150 “150px” “2em” “100%” |
ノーマル状態ダイアログの最低幅を取得または設定します。 |
|
number |
null 1500 “1500px” “5em” “100%” |
ノーマル状態ダイアログの最高高さを取得または設定します。このオプションの値が反映されるのは、igDialog のサイズ変更時だけです。 |
|
number |
null 1500 “1500px” “5em” “100%” |
ノーマル状態ダイアログの最大幅を取得または設定します。注: このオプションが有効なのは、エンド ユーザーがダイアログのサイズを変更するときだけです。 |
|
boolean |
true false |
Esc キーでダイアログを閉じる機能を取得または設定します。 |
|
boolean |
true false |
igDialog ヘッダー内の閉じるボタンの可視性を取得または設定します。 |
|
boolean |
true false |
igDialog ヘッダー内の最大化ボタンの可視性を取得または設定します。 |
|
boolean |
true false |
ヘッダー内のピン留めボタンの可視性を取得または設定します。 |
|
boolean |
true false |
ダイアログを最小化したときに igDialog を自動的にピン留めする機能を取得または設定します。 |
|
string/number |
null “slide” “explode” 500 |
ダイアログを開くときにダイアログに適用されるアニメーションを取得または設定します。jQuery show() メソッドがサポートするオブジェクトはすべて対象です。 |
|
string/number |
null “slide” “explode” 500 |
ダイアログを閉じるときに適用されるアニメーションを取得または設定します。jQuery hide() メソッドがサポートするオブジェクトはすべて対象です。 |
|
string |
null “container-class” |
CSS クラスの名前を取得または設定します。このクラスは igDialog のメイン DIV 要素に適用します。 |
|
string |
null “img-class” |
CSS クラスの名前を取得または設定します。このクラスは igDialog ヘッダーの左側にある SPAN 要素に適用します。 |
|
string |
null “HEADER” |
igDialog ヘッダーに表示されるテキストを取得または設定します。 |
|
boolean |
true false |
igDialog ヘッダーの可視性を取得または設定します。 |
|
boolean |
true false |
igDialog ヘッダーの可視性を取得または設定します。 |
|
string |
null “FOOTER” |
igDialog フッターに表示するテキストを取得または設定します。 |
|
string |
null “X” |
igDialog の閉じるボタンのツールチップを取得または設定します。 |
|
string |
null “MIN” |
igDialog の最小化ボタンのツールチップを取得または設定します。 |
|
string |
null “MAX” |
igDialog の最大化ボタンのツールチップを取得または設定します。 |
|
string |
null “PIN” |
igDialog のピン留めボタンのツールチップを取得または設定します。 |
|
string |
null “UNPIN” |
igDialog のピン留め解除ボタンのツールチップを取得または設定します。 |
|
string |
null “RESTORE” |
igDialog の元に戻すボタンのツールチップを取得または設定します。 |
以下の表は、 Ignite UI for MVC Dialog
の目的と機能をまとめたものです。mainElement
と temporaryUrl
を除くほとんどのメソッドは、jQuery プロパティに対応します。対応する igDialog プロパティがない MVC メソッドには、これ以外にも、ContentJquerySelector
、ContentID
、ID
、ContentHTML
などがあります。
プロパティ |
パラメーター タイプ |
値 (デフォルト値) |
説明 |
---|---|---|---|
string |
“#igDialog1” |
このプロパティは、Ignite UI for MVC Dialog のセレクターを定義します。このセレクターは jQuery のみのウィジェットを作成するときと同じセレクターにしてください。たとえば、HTML プレースホルダーの ID が “igDialog1” の場合、ContentJquerySelector の値は 「#igDialog」になります。次に、Ignite UI for MVC は以下のコードをレンダリングします。 $(“#igDialog”).igDialog(); |
|
string |
“igDialog1” |
このプロパティは、Ignite UI for MVC Dialog のセレクターを定義します。ContentJquerySelector プロパティと違って、渡す情報は # を除いた HTML プレースホルダーの ID だけです。Ignite UI for MVC はウィジェットを自動的にレンダリングします。ContentID の値が「igDialog」の場合、先のプロパティと同様の結果が得られます。 $(“#igDialog”).igDialog(); |
|
string |
“igDialog1” |
このプロパティは、Ignite UI for MVC Dialog のセレクターを定義します。このプロパティは ContentID プロパティとまったく同じ働きをします。パラメーターでは同じフォーマットを使用し、同じコードをレンダリングします。 |
|
string |
“<div id="igDialog1”> igDialog Content </div>” |
このプロパティでは、Ignite UI for MVC Dialog の一部として igDialog の HTML プレースホルダーを定義できます。この HTML コードは、igDialog のコンテンツになります。 |
|
string |
“#idContainer” “.classContainer” |
igDialog の HTML コンテナー要素を取得または設定します。デフォルトで、オリジナル ターゲット要素の親フォームを使用し、その親が利用できない場合は、HTML body オブジェクトを使用します。CSS コンテナー プロパティ「position」を設定しないと値は「static」になり、位置の値の設定は「relative」になります。 |
|
string |
DialogState.Opened DialogState.Closed DialogState.Minimized DialogState.Maximized |
このプロパティでは、ダイアログの状態を取得または設定します。 |
|
bool? |
true false |
ダイアログのピン留め状態を取得または設定します。 |
|
int |
Position(100, 200) |
igDialog の初期位置を取得または設定します。左と上の位置を引数として渡します。 |
|
bool? |
true false |
igDialog のモーダル状態を取得または設定します。ウィンドウを最小化したときやピン留めしたときは、この状態は利用できません。 |
|
bool? |
true false |
igDialog コントロールをドラッグする機能を取得または設定します。 |
|
bool? |
true false |
igDialog のサイズを変更する機能を取得または設定します。 |
|
bool? |
true false |
フォーカス状態を維持するため、igDialog にある子要素のフォーカス イベントとブラー イベントを処理する機能を取得または設定します。このオプションが有効な場合、そのダイアログのすべての子要素にフォーカス イベント ハンドラーとブラー イベント ハンドラーが追加されます。ダイアログがモーダルの場合や最大化されている場合、このオプションは無効にしないでください。 |
|
bool? |
true false |
ヘッダーの状態を、フォーカス設定状態と非フォーカス状態に調節する機能を取得または設定します。このプロパティは、trackFocus プロパティを有効にしたときにだけ機能します。 |
|
int |
0 |
igDialog メイン HTML 要素に適用した tabIndex 属性の値を取得または設定します。 |
|
int |
1000 |
igDialog メイン HTML 要素に適用した zIndex の値を取得または設定します。 |
|
bool? |
true false |
igDialog ヘッダーをダブル クリックしたときに生じるアクションを取得または設定します。 値が false の場合、ウィンドウはマウスのダブル クリックに反応しません。一方、値が true のときは反応します。「auto」状態の場合、ダブルクリックで igDialog が反応するのはヘッダーのアイコンが最大化されているときだけです。 「Auto」はデフォルト状態ですが、Ignite UI for MVC で動的に変更することはできません。 |
|
string |
100 “100px” “2em” “100%” |
ノーマル状態ダイアログのピクセル単位の初期高さを取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズを使用し、igDialog が開いていないと結果は反映されません。 |
|
string |
300 “300px” “2em” “100%” |
ノーマル状態ダイアログのピクセル単位の初期幅を取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズを使用し、igDialog が開いていないと結果は反映されません。 |
|
string |
100 “100px” “2em” “100%” |
ノーマル状態ダイアログの最低高さを取得または設定します。 |
|
string |
150 “150px” “2em” “100%” |
ノーマル状態ダイアログの最低幅を取得または設定します。 |
|
string |
1500 “1500px” “5em” “100%” |
ノーマル状態ダイアログの最高高さを取得または設定します。このオプションの値が反映されるのは、igDialog のサイズ変更時だけです。 |
|
string |
1500 “1500px” “5em” “100%” |
ノーマル状態ダイアログの最大幅を取得または設定します。注: このオプションが有効なのは、エンド ユーザーがダイアログのサイズを変更するときだけです。 |
|
bool? |
true false |
Esc キーでダイアログを閉じる機能を取得または設定します。 |
|
bool? |
true false |
igDialog ヘッダー内の閉じるボタンの可視性を取得または設定します。 |
|
bool? |
true false |
igDialog ヘッダー内の最大化ボタンの可視性を取得または設定します。 |
|
bool? |
true false |
ヘッダー内のピン留めボタンの可視性を取得または設定します。 |
|
bool? |
true false |
ダイアログを最小化したときに igDialog を自動的にピン留めする機能を取得または設定します。 |
|
string/integer |
“slide” “explode” 500 |
ダイアログを開くときに適用されるアニメーションを取得または設定します。jQuery show() メソッドがサポートするオブジェクトはすべて対象です。 |
|
string/integer |
“slide” “explode” 500 |
ダイアログを閉じるときに適用されるアニメーションを取得または設定します。jQuery hide() メソッドがサポートするオブジェクトはすべて対象です。 |
|
string |
“container-class” |
CSS クラスの名前を取得または設定します。このクラスは igDialog のメイン DIV 要素に適用します。 |
|
string |
“img-class” |
CSS クラスの名前を取得または設定します。このクラスは igDialog ヘッダーの左側にある SPAN 要素に適用します。 |
|
string |
“HEADER” |
igDialog ヘッダーに表示されるテキストを取得または設定します。 |
|
bool? |
true false |
igDialog ヘッダーの可視性を取得または設定します。 |
|
bool? |
true false |
igDialog ヘッダーの可視性を取得または設定します。 |
|
string |
“FOOTER” |
igDialog フッターに表示されるテキストを取得または設定します。 |
|
string |
“X” |
igDialog の閉じるボタンのツールチップを取得または設定します。 |
|
string |
“MIN” |
igDialog の最小化ボタンのツールチップを取得または設定します。 |
|
string |
“MAX” |
igDialog の最大化ボタンのツールチップを取得または設定します。 |
|
string |
“PIN” |
igDialog のピン留めボタンのツールチップを取得または設定します。 |
|
string |
“UNPIN” |
igDialog のピン留め解除ボタンのツールチップを取得または設定します。 |
|
string |
“RESTORE” |
igDialog の元に戻すボタンのツールチップを取得または設定します。 |
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
メソッドのリファレンス (igDialog): このトピックでは igRating
コントロールのメソッドを紹介します。
イベント リファレンス (igDialog): このトピックでは、igDialog
コントロールのイベントを紹介します。
CSS クラス リファレンス (igDialog): このトピックでは、igDialog
コントロールの CSS クラスを紹介します。
このトピックについては、以下のサンプルも参照してください。
基本的な使用方法: このサンプルでは、igDialog
の高さ、幅、状態を設定する方法を紹介します。
API およびイベント: このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。
ASP.NET MVC の基本的な使用方法: このサンプルでは、ダイアログ ウィンドウの ASP.NET MVC ヘルパーを使用する方法を紹介します。
モーダル ダイアログ: このサンプルでは、モーダル ダイアログを作成する方法を紹介します。
外部ページの読み込み: このサンプルでは、URL から外部のコンテンツを読み込む方法を紹介します。
オンラインで表示: GitHub