UIKitのフレームワークにはCSSだけでなくJSも揃っており、例えば画面で何か操作したのちに送信するまえに確認画面をポップアップで表示したい場合があるとします。
その機能をUIKitはフレームと装飾に併せ、JSも準備されています。
公式ページで紹介されている内容を少しカスタムしたものを以下に記録します。
【公式】
<!-- This is a button toggling the modal -->
<button uk-toggle="target: #my-id" type="button">開く</button>
<!-- This is the modal -->
<div id="my-id" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">モーダル</h2>
<button class="uk-modal-close" type="button">閉じる</button>
</div>
</div>
予めheadタグ内でuikit.jsを読み込んでおけば、このタグをソースに組み込むだけでモーダルが完成となります。
また、独自で開く閉じるなどの動作を公式が用意した方法だけでなくJSで動作させることも可能となり、IDやCLASSで紐づけて動作させるなどのカスタムができます。
// 開く場合
UIkit.modal(element).show();
// 閉じる場合
UIkit.modal(element).hide();
elementは、モーダルのID名やClass名などセレクタを指定
この他にキャンセルボタンを含めたものや、モーダル内にフォームを組み込むことも可能。すごいですね。
しかし、例えばこのモーダルを閉じたとき、そのタイミングで何かを動作させたい場合、どこでそのタイミングを受ければ良いのでしょうと思いました。
動作させるためのJSはUIkit.modal(element)の後にイベントを指定すればよいのですが、受け取り方は以下のような方法で大丈夫でした。
UIkit.util.on(element, event, function (e) {
// 動作プログラム
})
eの中身は、モーダルの情報が入っており、モーダル内にフォームを設置した場合、それから情報を抜き取りJSでモーダル元の画面にあるフォームへ挿入などのプログラムが可能となります。
eventには開いたとき、閉じたときだけでなく、開く前や閉じる前などタイミングが色々と用意されていました。
これらのような機能が実装できると、操作的にも高級感が生まれて操作性も向上し、よりよいページ作りができて良いですね。