[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Input.Popup

Popup クラス

要素をポップアップとして表示するクラス。

ポップアップは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="btnPopup">ポップアップを表示します。</button>
<wj-popup owner="#btnPopup" style="padding:12px">
  <p>下のいずれかのボタンを押して、ポップアップを非表示にします。</p>
  <hr/>
  <button class="wj-hide-ok" ng-click="handleOK()">OK</button>
  <button class="wj-hide-cancel">キャンセル</button>
</wj-popup>

次の例では、Popup コントロールを使用して所有者の要素とダイアログにアタッチされているポップアップを実装する方法を示しています。

Input/Popup/PopupsWithOwnerElements/purejs

階層

  • any
    • Popup

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new Popup(element: any, options?: any): Popup

  • Popup クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター（例: '#theCtrl'）。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 Popup

プロパティ

content

content: HTMLElement

このPopup に含まれるHTML要素を取得または設定します。

dialogResult

dialogResult: any

Popup を非表示にした後に、そのコンテンツを処理するために使用できる値を取得または設定します。

このプロパティは、Popup が表示されたときにnullに設定され、ボタンクリックイベントに 応答して、またはhide メソッドの呼び出しの中で設定できます。

dialogResultEnter

dialogResultEnter: any

Popup 表示中にユーザーが［Enter］キーを押したときにdialogResult として 使用される値を取得または設定します。

ユーザーが［Enter］を押し、dialogResultEnter プロパティがnullでない場合、 ポップアップは、すべての子要素が有効な状態かどうかをチェックします。 有効な状態の場合は、ポップアップが閉じ、dialogResult プロパティが dialogResultEnter プロパティの値に設定されます。

fadeIn

fadeIn: boolean

Popup を表示するときにフェードインアニメーションを使用する かどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

fadeOut

fadeOut: boolean

Popup を非表示にするときにフェードアウトアニメーションを使用する かどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

hideTrigger

hideTrigger: PopupTrigger

Popup を非表示にするアクションを取得または設定します。

デフォルトでは、showTrigger プロパティはPopupTrigger.Blur に設定されており、 フォーカスを失った場合、またはEscキーを押した時にポップアップが非表示になります。

hideTrigger プロパティをPopupTrigger.Click に設定すると、ポップアップはオーナ要素を クリックする場合、またはEscキーを押した時非表示になります。

hideTrigger プロパティをPopupTrigger.None に設定すると、 Popupはhide メソッドを 呼び出します。

isDraggable

isDraggable: boolean

ポップアップをそのヘッダーでマウスによって ドラッグできるかどうかを示す値を取得または設定します。

ヘッダーは '.wj-dialog-header' のCSSセレクターによって識別されます。 ダイアログに 'wj-dialog-header'クラスの要素が含まれていない場合、ユーザーはポップアップをドラッグできません。

ポップアップをドラッグ可能にする場合は、 '.wj-dialog-header' CSSセレクタの cursorプロパティを設定することができます。次に例を示しています。

<style>
  .wj-popup {
    width: 30%;
  }
  .wj-dialog-header {
    cursor: move;
  }
</style>

このプロパティのデフォルト値は false です。

isVisible

isVisible: boolean

Popup が現在表示されているかどうかを決定する値を取得します。

modal: boolean

Popup をモーダルダイアログとして表示するかどうかを決定する値を 取得または設定します。

モーダルダイアログは、Popup がページ内の他のコンテンツより目立つように、 暗い背景が付けられます。

ダイアログを完全にモーダルにするには、Popup.hideTrigger プロパティを PopupTrigger.None に設定して、ユーザーが背景をクリックしても ダイアログを閉じることができないようにします。この場合は、Popup.hide メソッドが呼び出されるか、 ユーザーが［Esc］キーを押した場合にのみ、ダイアログが閉じられます。

このプロパティのデフォルト値は false です。

owner

owner: HTMLElement

Popup を所有する要素を取得または設定します。

オーナーがnullの場合、ポップアップはダイアログとして動作します。 ダイアログは、画面の中央に配置され、 show メソッドを使用して表示する必要があります。

removeOnHide

removeOnHide: boolean

Popup　が非表示になっているときにPopup　要素を DOMから削除するか非表示にするかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

showTrigger

showTrigger: PopupTrigger

Popup を表示するアクションを取得または設定します。

デフォルトでは、showTrigger プロパティはPopupTrigger.Click に設定されており、 オーナー要素をクリックすると、ポップアップが表示されます。

showTrigger プロパティをPopupTrigger.None に設定すると、 ポップアップはshow メソッドを呼び出すのみで表示されます。

メソッド

hide

  • hide(dialogResult?: any): void

  • Popup を非表示にします。

    引数

    • オプション dialogResult: any

      Popup　を閉じる前に　dialogResult　プロパティに割り当てられる オプションの値。

    戻り値 void

onHidden

  • hidden イベントを発生させます。

    引数

    戻り値 void

onHiding

onShowing

onShown

  • shown イベントを発生させます。

    引数

    戻り値 void

show

  • show(modal?: boolean, handleResult?: Function): void

  • Popup を表示します。

    引数

    • オプション modal: boolean

      ポップアップをモーダルダイアログとして表示するかどうか。 指定した場合、その値がmodal プロパティに設定されます。

    • オプション handleResult: Function

      ポップアップが非表示になると、コールバックが呼び出されます。 コールバックが指定されている場合は、パラメータとしてポップアップを受け取ります。

      handleResult コールバックを使用すると、 hidden イベントにハンドラを アタッチしなくても、呼び出し元がモーダルダイアログの結果を処理できます。 たとえば、 以下のコードは、CollectionView 内の現在の項目を編集するための ダイアログを表示します。 編集結果は、 Popup.dialogResult 値に応じてコミット またはキャンセルされます。 次に例を示します。

      $scope.editCurrentItem = function () {
  $scope.data.editItem($scope.data.currentItem);
  $scope.itemEditor.show(true, function (e) {
    if (e.dialogResult == 'wj-hide-ok') {
      $scope.data.commitEdit();
    } else {
      $scope.data.cancelEdit();
    }
  });
}

    戻り値 void

イベント

hidden

hidden: Event

Popup が非表示になる後に発生します。

hiding

hiding: Event

Popup が非表示になる前に発生します。

showing

showing: Event

Popup が表示される前に発生させます。

shown

shown: Event

Popup が表示された後に発生させます。