5.7 KiB
5.7 KiB
モーダル(Modal)
コントロールの機能、種類(通常コントロールまたはコンテナコントロール)、親クラス
- コントロールの機能:
Modalはモーダルダイアログコントロールであり、ページ上に中央揃えで表示されるフローティングパネルを提供します。主にコンテンツ、フォーム、通知メッセージの表示に使用されます。背景クリックによる閉じる操作、自動開閉、タイムアウトによる自動閉じるなどの機能をサポートしています。 - 種類:コンテナコントロール(他の子コントロールを内包可能)
- 親クラス:
bricks.BaseModal
初期化パラメータ
| パラメータ名 | 型 | 説明 |
|---|---|---|
target |
string または Layout | モーダルがマウントされる対象のコンテナ。デフォルトは bricks.Body(つまり body) |
auto_open |
boolean | 作成後に自動的に open() メソッドを呼び出してモーダルを表示するかどうか。デフォルトは false |
auto_close |
boolean | マスク部分のクリックでモーダルを閉じられるようにするか(現在この機能は無効化されています) |
width |
string/number | モーダル内部パネルの幅。例:'500px' や '80%' |
height |
string/number | モーダル内部パネルの高さ |
bgcolor |
string | 内部パネルの背景色。デフォルトは #e8e8e8 |
title |
string | モーダルのタイトル。上部のタイトルバーに表示されます |
archor |
string | 配置アンカー。値は tl, tc, tr, cl, cc, cr, bl, bc, br のいずれか。デフォルトは 'cc'(中央配置) |
注:
org_indexおよびtimeoutはBaseModalで定義されていますが、Modalのコンストラクタのコメントには記載されていません。これらは非推奨であるか、基底クラスによって処理されている可能性があります。
主なイベント
| イベント名 | 発生タイミング |
|---|---|
opened |
open() メソッド呼び出し後に発生。モーダルが表示されたことを示します |
dismissed |
dismiss() メソッドが呼び出され、モーダルが正常に削除された後に発生 |
click |
ユーザーがモーダルのマスク部分をクリックしたときに発生(ただし、auto_close 機能が有効な場合のみバインドされる。現状ではコメントアウト中) |
ModalForm
コントロールの機能、種類(コンテナコントロールまたはコンテナコントロール)、親クラス
- コントロールの機能:
ModalFormはポップアップ形式のフォーム付きモーダルコントロールであり、動的フォームを含むモーダルウィンドウをすばやく構築・表示するために使用されます。データ入力、設定変更などによく利用されます。 - 種類:コンテナコントロール(内部に Form 子コントロールを含む)
- 親クラス:
bricks.PopupWindow
初期化パラメータ
| パラメータ名 | 型 | 説明 |
|---|---|---|
auto_open |
boolean | コンストラクト後に自動的にモーダルを開くかどうか(遅延タスクにより実装) |
width |
string/number | フォームモーダルの幅 |
height |
string/number | フォームモーダルの高さ |
bgcolor |
string | 背景色(親クラスに引き渡して使用) |
archor |
string | 配置方式。Modal と同じく、フォームの位置を制御 |
title |
string | フォームのタイトル。フォームの上部に表示 |
description |
string | フォームの説明文。タイトルの下に表示 |
fields |
array | フォーム項目の設定配列。入力フィールドの構造を定義するために使用 |
binds |
array | オプションのデータバインディング設定。モデルや状態との関連付けに使用 |
user_data |
any | ユーザー定義データ。拡張用途に使用可能(現状では直接使用されていない) |
submit_url |
string (コンストラクタのパラメータではない) | 提出先URL(外部から設定が必要。提出処理に使用) |
注意:
ModalFormは非同期メソッドbuild_formを使い、0.2秒の遅延を設けてフォームを作成します。これにより、DOM環境が準備完了していることを保証します。
主なイベント
| イベント名 | 発生タイミング |
|---|---|
submit |
フォームが送信されたときに発生。フォームデータを引数として渡します |
submited |
フォームの送信処理が完了した後に発生(Form コントロールの submited イベントから転送)。サーバーからの返信データを含みます |
cancel |
ユーザーがキャンセルボタンをクリックしたときに発生(dismiss メソッドにバインド) |
dismissed |
モーダルが閉じた後に発生(親クラスから継承) |
説明:このコントロールは
Formコントロールのイベント機構に依存しており、そのイベントをラップして転送しています。