jQueryでウィザードを作れるプラグイン「jquery.wizard.js」

フォームとかステップをおって見せたい内容とかウィザード形式で見せられるといいですよね。
Wizard - a jQuery plugin by Testbaudsonはそれを実現することが可能です。
jQueryでウィザードを作れるプラグイン「jquery.wizard.js」サンプル

使用方法
Wizard - a jQuery plugin by Testbaudsonからjquery.wizard.jsをjQueryからjquery.jsをjQuery UIからjquery-ui-1.8.js(coreとwigetのみでOK)をダウンロードします。
さらにjQuery Metadataからjquery.metadata.jsもダウンロードしましょう。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.wizard.js"></script>
<script>
$(function(){
var updatePath = function (path) {
var $path = $("#id1").empty(); //ステップを表示するid名

for (var i in path) {
var $target = $(path[i]);
var title = $target.size() === 1 && $target.attr("title") ?
$target.attr("title") : "undefined";

// カレントステップを取得し、リンクを付与
$("<a />").attr({
"href": path[i],
"title": title
}).text(title)
.addClass("wizard")
.appendTo($path);

// アローを前に付ける
if (i < path.length - 1) {
$path.append(" » ")
}
}
};

// リンクがクリックされたら、あっぷでーと
$("#id2").wizard({
onClickLink: updatePath,
startWith: $("#step1")
});

});
</script>

上記のように記述したら、下記のようなルールでステップを書いていきます。
<!-- Step表示 -->
<div id='id1'></div>

<!-- ここからウィザード -->
<div id='id2'>
<!-- ここからウィザードの1ステップ -->
<div id='step1' title='はじまり' wizardPath='{path:"#step1"}'>
ステップ内容
<!-- 次へのリンク -->
<a class='wizard' href='#step2'>→ 次へ</a>
</div>
<!-- ここまでウィザードの1ステップ -->
</div>

※数字の部分はステップに合わせて変更ください。

jQueryでウィザードを作れるプラグイン「jquery.wizard.js」サンプル

sponsors

「jQueryでウィザードを作れるプラグイン「jquery.wizard.js」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryでウィザードを作れるプラグイン「jquery.wizard.js」