Skip to content

hifiveとjQuery UIを組み合わせる【タブ表示】

by : 2017/07/06

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

今回はタブ表示です。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。各タブをクリックするとその下にあるコンテンツが切り替わるのが確認できます。

HTMLについて

HTMLですが、各タブ(リスト)のリンク先にタブのIDを指定しています。

JavaScriptについて

JavaScriptの実装は次のようになります。

初期化処理について

初期化処理ではタブの表示処理を行います。

タブがクリックされた時の処理

タブがクリックされた際にコールバックが受け取れます。Ajax処理などを行ったりするのに使えます。


このように実装することでhifiveとjQuery UIのdialogをシームレスに連携させられるようになります。多くの情報を表示する際にタブは便利な機能なので、実装時の参考にしてください。

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

From → hifive

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

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