ステップ分けするウィザードを実現するJavaScript「jquery-jwizard」

WEBでは何ステップかに分けるウィザード形式により、入力や閲覧させることで、コンバージョンの向上につなげることがあります。
jquery-jwizardを利用すると1htmlでステップ分けをすることができます。
ステップ分けするウィザードを実現するJavaScript「jquery-jwizard」サンプル

使用方法
jquery-jwizardからjquery.jWizard-0.1.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jWizard-0.1.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$('#id名').jWizard();
});
</script>

上記を記述後、以下のようにhtmlを記述すれば完成です。
<div id="jWizard">
<div id="step1" title="ステップタイトル">内容</div>
<div id="step2" title="ステップタイトル">内容</div>
<div id="step3" title="ステップタイトル">内容</div>
<div id="step4" title="ステップタイトル">内容</div>
<!-- 以下ステップ分 -->
<div id="finalStep" title="ステップタイトル">内容</div>
</div>

ボタンなどの表示はjs内で変更可能です。
ステップ分けするウィザードを実現するJavaScript「jquery-jwizard」サンプル

sponsors

「ステップ分けするウィザードを実現するJavaScript「jquery-jwizard」」をシェアする

記事作成:
記事URL:

TOP > > > ステップ分けするウィザードを実現するJavaScript「jquery-jwizard」