バージョン

プロパティ リファレンス (igDialog)

トピックの概要

目的

このトピックでは、igDialog™ コントロールのプロパティを紹介します。

このトピックの内容

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

jQuery プロパティのリファレンス

以下の表は、igDialog コントロールの主なプロパティの目的と機能の概要をまとめたものです。mainElementtemporaryUrl の値以外、プロパティはすべて動的に変更できます。

プロパティ

タイプ

値 (デフォルト値)

説明

mainElement

object

null

DOM オブジェクト

このプロパティでは、jQuery HTML DIV オブジェクトの設定と取得ができます。このオブジェクトはダイアログのメイン コンテナーとして使用します。このプロパティの使用時には以下の制約が課せられるので注意してください。

  • コンテナーはオプションであり、子は格納できません。
  • コンテナーに親は設定できません。
  • コンテナーに属性は収容できません。
  • このオプションは変更できません。

container

object

null

DOM オブジェクト

jQuery オブジェクト

igDialog の HTML コンテナー要素を取得または設定します。デフォルトで、オリジナル ターゲット要素の親フォームを使用します。親が利用できない場合は HTML body オブジェクトを使用します。CSS コンテナー プロパティ 「position」 の設定値が 「static」でない場合、位置の値は「relative」になります。

state

string

opened

“closed”

“minimized”

“maximized”

このプロパティでは、ダイアログの状態の設定と取得ができます。

pinned

boolean

true

false

ダイアログのピン留め状態を取得または設定します。

position

object

null

[100, 200]

{ my: “left top”,

at: “left top”,

offset: “100 200” }

igDialog の初期位置を取得または設定します。位置は、左座標と上座標を表す 2 つの数値の配列で指定できます。もう 1 つのオプションは、jQuery position() メソッドがサポートするオブジェクトです。

Modal

boolean

true

false

igDialog のモーダル状態を取得または設定します。ウィンドウが最小化やピン留めの状態では、この状態は利用できません。

Draggable

boolean

true

false

igDialog コントロールをドラッグする機能を取得または設定します。

resizable

boolean

true

false

igDialog のサイズを変更する機能を取得または設定します。

trackFocus

boolean

true

false

ダイアログにあるコントロール自体と、その子要素のフォーカス イベントとブラー イベントを処理する機能を取得または設定します。

enableHeaderFocus

boolean

true

false

ヘッダーの状態を、フォーカス設定状態と非フォーカス状態に調節する機能を取得または設定します。このプロパティは、trackFocus プロパティを有効にしたときにだけ機能します。

tabIndex

number

0

igDialog メイン HTML 要素に適用した tabIndex 属性の値を取得または設定します。

zIndex

number

1000

igDialog メイン HTML 要素に適用した zIndex の値を取得または設定します。

temporaryUrl

string

null

“”

IFRAME src 属性の一時値を取得または設定します。基本要素の親が HTML IFRAME 要素の場合、このプロパティで親を変更します。このプロパティは必須ではありませんが、これが例外防止になる場合があります。

enableDblclick

string/boolean

“auto”

true

false

igDialog ヘッダーをダブル クリックしたときに生じるアクションを取得または設定します。

値が false の場合、マウスをダブル クリックしてもウィンドウは反応しません。値を true に設定したときは反応します。また、auto 状態になると、ヘッダーに最大化アイコンがある場合にだけ、ダブル クリックに igDialog が反応します。

height number

null

100

“100px”

“2em”

“100%”

ノーマル状態ダイアログのピクセル単位の初期高さを取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズが適用され、igDialog を開くときにだけ反応します。

width

number

300

“300px”

“2em”

“100%”

ノーマル状態ダイアログのピクセル単位の初期幅を取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズが適用され、igDialog を開くときにだけ反応します。

minHeight

number

100

“100px”

“2em”

“100%”

ノーマル状態ダイアログの最低高さを取得または設定します。

minWidth

number

150

“150px”

“2em”

“100%”

ノーマル状態ダイアログの最低幅を取得または設定します。

maxHeight

number

null

1500

“1500px”

“5em”

“100%”

ノーマル状態ダイアログの最高高さを取得または設定します。このオプションの値が反映されるのは、igDialog のサイズ変更時だけです。

maxWidth

number

null

1500

“1500px”

“5em”

“100%”

ノーマル状態ダイアログの最大幅を取得または設定します。注: このオプションが有効なのは、エンド ユーザーがダイアログのサイズを変更するときだけです。

closeOnEscape

boolean

true

false

Esc キーでダイアログを閉じる機能を取得または設定します。

showCloseButton

boolean

true

false

igDialog ヘッダー内の閉じるボタンの可視性を取得または設定します。

showMaximizeButton

boolean

true

false

igDialog ヘッダー内の最大化ボタンの可視性を取得または設定します。

showPinButton

boolean

true

false

ヘッダー内のピン留めボタンの可視性を取得または設定します。

pinOnMinimized

boolean

true

false

ダイアログを最小化したときに igDialog を自動的にピン留めする機能を取得または設定します。

openAnimation

string/number

null

“slide”

“explode”

500

ダイアログを開くときにダイアログに適用されるアニメーションを取得または設定します。jQuery show() メソッドがサポートするオブジェクトはすべて対象です。

closeAnimation

string/number

null

“slide”

“explode”

500

ダイアログを閉じるときに適用されるアニメーションを取得または設定します。jQuery hide() メソッドがサポートするオブジェクトはすべて対象です。

dialogClass

string

null

“container-class”

CSS クラスの名前を取得または設定します。このクラスは igDialog のメイン DIV 要素に適用します。

imageClass

string

null

“img-class”

CSS クラスの名前を取得または設定します。このクラスは igDialog ヘッダーの左側にある SPAN 要素に適用します。

headerText

string

null

“HEADER”

igDialog ヘッダーに表示されるテキストを取得または設定します。

showHeader

boolean

true

false

igDialog ヘッダーの可視性を取得または設定します。

showFooter

boolean

true

false

igDialog ヘッダーの可視性を取得または設定します。

footerText

string

null

“FOOTER”

igDialog フッターに表示するテキストを取得または設定します。

closeButtonTitle

string

null

“X”

igDialog の閉じるボタンのツールチップを取得または設定します。

minimizeButtonTitle

string

null

“MIN”

igDialog の最小化ボタンのツールチップを取得または設定します。

maximizeButtonTitle

string

null

“MAX”

igDialog の最大化ボタンのツールチップを取得または設定します。

pinButtonTitle

string

null

“PIN”

igDialog のピン留めボタンのツールチップを取得または設定します。

unpinButtonTitle

string

null

“UNPIN”

igDialog のピン留め解除ボタンのツールチップを取得または設定します。

restoreButtonTitle

string

null

“RESTORE”

igDialog の元に戻すボタンのツールチップを取得または設定します。

MVC メソッド リファレンス

以下の表は、 Ignite UI for MVC Dialog の目的と機能をまとめたものです。mainElementtemporaryUrl を除くほとんどのメソッドは、jQuery プロパティに対応します。対応する igDialog プロパティがない MVC メソッドには、これ以外にも、ContentJquerySelectorContentIDIDContentHTML などがあります。

プロパティ

パラメーター タイプ

値 (デフォルト値)

説明

ContentJquerySelector

string

“#igDialog1”

このプロパティは、Ignite UI for MVC Dialog のセレクターを定義します。このセレクターは jQuery のみのウィジェットを作成するときと同じセレクターにしてください。たとえば、HTML プレースホルダーの ID が “igDialog1” の場合、ContentJquerySelector の値は 「#igDialog」になります。次に、Ignite UI for MVC は以下のコードをレンダリングします。

$(“#igDialog”).igDialog();

ContentID

string

“igDialog1”

このプロパティは、Ignite UI for MVC Dialog のセレクターを定義します。ContentJquerySelector プロパティと違って、渡す情報は # を除いた HTML プレースホルダーの ID だけです。Ignite UI for MVC はウィジェットを自動的にレンダリングします。ContentID の値が「igDialog」の場合、先のプロパティと同様の結果が得られます。

$(“#igDialog”).igDialog();

ID

string

“igDialog1”

このプロパティは、Ignite UI for MVC Dialog のセレクターを定義します。このプロパティは ContentID プロパティとまったく同じ働きをします。パラメーターでは同じフォーマットを使用し、同じコードをレンダリングします。

ContentHTML

string

“<div id="igDialog1”> igDialog Content </div>”

このプロパティでは、Ignite UI for MVC Dialog の一部として igDialog の HTML プレースホルダーを定義できます。この HTML コードは、igDialog のコンテンツになります。

Container

string

“#idContainer”

“.classContainer”

igDialog の HTML コンテナー要素を取得または設定します。デフォルトで、オリジナル ターゲット要素の親フォームを使用し、その親が利用できない場合は、HTML body オブジェクトを使用します。CSS コンテナー プロパティ「position」を設定しないと値は「static」になり、位置の値の設定は「relative」になります。

State

string

DialogState.Opened

DialogState.Closed

DialogState.Minimized

DialogState.Maximized

このプロパティでは、ダイアログの状態を取得または設定します。

Pinned

bool?

true

false

ダイアログのピン留め状態を取得または設定します。

Position

int

Position(100, 200)

igDialog の初期位置を取得または設定します。左と上の位置を引数として渡します。

Modal

bool?

true

false

igDialog のモーダル状態を取得または設定します。ウィンドウを最小化したときやピン留めしたときは、この状態は利用できません。

Draggable

bool?

true

false

igDialog コントロールをドラッグする機能を取得または設定します。

Resizable

bool?

true

false

igDialog のサイズを変更する機能を取得または設定します。

TrackFocus

bool?

true

false

フォーカス状態を維持するため、igDialog にある子要素のフォーカス イベントとブラー イベントを処理する機能を取得または設定します。このオプションが有効な場合、そのダイアログのすべての子要素にフォーカス イベント ハンドラーとブラー イベント ハンドラーが追加されます。ダイアログがモーダルの場合や最大化されている場合、このオプションは無効にしないでください。

EnableHeaderFocus

bool?

true

false

ヘッダーの状態を、フォーカス設定状態と非フォーカス状態に調節する機能を取得または設定します。このプロパティは、trackFocus プロパティを有効にしたときにだけ機能します。

TabIndex

int

0

igDialog メイン HTML 要素に適用した tabIndex 属性の値を取得または設定します。

ZIndex

int

1000

igDialog メイン HTML 要素に適用した zIndex の値を取得または設定します。

EnableDblclick

bool?

true

false

igDialog ヘッダーをダブル クリックしたときに生じるアクションを取得または設定します。

値が false の場合、ウィンドウはマウスのダブル クリックに反応しません。一方、値が true のときは反応します。「auto」状態の場合、ダブルクリックで igDialog が反応するのはヘッダーのアイコンが最大化されているときだけです。

「Auto」はデフォルト状態ですが、Ignite UI for MVC で動的に変更することはできません。

Height

string

100

“100px”

“2em”

“100%”

ノーマル状態ダイアログのピクセル単位の初期高さを取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズを使用し、igDialog が開いていないと結果は反映されません。

Width

string

300

“300px”

“2em”

“100%”

ノーマル状態ダイアログのピクセル単位の初期幅を取得または設定します。「%」を使用すると、window ブラウザー オブジェクトのサイズを使用し、igDialog が開いていないと結果は反映されません。

MinHeight

string

100

“100px”

“2em”

“100%”

ノーマル状態ダイアログの最低高さを取得または設定します。

MinWidth

string

150

“150px”

“2em”

“100%”

ノーマル状態ダイアログの最低幅を取得または設定します。

MaxHeight

string

1500

“1500px”

“5em”

“100%”

ノーマル状態ダイアログの最高高さを取得または設定します。このオプションの値が反映されるのは、igDialog のサイズ変更時だけです。

MaxWidth

string

1500

“1500px”

“5em”

“100%”

ノーマル状態ダイアログの最大幅を取得または設定します。注: このオプションが有効なのは、エンド ユーザーがダイアログのサイズを変更するときだけです。

CloseOnEscape

bool?

true

false

Esc キーでダイアログを閉じる機能を取得または設定します。

ShowCloseButton

bool?

true

false

igDialog ヘッダー内の閉じるボタンの可視性を取得または設定します。

ShowMaximizeButton

bool?

true

false

igDialog ヘッダー内の最大化ボタンの可視性を取得または設定します。

ShowPinButton

bool?

true

false

ヘッダー内のピン留めボタンの可視性を取得または設定します。

pinOnMinimized

bool?

true

false

ダイアログを最小化したときに igDialog を自動的にピン留めする機能を取得または設定します。

openAnimation

string/integer

“slide”

“explode”

500

ダイアログを開くときに適用されるアニメーションを取得または設定します。jQuery show() メソッドがサポートするオブジェクトはすべて対象です。

CloseAnimation

string/integer

“slide”

“explode”

500

ダイアログを閉じるときに適用されるアニメーションを取得または設定します。jQuery hide() メソッドがサポートするオブジェクトはすべて対象です。

DialogClass

string

“container-class”

CSS クラスの名前を取得または設定します。このクラスは igDialog のメイン DIV 要素に適用します。

imageClass

string

“img-class”

CSS クラスの名前を取得または設定します。このクラスは igDialog ヘッダーの左側にある SPAN 要素に適用します。

HeaderText

string

“HEADER”

igDialog ヘッダーに表示されるテキストを取得または設定します。

ShowHeader

bool?

true

false

igDialog ヘッダーの可視性を取得または設定します。

ShowFooter

bool?

true

false

igDialog ヘッダーの可視性を取得または設定します。

FooterText

string

“FOOTER”

igDialog フッターに表示されるテキストを取得または設定します。

CloseButtonTitle

string

“X”

igDialog の閉じるボタンのツールチップを取得または設定します。

minimizeButtonTitle

string

“MIN”

igDialog の最小化ボタンのツールチップを取得または設定します。

MaximizeButtonTitle

string

“MAX”

igDialog の最大化ボタンのツールチップを取得または設定します。

PinButtonTitle

string

“PIN”

igDialog のピン留めボタンのツールチップを取得または設定します。

UnpinButtonTitle

string

“UNPIN”

igDialog のピン留め解除ボタンのツールチップを取得または設定します。

RestoreButtonTitle

string

“RESTORE”

igDialog の元に戻すボタンのツールチップを取得または設定します。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

このトピックについては、以下のサンプルも参照してください。

  • 基本的な使用方法: このサンプルでは、igDialog の高さ、幅、状態を設定する方法を紹介します。

  • API およびイベント: このサンプルでは、ダイアログ ウィンドウ コントロールのイベントを処理および API を使用する方法を紹介します。

  • ASP.NET MVC の基本的な使用方法: このサンプルでは、ダイアログ ウィンドウの ASP.NET MVC ヘルパーを使用する方法を紹介します。

  • モーダル ダイアログ: このサンプルでは、モーダル ダイアログを作成する方法を紹介します。

  • 外部ページの読み込み: このサンプルでは、URL から外部のコンテンツを読み込む方法を紹介します。

オンラインで表示: GitHub