jQuery wizard，一款创建步骤向导的插件

这篇文章完全没有技术难度，但我为什么要写呢？因为我想把这么好的一款插件推荐给需要的小伙伴。因为在我遇到这款插件之前，一直没有找到合适的（step-by-step wizards）创建步骤向导的插件。

###一、下载和效果图
git的下载地址https://github.com/amazingSurge/jquery-wizard。

我觉得效果还挺不错，不过原生的wizard并没有这么好看，需要加工一点css样式。

/* 步骤 */
.wizard-steps {
    display: table;
    width: 100%;
}

.wizard-steps > li.current, .wizard-steps > li.done {
    background: #41b3f9;
    color: #ffffff;
}
.wizard-steps > li.done {
    background: #7ace4c;
}
.wizard-steps > li {
    display: table-cell;
    padding: 10px 20px;
    background: #f7fafc;
}
.wizard-steps > li.current h4, .wizard-steps > li.done h4 {
    color: #ffffff;
}
.wizard-steps > li.current span, .wizard-steps > li.done span {
    border-color: #ffffff;
    color: #ffffff;
}
.wizard-steps > li span {
    border-radius: 100%;
    border: 1px solid rgba(120, 130, 140, 0.13);
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    padding-top: 9px;
    margin-right: 8px;
    text-align: center;
}
.wizard-content {
    padding: 25px;
    border-color: rgba(120, 130, 140, 0.13);
    margin-bottom: 30px;
}

###二、应用实例
####1.引入js和css

<link type="text/css" rel="stylesheet" href="${ctx}/components/wizard/css/wizard.css" />
<script type="text/javascript" src="${ctx}/components/wizard/dist/jquery-wizard.js"></script>

####2.页面布局

<div class="wizard" id="service_market_step">
	<ul class="wizard-steps" role="tablist">
		<li class="active" role="tab">
			<h4>
				<span>1</span>
				步骤
			</h4>
		</li>
		<li role="tab">
			<h4>
				<span>2</span>
				步骤
			</h4>
		</li>
		<li role="tab">
			<h4>
				<span>3</span>
				步骤
			</h4>
		</li>
	</ul>
	<div class="wizard-content">
		<div class="wizard-pane active" role="tabpanel">
			
		</div>
		<div class="wizard-pane" role="tabpanel">
			
		</div>
		<div class="wizard-pane" role="tabpanel">
		</div>
	</div>
</div>

####3.初始化

$("#service_market_step").wizard({
	templates : {
		buttons : function buttons() {// 去掉前后的button
			return '';
		}
	},
});

别的我就不多说了，想用的更高深一点就去钻一钻。

看看别家程序员的程序人生吧！