bootstrap-wizard向導插件的使用

引用文件

<link rel="stylesheet" href="bootstrap-wizard/bootstrap-wizard.css">
<script src="bootstrap-wizard/bootstrap-wizard.js"></script>

添加調用入口

<button id="open-wizard" class="btn btn-primary">Open wizard</button>

添加控件

<div class="wizard" id="some-wizard" data-title="新增數據源">
    <div class="wizard-card" data-cardname="card1"><h3>選擇系統環境</h3>系統信息</div>
    <div class="wizard-card" data-cardname="card1"><h3>填寫配置信息</h3>配置信息</div>
</div>

js調用

$(function() {
    //初始化控件
    var options = {"keyboard": true, 
                   "backdrop": "static", 
                   "show": false,
                   "progressBarCurrent": true,
                   "contentHeight": 500,
                   "contentWidth": 800,
                   "buttons":
                       {cancelText: "取消", 
                       nextText: "下一步", 
                       backText: "上一步", 
                       submitText: "提交", 
                       submittingText: "提交配置中。。。"}};
    var wizard = $("#some-wizard").wizard(options);
    //點擊按鈕口顯示控件
    $('#open-wizard').click(function() {
        wizard.show();
    });
});

 下一步之前開啟校驗，不滿足條件不能下一步

<div class="form-group">
    <label>系統名</label>
    <select class="form-control" id="jdbc" data-validate="checkvalue"></select>
</div>

function checkvalue(el){//該方法作用於form-group標簽，如果頁面存在多個項需要校驗，需要每個控件都加在一個單獨的form-group標簽下面
    var validateValue = {};
    var idValue = $(el).attr('id');
    var sysenname = $("#" + idValue).val();
    if( sysenname == "選擇您的系統"){
        validateValue.status = false;
        validateValue.msg = "請選擇系統";
    }else{
        validateValue.status = true;
    }
    return validateValue;
}

調整步驟區的寬度bootstrap-wizard.css

.wizard-steps {
    width: 20%;//該參數用於調整步驟區的寬度
    background-color: #f5f5f5;
    border-bottom-left-radius: 6px;
    position: relative;
}

隱藏內容區的h3標簽bootstrap-wizard.css

.wizard-card > h3 {
    display:none;//將此處的所有樣式換成display:none;
}