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

Timeline.jsスライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」前のページ

Google画像検索っぽいイメージギャラリーを実装できる「jQuery Elastic Grid」次のページjQuery Elastic Grid

関連記事

  1. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  2. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  3. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  4. no-image

    JavaScript

    ウィークデイ(週)のオプションを作成できる「jquery-weekdays」

    jquery-weekdaysはウィークデイ(週)のオプションを作成で…

  5. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  6. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP