Step 1のタイトル

Step 2のタイトル

Step 3のタイトル

Step 4のタイトル

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/smart_wizard.css" rel="stylesheet" />
<link href="<PATH>/smart_wizard_vertical.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.smartWizard.js"></script>
<script>
	$(window).load(function(){
		$('#SmartWizardDemo').smartWizard();
	});
</script>
<div id="SmartWizardDemo" class="swMain">
	<ul>
		<li><a href="#step-1">
			<label class="stepNumber">1</label>
			<span class="stepDesc">
				Step 1<br />
				<small>Step 1の説明文</small>
			</span>
			</a></li>
		<li><a href="#step-2">
			<label class="stepNumber">2</label>
			<span class="stepDesc">
				Step 2<br />
				<small>Step 2の説明文</small>
			</span>
			</a></li>
		<li><a href="#step-3">
			<label class="stepNumber">3</label>
			<span class="stepDesc">
				Step 3<br />
				<small>Step 3の説明文</small>
			</span>                   
			</a></li>
		<li><a href="#step-4">
			<label class="stepNumber">4</label>
			<span class="stepDesc">
				Step 4<br />
				<small>Step 4の説明文</small>
			</span>                   
			</a></li>
	</ul>
	<div id="step-1">   
		<h2 class="StepTitle">Step 1のタイトル</h2>
		<!-- step content -->
	</div>
	<div id="step-2">
		<h2 class="StepTitle">Step 2のタイトル</h2> 
		<!-- step content -->
	</div>                      
	<div id="step-3">
		<h2 class="StepTitle">Step 3のタイトル</h2>   
		<!-- step content -->
	</div>
	<div id="step-4">
		<h2 class="StepTitle">Step 4のタイトル</h2>   
		<!-- step content -->                         
	</div>
</div>

SmartWizardについて

SmartWizardは、ウィザード形式のコンテンツを設置できるプラグインです。
オプションやメソッドも豊富に用意されています。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスAttribution-ShareAlike 3.0 CC
対応ブラウザ

関連するjQueryプラグイン

  • steps

    steps

    簡単にウィザード形式のコンテンツを設置できる