blocs/blocs: 入力インターフェース(ai-* クラス)
blocs/blocs: 入力インターフェース(ai-* クラス)
入力フォームに ai-* クラスを指定すると、機能が自動的に拡張されます。
ai-* クラス一覧
| クラス | 役割 |
|---|---|
| ai-datepicker | 日付選択用カレンダー入力 |
| ai-timepicker | 日付と時間の入力 |
| ai-phone | 電話番号の自動区切り |
| ai-select2 | 検索機能付きプルダウンメニュー |
| ai-upload | ファイルアップロード入力 |
サンプルコード
<input type="text" id="date" name="date" class="form-control ai-datepicker">
<input type="text" id="date_time" name="date_time" class="form-control ai-timepicker">
<input type="text" id="phone" name="phone" class="form-control ai-phone">
独自の ai-* クラスの作成
resources/views/admin/autoinclude に、ai-* クラス名に対応した .html テンプレートを追加します(ai-datepicker → datepicker.html)。テンプレート内では data-bloc を使わず、内容がそのまま挿入される形式にします。
QA
検索できるプルダウンを作成したい
ai-select2 クラスを使用します。addOption で選択肢を動的に追加することも可能です。
複数選択できるプルダウンを作成したい
ai-select2 クラスに multiple 属性を追加し、name を pulldown[] のように記述します。