ACE框架实践备忘录

1 form-horizontal/form-group/form-control的使用

可以直接form-group下面套内容:

<div class="form-group">
    <label class="label-sm control-label">3,详情描述:</label>
    <textarea id="txt_new_content" class="input-sm form-control"  style="width:100%;height:120px;"></textarea>
</div>

也可以在form-horizontal下面通过col-sm/md/lg-[1~12]水平布局:

<div class="form-horizontal">
    <label class="label-sm control-label">4,相关图片:</label>
    <div class="form-group">
        <div class="col-sm-6" >
            <span class="info" style="color:#b8b8b8;">附图1</span>
            <div id="dragArea1" class="imput-md form-control drag-file-area" style="height: 180px;"></div>
        </div>
        <div class="col-sm-6" >
            <span class="info" style="color:#b8b8b8;">附图2</span>
            <div id="dragArea2" class="imput-md form-control drag-file-area" style="height: 180px;"></div>
        </div>
    </div>
</div>

2 额外触发TAB切换

function setTableActive(tab){
    $("div[class='tab-pane empty active']").removeClass('active');
    $("li[class='empty active']").removeClass('active');
    
    $("#div_"+tab).addClass('active');
    $("#li_"+tab).addClass('active');
};

3 监听TAB切换

//参考Bootstrap 对应版本的写法, ACE本身是基于Bootstrap的
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

4 checkbox

<div class="form-group">
    <label class="label-sm control-label">8,启用数据大屏:</label>
    <label>
        <input id="cb_enable_databoard" type="checkbox" class="ace">
        <span class="lbl"></span>
    </label>
</div>