jquery-steps

JavaScript

ステップ式のウィザードを実装できるjQueryプラグイン「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

関連記事

  1. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  2. jQuery.GI.TheWall.js
  3. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  4. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  5. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP