ui.igNotifier

コード サンプル
<!DOCTYPE html> <html> <head> <!--Ignite UI Required Combined CSS Files--> <link href= "css/themes/infragistics/infragistics.theme.css" rel= "stylesheet" type= "text/css" /> <link href= "css/structure/infragistics.css" rel= "stylesheet" type= "text/css" /> <script src= "js/modernizr-latest.js" ></script> <script src= "js/jquery.js" ></script> <script src= "js/jquery-ui.js" ></script> <!--Ignite UI Required Combined JavaScript Files--> <script src= "js/infragistics.core.js" ></script> <script src= "js/infragistics.lob.js" ></script> <script type= "text/javascript" > $(document).ready( function () { $( "#successEditor" ).igTextEditor({ placeHolder: "Focus me." }); $( "#successEditor" ).igNotifier({ showOn: "focus" , state: "success" , direction: "right" , showIcon: true , mode: "popover" , locale: { infoMsg: "Information about the state of the input." , successMsg: "Well done" , warningMsg: "Warning" , errorMsg: "Error!" } }); }); </script> </head> <body> <div id= "successEditor" ></div> </body> </html> |
関連サンプル
関連トピック
依存関係
-
allowCSSOnTarget
- タイプ:
- bool
- デフォルト:
- true
各状態の CSS をターゲット要素に設定することを許可します (デフォルトで境界線の色を適用するために使用します)。
コード サンプル
//Initialize
$(
'.selector'
).igNotifier({
allowCSSOnTarget:
true
});
//Get
var
allowCSSOnTarget = $(
".selector"
).igNotifier(
"option"
,
"allowCSSOnTarget"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"allowCSSOnTarget"
,
false
);
-
animationDuration
- タイプ:
- number
- デフォルト:
- 250
通知が表示/非表示するときのフェード時間をミリ秒で取得または設定します。
コード サンプル
//Initialize
$(
'.selector'
).igNotifier({
animationDuration: 300
});
//Get
var
animationDuration = $(
".selector"
).igNotifier(
"option"
,
"animationDuration"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"animationDuration"
, 300);
-
animationSlideDistance
- タイプ:
- number
- デフォルト:
- 5
表示するとき、通知ポップオーバーが外部にスライドする距離をピクセルで取得または設定します。
コード サンプル
//Initialize
$(
'.selector'
).igNotifier({
animationSlideDistance: 5
//Get
var
animationSlideDistance = $(
".selector"
).igNotifier(
"option"
,
"animationSlideDistance"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"animationSlideDistance"
, 5);
-
appendTo
- タイプ:
- enumeration
- デフォルト:
- body
ポップオーバー DOM に添付する要素を制御します (ポップオーバーのみに適用します)。
メンバー
- string
- タイプ:string
- 要素の有効な jQuery セレクター。
- object
- タイプ:object
- 親 jQuery オブジェクトへの参照。
コード サンプル
//Initialize
$(
'.selector'
).igNotifier({
appendTo:
"body"
});
//Get
var
appendTo = $(
".selector"
).igNotifier(
"option"
,
"appendTo"
);
-
closeOnBlur
- タイプ:
- bool
- デフォルト:
- false
ポップオーバーがぼかしで閉じるかどうかを制御します。このオプションは、対応する showOn を設定 (通常は手動) した場合のみ効果があります。
コード サンプル
//Initialize
$(
'.selector'
).igNotifier({
closeOnBlur:
true
});
//Get
var
closeOnBlur = $(
".selector"
).igNotifier(
"option"
,
"closeOnBlur"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"closeOnBlur"
,
true
);
-
containment
継承- タイプ:
- object
- デフォルト:
- null
ポップオーバーのコンテインメントを設定します。jQuery オブジェクトを受け付けます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
containment:$(
'#popoverDivElement'
)
});
//Get
var
containment = $(
".selector"
).igNotifier(
"option"
,
"containment"
);
// Set
$(
".selector"
).igNotifier(
"option"
,
"containment"
, $(
'#popoverTooltip'
));
-
contentTemplate
- タイプ:
- enumeration
- デフォルト:
- <span class={0}><span class={1}></span></span>{2}
ポップオーバー コンテナーのコンテンツを設定します。デフォルトではパラメーターでテンプレート化されます。{0} - アイコン コンテナー クラス、{1} - アイコン クラス、{2} - メッセージのテキスト。
メンバー
- string
- タイプ:string
- ポップオーバー コンテナーの文字列コンテンツ。
- function
- タイプ:function
- コンテンツを返すコールバックである関数。対象の DOM 要素および状態値の渡された引数にアクセスするには、'this' 値を使用します。結果は同じテンプレート パラメーターを含むことができます。
コード サンプル
//Initialize
// string content for the popover container
$(
".selector"
).igNotifier({
contentTemplate:
"<img src='http://www.infragistics.com/assets/images/logo.png' title='IG logo' /> {1}"
});
//Get
var
contentFunction = $(
".selector"
).igNotifier(
"option"
,
"contentTemplate"
);
// Set
// Accepts setting the value only if string type is passed
$(
".selector"
).igNotifier(
"option"
,
"contentTemplate"
,
"<img src='http://www.infragistics.com/assets/images/logo.png' title='IG logo' /> {1}"
);
-
direction
継承- タイプ:
- enumeration
- デフォルト:
- auto
ターゲット要素に相対してコントロールの表示方向を制御します。
メンバー
- auto
- タイプ:string
- directionPriority プロパティで指定した優先順序で、利用可能なスペースがある側にコントロールを表示します。
- left
- タイプ:string
- ポップオーバーはターゲットの要素の左側に表示されます。
- right
- タイプ:string
- ポップオーバーはターゲットの要素の右側に表示されます。
- top
- タイプ:string
- ポップオーバーはターゲットの要素の上側に表示されます。
- bottom
- タイプ:string
- ポップオーバーはターゲットの要素の下側に表示されます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
direction:
"right"
});
//Get
var
direction = $(
".selector"
).igNotifier(
"option"
,
"direction"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"direction"
,
"top"
);
-
directionPriority
継承- タイプ:
- array
- デフォルト:
- []
- 要素タイプ:
- string
ターゲット要素に相対するコントロールが表示スペースを検索する優先度を制御します。
このプロパティは、direction プロパティ値が "auto" または設定されていない場合のみに使用されます。コード サンプル
//Initialize
$(
".selector"
).igNotifier({
directionPriority:[
"top"
,
"bottom"
,
"left"
,
"right"
]
});
//Get
var
position = $(
".selector"
).igNotifier(
"option"
,
"directionPriority"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"directionPriority"
,[
"left"
,
"top"
,
"bottom"
,
"right"
]);
-
headerTemplate
- タイプ:
- object
- デフォルト:
- {}
ポップオーバー ヘッダーのコンテンツを取得または設定します。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
headerTemplate: {
closeButton:
false
}
});
//Get
var
headerTemplate = $(
".selector"
).igNotifier(
"option"
,
"headerTemplate"
);
-
closeButton
- タイプ:
- bool
- デフォルト:
- true
ポップオーバーが [閉じる] ボタンを描画するかどうかを制御します。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
headerTemplate: {
closeButton :
false
,
title :
null
}
});
//Get
var
title = $(
".selector"
).igNotifier(
"option"
,
"headerTemplate"
);
-
title
- タイプ:
- string
- デフォルト:
- null
ポップオーバー ヘッダーのコンテンツを設定します。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
headerTemplate: {
closeButton :
false
,
title :
null
}
});
//Get
var
title = $(
".selector"
).igNotifier(
"option"
,
"headerTemplate"
);
-
height
継承- タイプ:
- enumeration
- デフォルト:
- null
ポップオーバーの高さを定義します。null を指定すると、auto に解決します。
メンバー
- number
- 高さを数字に設定できます。
- string
- 高さをピクセル (px) に設定できます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
height:200
});
// Get
var
height = $(
".selector"
).igNotifier(
"option"
,
"height"
);
-
maxHeight
継承- タイプ:
- enumeration
- デフォルト:
- 200
高さが設定されなくても、ポップオーバーの最大高さを定義します。
メンバー
- number
- 最大の高さは数値として設定できます。
- string
- 最大の高さはピクセル (px) として設定できます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
maxHeight:
"300px"
});
// Get
var
maxHeight = $(
".selector"
).igNotifier(
"option"
,
"maxHeight"
);
-
maxWidth
継承- タイプ:
- enumeration
- デフォルト:
- 200
幅が設定されなくても、ポップオーバーの最大幅を定義します。
メンバー
- number
- maxWidth を数字に設定できます。
- string
- maxWidth をピクセル (px) に設定できます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
maxWidth:
"300px"
});
//Get
var
maxWidth = $(
".selector"
).igNotifier(
"option"
,
"maxWidth"
);
-
minWidth
継承- タイプ:
- enumeration
- デフォルト:
- 60
幅が設定されなくても、ポップオーバーの最小幅を定義します。
メンバー
- number
- minWidth を数字に設定できます。
- string
- minWidth をピクセル (px) に設定できます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
minWidth:
"70px"
});
// Get
var
minWidth = $(
".selector"
).igNotifier(
"option"
,
"minWidth"
);
-
mode
- タイプ:
- enumeration
- デフォルト:
- auto
メッセージの配置モードを制御します。モードを設定すると、デフォルトの動作「自動」がオーバーライドされます。注: インライン要素はブロック コンテナーを使用し、常にターゲット要素の後に配置されます。
メンバー
- auto
- タイプ:string
- 情報および警告メッセージでポップオーバーを使用し、エラーおよび成功メッセージでインライン スタイルを使用します。
- popover
- タイプ:string
- メッセージを構成可能なポップオーバーに表示します。
- inline
- タイプ:string
- メッセージをターゲットの下に簡易通知テキストで表示します。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
mode:
"inline"
});
//Get
var
mode = $(
".selector"
).igNotifier(
"option"
,
"mode"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"mode"
,
"popover"
);
-
notifyLevel
- タイプ:
- enumeration
- デフォルト:
- success
notify メソッドを使用して自動および手動メッセージに表示される通知のレベルを制御します。レベルを無視するには、show を使用します。
メンバー
- success
- タイプ:string
- すべてのメッセージ タイプを表示します。
- info
- タイプ:string
- 情報レベルのメッセージからすべての表示。
- warning
- タイプ:string
- 警告レベルのメッセージからすべての表示。
- error
- タイプ:string
- エラー メッセージのみの表示。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
notifyLevel:
"error"
});
//Get
var
notifyLevel = $(
".selector"
).igNotifier(
"option"
,
"notifyLevel"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"notifyLevel"
,
"info"
);
-
position
継承- タイプ:
- enumeration
- デフォルト:
- auto
配置する側でポップオーバーがターゲットの要素より大きいの場合、ターゲット要素に対してポップオーバーの配置を制御します。ポップオーバーがターゲットの要素より小さい場合、表示可能な領域の中央に配置されます。
メンバー
- auto
- タイプ:string
- 「中央 > 終了 > 開始」の優先順序で、利用可能なスペースに基づいて、コントロールは位置を自動的に選択します。
- balanced
- タイプ:string
- ポップオーバーはターゲットの要素の中央に配置されます。
- start
- タイプ:string
- ポップオーバーはターゲットの要素の開始に配置されます。
- end
- タイプ:string
- ポップオーバーはターゲットの要素の終了に配置されます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
position:
"balanced"
});
//Get
var
position = $(
".selector"
).igNotifier(
"option"
,
"position"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"position"
,
"start"
);
-
showIcon
- タイプ:
- bool
- デフォルト:
- false
jQuery UI フレームワークのアイコンを表示するために相対する状態の CSS を持つスパンの描画を許可します。
コード サンプル
//Initialize
$(
'.selector'
).igNotifier({
showIcon:
true
//Get
var
showIcon = $(
".selector"
).igNotifier(
"option"
,
"showIcon"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"showIcon"
,
true
);
-
showOn
- タイプ:
- enumeration
- デフォルト:
- manual
通知が表示されるイベントを設定します。定義済みの値は mouseenter、click、および focus です。
メンバー
- mouseenter
- タイプ:string
- ポップオーバーはターゲットの要素のマウス入りで表示されます。
- click
- タイプ:string
- ポップオーバーはターゲット要素のクリックで表示されます。
- focus
- タイプ:string
- ポップオーバーはターゲット要素のフォーカスで表示されます。
- manual
- タイプ:string
- ポップオーバーは手動的に表示されます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
showOn:
"focus"
});
//Get
var
showOn = $(
".selector"
).igNotifier(
"option"
,
"showOn"
);
-
state
- タイプ:
- enumeration
- デフォルト:
- info
igNotifier メッセージの現在の状態を取得または設定します。状態は、メッセージおよびターゲット要素に適用される CSS クラスを制御し、その他のオプションも影響します。
メンバー
- success
- タイプ:string
- メッセージおよびターゲット CSS に成功スタイルが適用されます。
- info
- タイプ:string
- メッセージに情報スタイルが適用されます。ターゲットは影響されません。
- warning
- タイプ:string
- メッセージおよびターゲット CSS に警告スタイルが適用されます。
- error
- タイプ:string
- メッセージおよびターゲット CSS にエラー スタイルが適用されます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
state:
"success"
});
//Get
var
state = $(
".selector"
).igNotifier(
"option"
,
"state"
);
//Set
$(
".selector"
).igNotifier(
"option"
,
"state"
,
"success"
);
-
width
継承- タイプ:
- enumeration
- デフォルト:
- null
ポップオーバーの幅を定義します。null を指定すると、auto に解決します。
メンバー
- number
- 幅を数字で設定できます。
- string
- 幅をピクセル (px) で設定できます。
コード サンプル
//Initialize
$(
".selector"
).igNotifier({
width:300
});
//Get
var
width = $(
".selector"
).igNotifier(
"option"
,
"width"
);
Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。
-
hidden
継承- キャンセル可能:
- false
ポップオーバーが非表示された後に発生するイベント。
コード サンプル
//Bind after initialization
$(document).on(
"ignotifierhidden"
,
".selector"
,
function
(evt, ui) {
//return the triggered event
evt;
//reference to the igNotifier widget.
ui.owner;
//reference the element the popover hid for.
ui.element;
// reference the current content displayed in the popover as a string.
ui.content;
//reference the popover element hidden.
ui.popover;
});
//Initialize
$(
".selector"
).igNotifier({
hidden:
function
(evt, ui) {
...
}
});
-
hiding
継承- キャンセル可能:
- true
ポップオーバーが非表示する前に発生するイベント。
コード サンプル
//Bind after initialization
(document).on(
"ignotifierhiding"
,
".selector"
,
function
(evt, ui) {
//return the triggered event
evt;
//reference to the igNotifier widget.
ui.owner;
//reference the element the popover will hide for.
ui.element;
//reference the current content in the popover as a string.
ui.content;
//reference the popover element hiding.
ui.popover;
);
/Initialize
(
".selector"
).igNotifier({
hiding:
function
(evt, ui) {
...
}
});
-
showing
継承- キャンセル可能:
- true
ポップオーバーが表示する前に発生するイベント。
コード サンプル
//Bind after initialization
$(document).on(
"ignotifiershowing"
,
".selector"
,
function
(evt, ui) {
//return the triggered event
evt;
//reference to the igNotifier widget.
ui.owner;
//reference the element the popover will show for.
ui.element;
//reference the current content to be shown as a string.
ui.content;
//reference the popover element showing.
ui.popover;
});
//Initialize
$(
".selector"
).igNotifier({
showing:
function
(evt, ui) {
...
}
});
-
shown
継承- キャンセル可能:
- false
ポップオーバーが表示された後に発生するイベント。
コード サンプル
//Bind after initialization
$(document).on(
"ignotifiershown"
,
".selector"
,
function
(evt, ui) {
//return the triggered event
evt;
//reference to the igNotifier widget.
ui.owner;
// reference the element the popover showed for.
ui.element;
//reference the content that was shown as a string.
ui.content;
// reference the popover element shown.
ui.popover;
});
//Initialize
$(
".selector"
).igNotifier({
shown:
function
(evt, ui) {
...
}
});
-
changeLocale
- .igNotifier( "changeLocale" );
ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。コード サンプル
$(
".selector"
).igNotifier(
"changeLocale"
);
-
container
継承- .igNotifier( "container" );
- 返却型:
- object
ポップオーバー コンテンツのコンテナーを返します。
コード サンプル
$(
".selector"
).igNotifier(
"container"
);
-
destroy
- .igNotifier( "destroy" );
ウィジェットを破棄します。
コード サンプル
$(
".selector"
).igNotifier(
"destroy"
);
-
getContent
継承- .igNotifier( "getContent" );
- 返却型:
- string
- 返却型の説明:
- ポップオーバー コンテンツ。
ポップオーバー コンテナーの設定されているコンテンツを取得します。
コード サンプル
var
currentContent = $(
".selector"
).igNotifier(
"getContent"
);
-
getCoordinates
継承- .igNotifier( "getCoordinates" );
- 返却型:
- object
- 返却型の説明:
- ポップオーバーの座標 (ピクセル)。
ポップオーバーの現在の座標を取得します。
コード サンプル
var
coordinates = $(
".selector"
).igNotifier(
"getCoordinates"
);
-
hide
継承- .igNotifier( "hide" );
指定されたターゲットにポップオーバーを非表示します。
コード サンプル
$(
".selector"
).igNotifier(
"hide"
);
-
id
継承- .igNotifier( "id" );
- 返却型:
- string
ポップオーバーにアタッチされた要素の ID を返します。
コード サンプル
var
popoverID = $(
".selector"
).igNotifier(
"id"
);
-
isVisible
- .igNotifier( "isVisible" );
- 返却型:
- bool
通知が現在表示されている場合、True を返します。
コード サンプル
var
isVisible = $(
".selector"
).igNotifier(
"isVisible"
);
-
notify
- .igNotifier( "notify", state:object, [message:string] );
特定の状態およびオプションのメッセージをもつ通知をトリガーします。notifyLevel オプションは通知が表示されるかどうかを決定します。
- state
- タイプ:object
- 通知が表示される状態。
- message
- タイプ:string
- オプション
- 表示されるオプションのメッセージ。デフォルトがオーバーライドされます。
コード サンプル
$(
".selector"
).igNotifier(
"notify"
,
"success"
,
"Well Done"
);
-
setContent
継承- .igNotifier( "setContent", newCnt:string );
ポップオーバー コンテナーのコンテンツを設定します。
- newCnt
- タイプ:string
- 設定するポップオーバー コンテンツ。
コード サンプル
$(
".selector"
).igNotifier(
"setContent"
,
"New Content To be Set"
);
-
setCoordinates
継承- .igNotifier( "setCoordinates", pos:object );
ポップオーバーの現在の座標を設定します。
- pos
- タイプ:object
- ポップオーバーの座標 (ピクセル)。
コード サンプル
var
position = {top: 300, left: 450};
$(
".selector"
).igNotifier(
"setCoordinates"
, position);
-
show
継承- .igNotifier( "show", [trg:domelement], [content:string] );
指定されたターゲットにポップオーバーを表示します。
- trg
- タイプ:domelement
- オプション
- ポップオーバーで表示する要素。
- content
- タイプ:string
- オプション
- ポップオーバーを表示するために設定する文字列。
コード サンプル
//show the popover for the target it has been initialized before
$(
".selector"
).igNotifier(
"show"
);
//show the popover for a new target and with s new content to be displayed
$(
".selector"
).igNotifier(
"show"
, $(
"#popover_target"
),
"Content to be displayed in the popover"
);
-
target
継承- .igNotifier( "target" );
- 返却型:
- object
- 返却型の説明:
- 現在のターゲット。
ポップオーバーの現在のターゲットを取得します。
コード サンプル
var
target = $(
".selector"
).igNotifier(
"target"
);
-
ui-igpopover-arrow ui-igpopover-arrow-
- ポップオーバーの矢印に適用されるクラス (ui-igpopover-arrow-top、ui-igpopover-arrow-left など)。
-
ui-widget ui-igpopover ui-ignotify
- メインのポップオーバー コンテナーに適用するクラス。
-
ui-icon ui-icon-closethick ui-igpopover-close-button
- [閉じる] ボタンに適用されるクラス。
-
ui-ignotify-content
- 内部通知コンテナーに適用されるクラス。
-
ui-icon ui-icon-circle-close
- エラー状態のための JQuery UI アイコン クラス。
-
ui-ignotify-error
- エラー状態の場合、メインのポップオーバー コンテナーおよびターゲットに適用されるクラス。
-
ui-ignotify-icon-container
- 内部アイコン コンテナー SPAN に適用されるクラス。
-
ui-icon ui-icon-info
- 情報状態のための JQuery UI アイコン クラス。
-
ui-ignotify-info
- 情報状態の場合、メインのポップオーバー コンテナーおよびターゲットに適用されるクラス。
-
ui-ignotify-inline
- インライン通知のためにメイン コンテナーに適用されるクラス。
-
ui-icon ui-icon-circle-check
- 成功状態のための JQuery UI アイコン クラス。
-
ui-ignotify-success
- 成功状態の場合、メインのポップオーバー コンテナーおよびターゲットに適用されるクラス。
-
ui-igpopover-title
- タイトルがオプションで定義される場合、タイトル コンテナーに適用されるクラス。
-
ui-icon ui-icon-alert
- 成功状態のための JQuery UI アイコン クラス。
-
ui-ignotify-warn
- 警戒状態の場合、メインのポップオーバー コンテナーおよびターゲットに適用されるクラス。