表单

Input输入框

带 label 的输入框

<div class="form-group">
    <label class="col-sm-3 control-label" for="input-id"> Password Field </label>
    <div class="col-sm-9">
        <input type="password" id="input-id" placeholder="Password" class="col-xs-10 col-sm-5">
    </div>
</div>

Textarea

<textarea class="form-control"  placeholder="Default Text" style="height:52px;width: 361px;"></textarea>

自适应：class添加属性 autosize-transition 即可。

Checkbox

1. 选择框样式

<div class="checkbox">
    <label>
        <input name="form-field-checkbox" type="checkbox" class="ace">
        <span class="lbl"> choice 1</span>
    </label>
</div>

2. 滑动按钮样式

<label>
    <input name="switch-field-1" class="ace ace-switch" type="checkbox">
    <span class="lbl"></span>
</label>

七种样式如下，默认为样式1，2-7的样式只需给input的添加class ace-switch-n 即可，n为所选样式数字，如：

<label>
    <input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox">
    <span class="lbl"></span>
</label>

• 禁用： 给 input 添加 disabled 即可

• 选中： 给 input 添加 checked="checked"

Radio

<div class="radio">
    <label>
        <input name="form-field-radio" type="radio" class="ace">
        <span class="lbl"> radio option 1</span>
    </label>
</div>

• 禁用： 给 input 添加 disabled 即可

• 选中： 给 input 添加 checked="checked"

Select

<select class="form-control">
    <option value="">&nbsp;</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
</select>

Date Picker

<div class="input-group">
  <input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy">
  <span class="input-group-addon"><i class="icon-calendar bigger-110"></i></span>
</div>

上传文件

1. 输入框上传

   <div class="ace-file-input">
    <input type="file" id="id-input-file-1">
    <label class="file-label" data-title="Choose">
        <span class="file-name" data-title="No File ..."><i class="icon-upload-alt"></i></span>
    </label>
    <a class="remove" href="#"><i class="icon-remove"></i></a>
   </div>
   

   $('#id-input-file-1').ace_file_input({
    no_file:'No File ...',
    btn_choose:'Choose',
    btn_change:'Change',
    droppable:false,
    onchange:null,
    thumbnail:false //| true | large
    //whitelist:'gif|png|jpg|jpeg'
    //blacklist:'exe|php'
    //onchange:''
    //
   });
   

2. 拖拽上传

   <div class="ace-file-input ace-file-multiple">
    <input id="id-input-file-3" multiple="" type="file">
        <label class="file-label" data-title="Drop files here or click to choose">
            <span class="file-name" data-title="No File ...">
                <i class="icon-cloud-upload"></i>
            </span>
        </label>
        <a class="remove" href="#"><i class="icon-remove"></i></a>
    </input>
   </div>
   

   $('#id-input-file-3').ace_file_input({
      style:'well',
      btn_choose:'Drop files here or click to choose',
      btn_change:null,
      no_icon:'icon-cloud-upload',
      droppable:true,
      thumbnail:'small'//large | fit
      //,icon_remove:null//set null, to hide remove/reset button
      /**,before_change:function(files, dropped) {
          //Check an example below
          //or examples/file-upload.html
          return true;
      }*/
      /**,before_remove : function() {
          return true;
      }*/
      ,
      preview_error : function(filename, error_code) {
          //name of the file that failed
          //error_code values
          //1 = 'FILE_LOAD_FAILED',
          //2 = 'IMAGE_LOAD_FAILED',
          //3 = 'THUMBNAIL_FAILED'
          //alert(error_code);
      }
   
   }).on('change', function(){
      //console.log($(this).data('ace_input_files'));
      //console.log($(this).data('ace_input_method'));
   });