【JQuery】SmartWizard4 でこんなにサクッとウィザード形式のフォームが作れちゃうなんて

Javascript, 開発

おはようございます。

今日も JQuery の便利プラグインについて。

システムやらサービスやらで、
最初に色々な情報を登録しなければならない場合など、
ダラダラと1ページをスクロールさせるよりウィザード形式にした方が分かりやすいケースがあります。

そんな時に便利なプラグインをちょっと試してみました。

スポンサーリンク

ダウンロード

Github からソース一式をダウンロードします。

後は適当にディレクトリを作成して配置、examples があるので参考にしながら弄ってみる。

画面

基本的には Bootstrap と、SmaratWizard の使いたいテーマのCSSを読み込むだけでOK。

Bootstrap のカードレイアウトに配置してみました。

sample.html

 

スクリプト

ほぼ examples そのままですが。。

javascript

sample.js

サンプルイメージ

デフォルト

デフォルト
デフォルト

矢印

矢印
矢印

円形

円形
円形

ドット

ドット
ドット

テーマは4種類用意されています。
どれもいい感じですね。

まとめ

本当にサクッと導入できてしまうし、
ボタン以外にもステップのタイトルクリックや、キーボード操作での遷移にも対応しています。

また、BootstrapのフォームValidationもそのまま連携できるっぽい。

便利なのでちょっと色々と弄ってみたいと思います。

ではでは。

 

スポンサーリンク


関連するコンテンツ