//tile
<section class="tile color greensea cornered">
//tile header
<div class="tile-header">
<h1><strong>Other</strong> Inputs</h1>
<div class="controls">
<a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
<a href="#" class="remove"><i class="fa fa-times"></i></a>
</div>
</div>
// /tile header
//tile body
<div class="tile-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input07" class="col-sm-4 control-label">Normal select box</label>
<div class="col-sm-8">
<select class="chosen-select form-control" id="input07">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="input08" class="col-sm-4 control-label">Multiple select box</label>
<div class="col-sm-8">
<select multiple class="chosen-select form-control" id="input08">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="datepicker" class="col-sm-4 control-label">Datepicker field</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="datepicker">
</div>
</div>
<div class="form-group">
<label for="colorpicker" class="col-sm-4 control-label">Colorpicker HEX field</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="colorpicker">
</div>
</div>
<div class="form-group">
<label for="colorpicker-rgb" class="col-sm-4 control-label">Colorpicker RGB field</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="colorpicker-rgb">
</div>
</div>
<div class="form-group">
<label for="colorpicker-rgb" class="col-sm-4 control-label">File Upload field</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" multiple="">
</span>
</span>
<input type="text" class="form-control" readonly="">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Checkbox inputs</label>
<div class="col-sm-8">
<div class="checkbox">
<input type="checkbox" value="1" id="opt01" checked>
<label for="opt01">Option 1</label>
</div>
<div class="checkbox">
<input type="checkbox" value="1" id="opt02">
<label for="opt02">Option 1</label>
</div>
<div class="checkbox">
<input type="checkbox" value="1" id="opt03">
<label for="opt03">Option 1</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Radio inputs</label>
<div class="col-sm-8">
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<label for="optionsRadios1">Option 1</label>
</div>
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
<label for="optionsRadios2">Option 2</label>
</div>
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
<label for="optionsRadios3">Option 3</label>
</div>
</div>
</div>
<div class="form-group form-footer footer-white">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-greensea">Submit</button>
<button type="reset" class="btn btn-red">Reset</button>
</div>
</div>
</form>
</div>
// /tile body
</section>
// /tile
//****************************//
//*********** jquery *********//
//****************************//
//initialize file upload button function
$(document)
.on('change', '.btn-file :file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(function(){
//chosen select input
$(".chosen-select").chosen({disable_search_threshold: 10});
//initialize datepicker
$('#datepicker').datepicker({
todayHighlight: true
});
//initialize colorpicker
$('#colorpicker').colorpicker();
//initialize colorpicker RGB
$('#colorpicker-rgb').colorpicker({
format: 'rgb'
});
//initialize file upload button
$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
})
