Skip to content

hifiveとjQuery UIを組み合わせる【モーダル表示】

by : 2017/07/14

hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。

今回はモーダルウィンドウです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。ボタンを押すとモーダルウィンドウが表示されて、情報を入力すると一覧が更新されます。

HTMLについて

HTMLは主に3つの分かれて構成されます。まずモーダルとして表示する部分があります。これは最初表示されません。

次にデータの一覧を表示するテーブルがあります。

そして一覧部分のテンプレートがあります。

JavaScriptについて

JavaScriptの実装ですが、今回はコントローラとロジックに分かれています。それぞれ目的は次のようになります。

  • コントローラ
    UI側のクリックなどをハンドリング
  • ロジック
    ユーザ作成処理などを担当(今回はモック)

まずロジックから紹介します。

ロジックの実装

今回のロジックは DialogLogic としています。今回はモックですが、本来であればAjaxを使ってデータを保存したりします。

コントローラの実装

コントローラは次のような実装になります。まず全体像を紹介します。

コントローラが作成された際のイベント

__ready イベントでは次のように実装します。ポイントとしてはボタンを押した際のコールバック先をhifiveのコントローラとしていることです。

登録ボタンを押した時のイベント

登録ボタンを押した時には単にモーダルを開くだけです。

ダイアログの”Create User”ボタンがクリックされた時のコールバック

モーダルでユーザ作成のボタンが押された際にはロジック側の createUser を呼び出し、その後HTMLに入力された内容を反映します。そして最後にモーダルを閉じて完了です。

ダイアログを閉じる際のイベント

モーダルを閉じるのはjQuery UIのdialogの機能をそのまま使います。

ダイアログ内のフォームをクリアする

最後にフォームの内容をクリアする処理です。


このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。モーダルウィンドウの表示はよくある機能なので、実装時の参考にしてください。

実際に動作するデモはJSFiddleにアップロードしてあります。こちらも合わせてご覧ください。

From → hifive

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。