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;
}