content
このPopup に含まれるHTML要素を取得または設定します。
constructor(element: any, options?: any): Popup
Popupクラスの新しいインスタンスを初期化します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
JavaScript object containing initialization data for the control.
Gets or sets a value used as a return value for the Popup after it is hidden.
Popup を非表示にした後に、そのコンテンツを処理するために使用できる値を取得または設定します。
It can be set in response to button click events or in the call to the hide method to provide a result value to callers.
Popup 表示中にユーザーが［Enter］キーを押したときにdialogResult として使用される値を取得または設定します。
このプロパティのデフォルト値は**null**です。
If the user presses Enter and the dialogResultEnter property is not **null**, the popup checks whether all its child elements are in a valid state. If so, the popup is closed and the dialogResult property is set to the value of the dialogResultEnter property.
ダイアログがフォーム要素によってホストされ、ユーザーがフォームを送信するときに、dialogResultとして使用される文字列を設定します。
このプロパティのデフォルト値は**null**です。
このプロパティを空でない文字列に設定すると、コントロールは フォームのsubmitイベントを処理し、フィールドを検証し、 指定した値に設定されたdialogResultでフォームを閉じます。以下に例を示します。
```typescript let dlg = new Popup('#theForm', { dialogResultSubmit: 'ok' }); dlg.show(true, () => { if (dlg.dialogResult == dlg.dialogResultSubmit) { // フォームは有効です。ここで結果を処理します } }); ```
また、Popupがフォーム以外の要素でホストされている場合に使用できるdialogResultEnterプロパティを参照してください。
Gets or sets a value that determines whether the Popup should use a fade-out animation when it is hidden.
このプロパティのデフォルト値は**true**です。
Gets or sets the actions that hide the Popup.
このプロパティのデフォルト値は**PopupTrigger.Blur**Blurです。 フォーカスを失った場合、またはEscキーを押した時にポップアップが非表示になります。
hideTrigger プロパティをClick に設定すると、ポップアップはオーナ要素を クリックする場合、またはEscキーを押した時非表示になります。
hideTriggerプロパティをLeaveに設定すると、マウスがポップアップまたはその所有者要素を離れた後、ポップアップは短い間隔で非表示になります。
hideTriggerプロパティをNoneに設定した場合、 ポップアップはhideメソッドが呼び出されたとき、 またはユーザーがEscapeキーを押したときにのみ非表示になります。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
ポップアップをそのヘッダーでマウスによってドラッグできるかどうかを示す値を取得または設定します。
ヘッダは、 '.wj-dialog-header' または '.modal-header'のCSSセレクタによって識別されます。 ダイアログに 'wj-dialog-header' または '.modal-header'クラスを持つ要素が含まれていない場合、 ユーザーがポップアップをドラッグすることができません。
このプロパティのデフォルト値は **false**です。
ポップアップを端からマウスでドラッグしてサイズを変更できるかどうかを決定する値を取得または設定します。
ホスト要素のmax-width、min-width、max-height、およびmin-heightのCSSプロパティを設定して、 ポップアップのサイズを制限できます。
このプロパティのデフォルト値は **false**です。
Gets or sets a value that determines whether the Popup should be displayed as a modal dialog.
Modal dialogs show a dark backdrop that makes the Popup stand out from other content on the page.
ダイアログを完全にモーダルにするには、hideTrigger プロパティを None に設定して、ユーザーが背景をクリックしても ダイアログを閉じることができないようにします。この場合は、hide メソッドが呼び出されるか、 ユーザーが［Esc］キーを押した場合にのみ、ダイアログが閉じられます。
このプロパティのデフォルト値は **false**です。
オーナ要素に対してツールチップを表示する必要があるPopupPositionを取得または設定します。
このプロパティのデフォルト値は **PopupPosition.BelowLeft**。
Popup が非表示になっているときにPopup 要素を DOMから削除するか非表示にするかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
removeOnHideは、Popupが非表示になっている場合は、DOMからPopup要素を削除しますが、作成時に削除しないことに注意してください。
Popupにアクセスキー（accesskey属性）を持つ要素が含まれている場合、Popupが表示されていないときにアクティブ化する必要がありません。Popupは、作成後にDOMから削除します。 以下に例を示します。 ```typesript import { Popup} from '@grapecity/wijmo.input'; import { removeChild } from '@grapecity/wijmo'; // ポップアップを作成します let popup = new Popup('#popup', { owner: '#show' });
// accesskey要素にイベントハンドラを追加します（accesskey要素はDOMにあります） document.getElementById('alert').addEventListener('click', e => alert('hi'));
// ポップアップ（およびアクセスキー要素）をDOMから削除します // そのため、ポップアップが表示されるまでアクセスキーは機能しません removeChild(popup.hostElement); ```
Popup を表示するアクションを取得または設定します。
このプロパティのデフォルト値は**PopupTrigger.ClickOwner**です。 オーナー要素をクリックすると、ポップアップが表示されます。
showTrigger プロパティをNone に設定すると、 ポップアップはshow メソッドを呼び出すのみで表示されます。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener メソッドを参照してください）。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
dispose(): void
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getTemplate(): string
hide(dialogResult?: any): void
Hides the Popup.
Optional value assigned to the dialogResult property before closing the Popup.
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript grid.initialize({ itemsSource: myList, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'Code', width: 130 }, { binding: 'name', header: 'Name', width: 60 } ] });
// 以下と同等です。 grid.itemsSource = myList; grid.autoGenerateColumns = false; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
onDragging(e: CancelEventArgs): void
draggingイベントを発生させます。
CancelEventArgs that contains the event data.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onHiding(e: CancelEventArgs): boolean
hidingイベントを発生させます。
CancelEventArgs that contains the event data.
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onPositionChanged(e?: EventArgs): void
positionChangedイベントを発生させます。
onPositionChanging(e: PopupBoundsChangingEventArgs): boolean
positionChangingイベントを発生させます。
PopupBoundsChangingEventArgs that contains the event data.
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onResizing(e: CancelEventArgs): void
resizingイベントを発生させます。
CancelEventArgs that contains the event data.
onShowing(e: CancelEventArgs): boolean
showingイベントを発生させます。
CancelEventArgs that contains the event data.
onSizeChanged(e?: EventArgs): void
Raises the sizeChanged event.
onSizeChanging(e: PopupBoundsChangingEventArgs): boolean
sizeChangingイベントを発生させます。
PopupBoundsChangingEventArgs that contains the event data.
refresh(fullUpdate?: boolean): void
コントロールを更新します。
Whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
show(modal?: boolean, handleResult?: Function): void
Popup を表示します。
Whether to show the popup as a modal dialog. If provided, this sets the value of the modal property.
Callback invoked when the popup is hidden. If provided, this should be a function that receives the popup as a parameter.
The **handleResult** callback allows callers to handle the result of modal dialogs without attaching handlers to the hidden event. For example, the code below shows a dialog used to edit the current item in a CollectionView. The edits are committed or canceled depending on the dialogResult value. For example:
```typescript function editCurrentItem(popupEditor: Popup, view: CollectionView) { view.editItem(view.currentItem); popupEditor.show(true, (e: Popup) => { if (e.dialogResult == 'wj-hide-ok') { view.commitEdit(); } else { view.cancelEdit(); } }); } ```
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
ユーザーがPopupを移動するときに発生します。つまり、draggingイベントとdraggedイベントの間。
ユーザーが Popup をドラッグすると、次のイベントが発生します。 - dragging （1 回だけ発生する、キャンセルできます） - positionChanging（ユーザーがマウスを動かすと数回発生する、キャンセルできます） - positionChanged （ユーザーがマウスを動かすと数回発生します) - dragged （サイズ変更の処理が完了した後に1 回だけ発生します)プロパティも参考してください。
isDraggableプロパティも参考してください。
ユーザーがPopupを移動するときに発生します。つまり、draggingイベントとdraggedイベントの間。
ユーザーが Popup をドラッグすると、次のイベントが発生します。 - dragging （1 回だけ発生する、キャンセルできます） - positionChanging（ユーザーがマウスを動かすと数回発生する、キャンセルできます） - positionChanged （ユーザーがマウスを動かすと数回発生します) - dragged （サイズ変更の処理が完了した後に1 回だけ発生します)プロパティも参考してください。
isDraggableプロパティも参考してください。
ユーザーがコントロールをドラッグするときに、positionChangingイベントを使用して、Popupの境界をキャンセルするか変更することができます。
たとえば、次のサンプルコードは、ポップアップを全画面表示に保ち、ユーザーがPopupの一部を画面からドラッグできないようにします。
```typescript new Popup('#thePopup', { isDraggable: true, isResizable: true, hideTrigger: 'None',
// ブラウザウィンドウ内でポップアップを完全に保持します positionChanging: (s: Popup, e: PopupBoundsChangingEventArgs) => { let bnd = e.bounds; bnd.left = Math.max(Math.min(bnd.left, innerWidth + scrollX - bnd.width), scrollX); bnd.top = Math.max(Math.min(bnd.top, innerHeight + scrollY - bnd.height), scrollY); } }); ```
Occurs while the user resizes the Popup, between the resizing and resized events.
ユーザーが Popup のサイズを変更すると、次のイベントが発生します。 - resizing （1 回だけ発生する、キャンセルできます） - sizeChanging（ユーザーがマウスを動かすと数回発生する、キャンセルできます） - sizeChanged （ユーザーがマウスを動かすと数回発生します) - resized （サイズ変更の処理が完了した後に1 回だけ発生します)プロパティも参考してください。
isResizableプロパティも参考してください。
Occurs while the user resizes the Popup, between the resizing and resized events.
ユーザーが Popup のドラッグすると、次のイベントが発生します。 - resizing （1 回だけ発生する、キャンセルできます） - sizeChanging（ユーザーがマウスを動かすと数回発生する、キャンセルできます） - sizeChanged （ユーザーがマウスを動かすと数回発生します) - resized （サイズ変更の処理が完了した後に1 回だけ発生します)プロパティも参考してください。
isResizableプロパティも参考してください。
要素をポップアップとして表示するクラス。
ポップアップはowner要素を持つことができます。その場合、ポップアップはリッチツールチップとして動作し、showTriggerプロパティとhideTriggerプロパティによって指定されたアクションに基づいて表示または非表示にできます。
オーナー要素を持たないポップアップはダイアログのように動作します。画面の中央に配置され、show メソッドを使用して表示されます。
Popupを閉じるには、hideメソッドを呼び出します。
または、Popup 内に'wj-hide'文字列で始まるクラスを持つクリック可能な要素がある場合は、その要素がクリックされるとPopup は非表示になります。さらに、そのクラス名にdialogResult プロパティが設定され、呼び出し元が適切なアクションを実行できます。
たとえば、次のPopup は、ユーザーが［OK］または［キャンセル］ボタンを クリックすると非表示になり、Popup プロパティが 'wj-hide-cancel'または'wj-hide-ok'のいずれかに設定されます。
```html
次の例では、Popup コントロールを使用して所有者の要素とダイアログにアタッチされているポップアップを実装する方法を示しています。
{@sample Input/Popup/PopupsWithOwnerElements/purejs}