jQuery wizard，一款建立步驟向導的插件

版權聲明：歡迎轉載，請注明沉默王二原創。 https://blog.csdn.net/qing_gee/article/details/74926175

這篇文章完全沒有技術難度，但我為什麼要寫呢？因為我想把這麼好的一款插件推薦給需要的小夥伴。因為在我遇到這款插件之前，一直沒有找到合适的（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 '';
        }
    },
});           

别的我就不多說了，想用的更高深一點就去鑽一鑽。

看看别家程式員的程式人生吧！