コンテンツへスキップ

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

by : 2017/07/14

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

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

デモコードについて

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

HTMLについて

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

<div id="dialog-form" title="Create new user" style="display: none;">
<form>
<fieldset>
<label for="name">ID</label> <input type="text" name="id" id="id"
class="text ui-widget-content ui-corner-all" /> <label
for="email">名前</label> <input type="text" name="userName"
id="userName" value=""
class="text ui-widget-content ui-corner-all" /> <label
for="password">パスワード</label> <input type="password"
name="password" id="password" value=""
class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>

view raw
index.js
hosted with ❤ by GitHub

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

<table id="result" class="ui-widget ui-widget-content"
style="margin: 1em 0; border-collapse: collapse;">
<tr class="ui-widget-header">
<th>ID</th>
<th>名前</th>
<th>パスワード</th>
</tr>
<tr>
<td>test_id</td>
<td>test_name</td>
<td>test_password</td>
</tr>
</table>
<input type="button" id="register" value="register" />

view raw
index.html
hosted with ❤ by GitHub

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

<script type="text/ejs" id="row">
<tr>
<td>[%= id %]</td>
<td>[%= userName %]</td>
<td>[%= password %]</td>
</tr>
</script>

view raw
index.html
hosted with ❤ by GitHub

JavaScriptについて

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

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

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

ロジックの実装

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

var dialogLogic = {
__name: 'DialogLogic',
createUser: function() {
this._private();
},
_private: function() {
alert('create user!');
}
};

view raw
index.html
hosted with ❤ by GitHub

コントローラの実装

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

var controller = {
// コントローラ名の定義
__name: 'DialogController',
// ロジックの定義
dialogLogic: dialogLogic,
// コントローラが作成された際のイベント
__ready: function() {
},
// 登録ボタンを押した時のイベント
'#register click': function() {
},
// ダイアログの"Create User"ボタンがクリックされた時のコールバック
createUser: function(originalThis, event) {
},
// ダイアログを閉じる際のイベント
cancel: function(target, event) {
},
// ダイアログ内のフォームをクリアする
clearForm: function() {
}
};
// コントローラの作成と要素へのバインド
h5.core.controller('#container', controller);

view raw
index.js
hosted with ❤ by GitHub

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

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

__ready: function() {
// registerボタンの装飾
$('#register').button();
var that = this;
// dialogの設定
// ボタンを押した時のコールバックはhifive化したコントローラのメソッドを設定している。
$('#dialog-form').dialog({
autoOpen: false,
height: 320,
width: 350,
modal: true,
buttons: {
'Create User': that.ownWithOrg(that.createUser),
Cancel: that.ownWithOrg(that.cancel)
},
close: that.own(that.clearForm)
});
},

view raw
index.js
hosted with ❤ by GitHub

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

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

'#register click': function() {
$('#dialog-form').dialog('open');
},

view raw
index.js
hosted with ❤ by GitHub

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

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

createUser: function(originalThis, event) {
// DialogLogicのcreateUserメソッドを呼ぶ
this.dialogLogic.createUser();
// 画面に追加する文字列を取得
var row = this.view.get('row', {
id: $('#id').val(),
userName: $('#userName').val(),
password: $('#password').val()
});
$('#result tbody').append(row);
$('#dialog-form').dialog('close');
},

view raw
index.js
hosted with ❤ by GitHub

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

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

cancel: function(target, event) {
$('#dialog-form').dialog('close');
},

view raw
index.js
hosted with ❤ by GitHub

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

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

clearForm: function() {
$('#id').val('');
$('#userName').val('');
$('#password').val('');
}

view raw
index.js
hosted with ❤ by GitHub


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

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

From → hifive

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

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