jquery-stepsは、ステップ式のウィザードを実装することができるシンプルで軽量なjQueryプラグインです。ステップごとに内容を進めていくことができるので、ユーザーにとってはとてもわかりやすいのがいいですね。
jquery-steps
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の詳しい使い方やダウンロードは、以下のページからどうぞ。
