[]
このPopup に含まれるHTML要素を取得または設定します。
Popup 表示中にユーザーが[Enter]キーを押したときにdialogResult として 使用される値を取得または設定します。
このプロパティのデフォルト値はnullです。
ユーザーが[Enter]を押し、dialogResultEnter プロパティがnullでない場合、 ポップアップは、すべての子要素が有効な状態かどうかをチェックします。 有効な状態の場合は、ポップアップが閉じ、dialogResult プロパティが dialogResultEnter プロパティの値に設定されます。
ダイアログがフォーム要素によってホストされ、 ユーザーがフォームを送信するときにdialogResultとして使用される文字列を取得または設定します。
このプロパティのデフォルト値はnullです。
このプロパティを空でない文字列に設定すると、コントロールは フォームのsubmitイベントを処理し、フィールドを検証し、 指定した値に設定されたdialogResultでフォームを閉じます。 例えば:
let dlg = new Popup('#theForm', {
dialogResultSubmit: 'ok'
});
dlg.show(true, () => {
if (dlg.dialogResult == dlg.dialogResultSubmit) {
// フォームは有効です。ここで結果を処理します
}
});
また、Popupがフォーム以外の要素でホストされている場合に使用できるdialogResultEnterプロパティを参照してください。
Popup を表示するときにフェードインアニメーションを使用する かどうかを決定する値を取得または設定します。
このプロパティのデフォルト値はtrueです。
Popup を非表示にするときにフェードアウトアニメーションを使用する かどうかを決定する値を取得または設定します。
このプロパティのデフォルト値はtrueです。
Popup を非表示にするアクションを取得または設定します。
このプロパティのデフォルト値はPopupTrigger.Blurです。 フォーカスを失った場合、またはEscキーを押した時にポップアップが非表示になります。
hideTrigger プロパティをPopupTrigger.Click に設定すると、ポップアップはオーナ要素を クリックする場合、またはEscキーを押した時非表示になります。 hideTriggerプロパティをPopupTrigger.Leaveに設定すると、マウスがポップアップまたはその所有者要素を離れた後、ポップアップは短い間隔で非表示になります。 hideTriggerプロパティをPopupTrigger.Noneに設定した場合、 ポップアップはhideメソッドが呼び出されたとき、
またはユーザーがEscapeキーを押したときにのみ非表示になります。
コントロールをホストしているDOM要素を取得します。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
ポップアップをそのヘッダーでマウスによってドラッグできるかどうかを示す値を取得または設定します。
ヘッダは、 '.wj-dialog-header' または '.modal-header'のCSSセレクタによって識別されます。 ダイアログに 'wj-dialog-header' または '.modal-header'クラスを持つ要素が含まれていない場合、 ユーザーがポップアップをドラッグすることができません。
このプロパティのデフォルト値は false です。
ポップアップを端からマウスでドラッグしてサイズを変更できるかどうかを決定する値を取得または設定します。
ホスト要素のmax-width、min-width、max-height、およびmin-heightのCSSプロパティを設定して、 ポップアップのサイズを制限できます。
このプロパティのデフォルト値はfalse です。
現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。
コントロールが現在更新中かどうかを示す値を取得します。
Popup が現在表示されているかどうかを決定する値を取得します。
Popup をモーダルダイアログとして表示するかどうかを決定する値を 取得または設定します。
モーダルダイアログは、Popup がページ内の他のコンテンツより目立つように、 暗い背景が付けられます。
ダイアログを完全にモーダルにするには、Popup.hideTrigger プロパティを PopupTrigger.None に設定して、ユーザーが背景をクリックしても ダイアログを閉じることができないようにします。この場合は、Popup.hide メソッドが呼び出されるか、 ユーザーが[Esc]キーを押した場合にのみ、ダイアログが閉じられます。
このプロパティのデフォルト値は false です。
オーナ要素に対してポップアップを表示する必要があるPopupPositionを取得または設定します。
このプロパティのデフォルト値はPopupPosition.BelowLeftです。
Popupを単に非表示にするのではなく、非表示にするときに{@linkPopup}ホスト要素を非表示にするか、DOMから削除するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値はtrueです。
removeOnHideは、Popupが非表示になっている場合は、DOMからPopup要素を削除しますが、作成時に削除しないことに注意してください。
Popupにアクセスキー(accesskey属性)を持つ要素が含まれている場合、Popupが表示されていないときにアクティブ化する必要がありません。 Popupは、作成後にDOMから削除します。 例えば:
import { Popup} from '@mescius/wijmo.input';
import { removeChild } from '@mescius/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 プロパティをPopupTrigger.None に設定すると、 ポップアップはshow メソッドを呼び出すのみで表示されます。
コントロールに関連付けられたtabindex属性の値を取得または設定します。
tabindex属性値は、コントロールのホストHTML要素で指定することで、 Wijmoコントロールに対して静的に定義できます。 ただし、Wijmoコントロールは複雑な構造であり、コントロールが正しく機能できるように、属性値を内部要素に伝達する必要があるため、 この値をアプリケーションのライフサイクルの後半で変更することはできません。
そのため、コントロールのtabindexを動的に読み取ったり変更したりするには、このプロパティを使用して行う必要があります。
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます(dispose と removeEventListener ) メソッドを参照してください)。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。
イベントのターゲット要素。
イベントを指定する文字列。
イベントが発生したときに実行する関数。
リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。
ハンドラーが preventDefault() を呼び出さないことを示します。
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドは、テンプレート化されたコントロールのコンストラクターによって呼び出される必要があるため、 このメソッドを使用することができません。 また、テンプレートのパーツを対応するコントロールのメンバに連結します。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
this.applyTemplate('wj-control wj-inputnumber', templateString, {
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
@param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。
次にendUpdate が呼び出されるまで通知を中断します。
このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。
beginUpdate/endUpdate ブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。
実行する関数。
beginUpdate の呼び出しによって中断された通知を再開します。
このコントロールにフォーカスを設定します。
オブジェクトが指定されたプロパティを持つかどうかを判定します。
プロパティの名前。
Popup を非表示にします。
Popup を閉じる前に dialogResult プロパティに割り当てられる オプションの値。
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
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;
// など
初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外を発生します。
初期化データを含むオブジェクト。
非同期更新を発生させるため、コントロールを無効にします。
内容だけでなくコントロールのレイアウトも更新するかどうか。
オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。
プロトタイプチェーンが判定される別のオブジェクト。
dragging イベントを発生させます。
イベントデータを含むCancelEventArgs 。
イベントがキャンセルされなかった場合はTrue。
hiding イベントを発生させます。
イベントデータを含むCancelEventArgs 。
イベントがキャンセルされなかった場合はTrue。
invalidInput イベントを発生させます。
イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。
positionChanged イベントを発生させます。
positionChanging イベントを発生させます。
イベントデータを含む PopupBoundsChangingEventArgs 。
イベントがキャンセルされなかった場合はTrue。
refreshing イベントを発生させます。
resizing イベントを発生させます。
イベントデータを含むCancelEventArgs 。
イベントがキャンセルされなかった場合はTrue。
showing イベントを発生させます。
イベントデータを含むCancelEventArgs 。
イベントがキャンセルされなかった場合はTrue。
sizeChanged イベントを発生させます。
sizeChanging イベントを発生させます。
イベントデータを含む PopupBoundsChangingEventArgs 。
イベントがキャンセルされなかった場合はTrue。
指定されたプロパティが列挙可能かどうかを判断します。
プロパティの名前。
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます
イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。
削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。
リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。
削除されたリスナーの数。
Popup を表示します。
ポップアップをモーダルダイアログとして表示するかどうか。 指定した場合、その値がmodal プロパティに設定されます。
ポップアップが非表示になると、コールバックが呼び出されます。 コールバックが指定されている場合は、パラメータとしてポップアップを受け取ります。
handleResult コールバックを使用すると、 hidden イベントにハンドラを アタッチしなくても、呼び出し元がモーダルダイアログの結果を処理できます。 たとえば、 以下のコードは、CollectionView 内の現在の項目を編集するための ダイアログを表示します。 編集結果は、 Popup.dialogResult 値に応じてコミット またはキャンセルされます。 次に例を示します。
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();
}
});
}
現在のロケールを使用して文字列に変換された日付を返します。
オブジェクトの文字列表現を返します。
指定されたオブジェクトのプリミティブ値を返します。
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
コンテナー要素。
指定したDOM要素でホストされているコントロールを取得します。
コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
HTML要素で存在するすべてのWijmoコントロールを更新します。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。
Popup がドラッグされた後に発生します。
isDraggableプロパティも参考してください。
Popupがドラッグされようとしているときに発生します。
isDraggableプロパティも参考してください。
コントロールがフォーカスを取得したときに発生します。
Popup が非表示になる後に発生します。
Popup が非表示になる前に発生します。
無効な文字が入力されたときに発生します。
ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。
イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。
イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。
コントロールがフォーカスを失ったときに発生します。
ユーザーが Popup をドラッグすると、次のイベントが発生します。
isDraggable プロパティも参考してください。
ユーザーが Popup をドラッグすると、次のイベントが発生します。
isDraggable プロパティも参考してください。
ユーザーがコントロールをドラッグするときに、positionChangingイベントを使用して、Popupの境界をキャンセルするか変更することができます。
たとえば、次のサンプルコードは、ポップアップを全画面表示に保ち、ユーザーがPopupの一部を画面からドラッグできないようにします。
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);
}
});
コントロールが内容を更新した後で発生します。
コントロールが内容を更新する直前に発生します。
Popup がサイズ変更された後に発生します。
isResizableプロパティも参考してください。
Popupのサイズが変更されようとしているときに発生します。
isResizableプロパティも参考してください。
Popup が表示される前に発生させます。
Popup が表示された後に発生させます。
ユーザーが Popup のサイズを変更すると、次のイベントが発生します。
isResizable プロパティも参考してください。
ユーザーが Popup をドラッグすると、次のイベントが発生します。
isResizable プロパティも参考してください。
要素をポップアップとして表示するクラス。
ポップアップはowner 要素を持つことができます。その場合、ポップアップは、 Popup.showTrigger プロパティとPopup.hideTrigger プロパティによって 指定されるアクションに基づいて表示または非表示にできるリッチツールチップとして動作します。
オーナー要素を持たないポップアップはダイアログのように動作します。画面の中央に配置され、show メソッドを使用して表示されます。
Popup を閉じるには、Popup.hide メソッドを呼び出します。
または、Popup 内に'wj-hide'文字列で始まるクラスを持つクリック可能な 要素がある場合は、その要素がクリックされるとPopup は非表示になります。 さらに、そのクラス名にPopup.dialogResult プロパティが設定され、 呼び出し元が適切なアクションを実行できます。
たとえば、次のPopup は、ユーザーが[OK]または[キャンセル]ボタンを クリックすると非表示になり、Popup.dialogResult プロパティが 'wj-hide-cancel'または'wj-hide-ok'のいずれかに設定されます。
<button id="btn-show-popup"> Show Popup </button> <div id="thePopup" class="wj-dialog"> <div class="wj-dialog-header"> Welcome to the popup. </div> <div class="wj-dialog-body"> Click one of the buttons below to close the popup. </div> <div class="wj-dialog-footer"> <button class="wj-hide-ok"> OK </button> <button class="wj-hide-cancel"> Cancel </button> </div> </div>
new Popup('#thePopup', { owner: '#btn-show-popup', hidden: s => console.log('popup closed with result', s.dialogResult) });
次の例では、Popup コントロールを使用して所有者の要素とダイアログにアタッチされているポップアップを実装する方法を示しています。
/wijmo/demos/Input/Popup/PopupsWithOwnerElements/purejs