63 lines
5.7 KiB
Markdown
63 lines
5.7 KiB
Markdown
# モーダル（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` コントロールのイベント機構に依存しており、そのイベントをラップして転送しています。 |