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 '';
}
},
});
别的我就不多说了，想用的更高深一点就去钻一钻。
看看别家程序员的程序人生吧！
文档来源：51CTO技术博客https://blog.51cto.com/u_2324584/3036227
页:
[1]