这篇文章完全没有技术难度，但我为什么要写呢？因为我想把这么好的一款插件推荐给需要的小伙伴。因为在我遇到这款插件之前，一直没有找到合适的（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 ''; } }, });别的我就不多说了，想用的更高深一点就去钻一钻。
看看别家程序员的程序人生吧！
沉默王二 认证博客专家 博客之星 Java 大牛 微信搜索【沉默王二】，回复关键字【Java】白嫖1000本精华电子书。我的微信：qing_geee 有任何问题欢迎私聊咨询。