ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

jquery-steps

jquery-stepsは、ステップ式のウィザードを実装することができるシンプルで軽量なjQueryプラグインです。ステップごとに内容を進めていくことができるので、ユーザーにとってはとてもわかりやすいのがいいですね。

jquery-steps

デモ

デモページでは、Step 1〜Step 3まであるサンプルが設置されています。「Next」ボタンをクリックすると、Stepが進んで行く仕組みです。また、直接「Step」の部分をクリックしても、そのStepの内容に行くことができます。

Step 1を選んでいる場合は「Next」ボタンしか表示されていませんが、Step 2では「Next」ボタンの他に「Previous」ボタンも表示されます。前のステップに戻りたい場合は「Previous」ボタンからすぐに戻ることができます。

最後のStep 3では「Previous」ボタンと「Finish」ボタンが表示されます。

また、サンプルでは、現在選択されているStepの部分が水色っぽく色がつくので、いまどこのステップにいるのかも把握しやすいです。

jquery-stepsには、startAt、showBackButton、showFooterButtonsといったオプションやonInit、onChange、onFinish、onDestroyといったイベント、それから.getStepIndex()、.destroy()といったAPIが用意されています。

マークアップも使い方もシンプルなので、手軽に実装できるのがいいですね。

テスト済みのブラウザは、IE11+、Edge、Chrome、Firefox、Opera、Safari。ライセンスはMITとのこと。

というわけで、ステップ式によるウィザードを実装できるシンプルで軽量なjQueryプラグイン「jquery-steps」のご紹介でした。

jquery-steps

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives