やりたいこと
jQueryStepsを用いてページロードせずに非同期で進む、以下のようなウィザード形式のUIを実現する。
jQuerySteps
http://www.jquery-steps.com/
準備
必要なファイルをダウンロード
こちらのページから[Download source]をクリック。
使うファイル
- jquery.steps.css
- normalize.css
- main.css
- jquery.steps.min.js
実装
headで必要なファイルを読み込む
jQueryの本体も読み込む。
index.html
<link rel="stylesheet" href="/css/jquery.steps/jquery.steps.css">
<link rel="stylesheet" href="/css/jquery.steps/normalize.css">
<link rel="stylesheet" href="/css/jquery.steps/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/libs/jquery.steps.min.js"></script>
対話型のHTMLの部分
index.html
<div id="example-basic">
<h3>質問１</h3>
<section>
<p>ほげほげほげ？</p>
<textarea name="q1" id="" cols="30" rows="3"></textarea>
</section>
<h3>質問２</h3>
<section>
<p>ふがふがふが？</p>
<textarea name="q2" id="" cols="30" rows="3"></textarea>
</section>
<h3>質問３</h3>
<section>
<p>ぴよぴよぴよ？</p>
<textarea name="q3" id="" cols="30" rows="3"></textarea>
</section>
</div>
JavaScriptの部分
主にオプションを設定する。オプション一覧はこちら。
index.html
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
titleTemplate: "#title#",
labels: {
next: "次へ",
previous: "戻る",
finish: "完了！"
}
});
ファイル全体
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>steps</title>
<link rel="stylesheet" href="/css/jquery.steps/jquery.steps.css">
<link rel="stylesheet" href="/css/jquery.steps/normalize.css">
<link rel="stylesheet" href="/css/jquery.steps/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/libs/jquery.steps.min.js"></script>
</head>
<body>
<div id="example-basic">
<h3>質問１</h3>
<section>
<p>ほげほげほげ？</p>
<textarea name="q1" id="" cols="30" rows="3"></textarea>
</section>
<h3>質問２</h3>
<section>
<p>ふがふがふが？</p>
<textarea name="q2" id="" cols="30" rows="3"></textarea>
</section>
<h3>質問３</h3>
<section>
<p>ぴよぴよぴよ？</p>
<textarea name="q3" id="" cols="30" rows="3"></textarea>
</section>
</div>
<script>
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
titleTemplate: "#title#",
labels: {
next: "次へ",
previous: "戻る",
finish: "完了！"
}
});
</script>
</body>
</html>
以上。