bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」JavaScript2017.04.24ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」jquery-stepsは、ステップ式のウィザードを実装することができるシンプルで軽量なjQueryプラグインです。ステップごとに内容を進めていくことができるので、ユーザーにとってはとてもわかりやすいのがいいですね。jquery-stepsjquery-stepsの実際のデモページは以下になります。3まであるサンプルが設置されています。「Next」ボタンをクリックすると、Stepが進んで行く仕組みです。「Step」の部分をクリックしても、そのStepの内容に行くことができます。2では「Next」ボタンの他に「Previous」ボタンも表示されます。前のステップに戻りたい場合は「Previous」ボタンからすぐに戻ることができます。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の詳しい使い方やダウンロードは、以下のページからどうぞ。Clockはシンプルなアナログ時計を実装できます。Flip-QuoteというjQueryプラグインを使って...JavaScript1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ...1ページだけのWebサイトを作る際にとても役立ちそうですね。Zoom」Lightbox風に画像をズームして表示させるjQueryプラグイン「...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。