AceAdmin In MVC之控件

　　AceAdmin有很多Html控件，而下载下来之后全部混杂在一起，想用一个控件有时得调整半天，干脆整理出一个版本，而且结合起来MVC的封装。以后就不用一个js css的调了。

　　在MVC中Html的控件有两种，一个带for一个不带for。

　　@Html.TextArea：直接输出一个文本框，可以自定义输出任何内容。

　　@Html.TextAreaFor：输出绑定Model的文本框。

一、下拉框

　　1、基本示例

　　视图：

@{Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head><title>下拉框 - Ace Admin</title>@* 这个控制宽度(只是控制div的) *@<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />@* 以下两个对下拉框的样式有影响 *@<link rel="stylesheet" href="/assets/css/chosen.css" /><link rel="stylesheet" href="/assets/css/ace.min.css" />　　 <link rel="stylesheet" href="/assets/css/css.css"/>

    <link rel="stylesheet" href="/assets/css/font-awesome.min.css" /><script src="/Scripts/jquery_2_1_0_min.js"></script><!--[if IE]><script src="/Scripts/jquery_1_11_0_min.js"></script><![endif]--><script src="/assets/js/chosen.jquery.min.js"></script><script type="text/javascript">$(function ($) {$('.chosen-select').chosen({ allow_single_deselect: true });//窗口大小改变时，下拉框跟着缩放
            $(window).on('resize.chosen', function () {var w = $('.chosen-select').parent().width();$('.chosen-select').next().css({ 'width': w });}).trigger('resize.chosen');});</script>
</head><body><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-4"><!-- Html示例 --><select class="chosen-select" name="Hero" data-placeholder="请选择英雄..."><option value=""></option>    <!-- 默认的Text里不要放东西，否则不会选择(请选择) --><option value="1">刘备</option><option value="2">关羽</option><option value="3">张飞</option></select><div class="space-4"></div><!-- MVC版示例 -->@*对于AceAdmin很多-，在MVC中要用_代替*@@Html.DropDownList("SelectListItem", null, null, new { @class = "chosen-select", data_placeholder="请选择英雄...", name = "Hero" })</div></div></div>
</body>
</html>

　　后台：

    public ActionResult HtmlControl(){List<SelectListItem> SelectListItem = new List<SelectListItem>();SelectListItem.Add(new SelectListItem { Text = " ", Value = "" });SelectListItem.Add(new SelectListItem { Text = "刘备", Value = "1" });SelectListItem.Add(new SelectListItem { Text = "关羽", Value = "2" });SelectListItem.Add(new SelectListItem { Text = "张飞", Value = "3" });ViewBag.SelectListItem = SelectListItem;return View();}

　　另外推荐1种创建SelectList的方法，能与ORM工具比较好地结合。

    //模拟数据库查出来的数据List<Person> ListPerson = new List<Person>(){new Person(){ Id = 0, Name=" " },new Person(){ Id = 1, Name="刘备" },new Person(){ Id = 2, Name="关羽" },new Person(){ Id = 3, Name="张飞" }};SelectList ListItem = new SelectList(ListPerson, "Id", "Name");　　//还有第四个参数是默认选定的值ViewBag.SelectListItem = ListItem;

　　如果是用SelectListItem，那么要配合Linq的Select()方法查出Text与Value

　　IEnumerable<SelectListItem> items = ListPerson.Select(item => new SelectListItem { Value = item.Id.ToString(), Text = item.Name });

　　2、多选

　　如果是多选，只需要添加一个属性就OK了，其他完全一样：multiple="multiple"

　　3、搜索框

　　class="form-control"与class = "chosen-select"的区别就在于有没有搜索框。

二、文本框

　　文本框的示例也有很多种：

普通文本框
最长文本框
密码
readonly
disabled
可控大小
可控长度
带图标文本框
带提示文本框
Tab标签文本框(用到的Js最多，而且又不支持IE，不好用的东西)

@{Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head><title>文本框 - Ace Admin</title><link rel="stylesheet" href="/assets/css/bootstrap.min.css" /><link href="/assets/css/font-awesome.min.css" rel="stylesheet" /><link href="/assets/css/css.css" rel="stylesheet" /><link rel="stylesheet" href="/assets/css/ace.min.css" /><!-- 可拖动控制长度的文本框的按钮 --><link rel="stylesheet" href="/assets/css/jquery-ui.custom.min.css" />
</head><body><div class="row"><div class="col-xs-12"><form class="form-horizontal" role="form"><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Text Field </label><div class="col-sm-9"><input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" /></div></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-1-1"> Full Length </label><div class="col-sm-9"><input type="text" id="form-field-1-1" placeholder="Text Field" class="form-control" /></div></div><div class="space-4"></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-2"> Password Field </label><div class="col-sm-9"><input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" /><span class="help-inline col-xs-12 col-sm-7"><span class="middle">Inline help text</span></span></div></div><div class="space-4"></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> Readonly field </label><div class="col-sm-9"><input readonly="" type="text" class="col-xs-10 col-sm-5" id="form-input-readonly" value="This text field is readonly!" /><span class="help-inline col-xs-12 col-sm-7"><label class="middle"><input class="ace" type="checkbox" id="id-disable-check" /><span class="lbl"> Disable it!</span></label></span></div></div><div class="space-4"></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4">Relative Sizing</label><div class="col-sm-9"><input class="input-sm" type="text" id="form-field-4" placeholder=".input-sm" /><div class="space-2"></div><div class="help-block" id="input-size-slider"></div></div></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-5">Grid Sizing</label><div class="col-sm-9"><div class="clearfix"><input class="col-xs-1" type="text" id="form-field-5" placeholder=".col-xs-1" /></div><div class="space-2"></div><div class="help-block" id="input-span-slider"></div></div></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right">Input with Icon</label><div class="col-sm-9"><span class="input-icon"><input type="text" id="form-field-icon-1" /><i class="ace-icon fa fa-leaf blue"></i></span><span class="input-icon input-icon-right"><input type="text" id="form-field-icon-2" /><i class="ace-icon fa fa-leaf green"></i></span></div></div><div class="space-4"></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-6">Tooltip and help button</label><div class="col-sm-9"><input data-rel="tooltip" type="text" id="form-field-6" placeholder="Tooltip on hover" title="Hello Tooltip!" data-placement="bottom" /><span class="help-button" data-rel="popover" data-trigger="hover" data-placement="left" data-content="More details." title="Popover on hover">?</span></div></div><div class="space-4"></div><div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-tags">Tag input</label><div class="col-sm-9"><div class="inline"><input type="text" name="tags" id="form-field-tags" value="Tag Input Control" placeholder="Enter tags ..." /></div></div></div></form></div></div><script src="/Scripts/jquery_2_1_0_min.js"></script><script type="text/javascript">window.jQuery || document.write("<script src='/assets/js/jquery.min.js'>" + "<" + "/script>");</script>@* Tag文本框(Taq需要用到特别多的js) *@<script src="/Scripts/bootstrap.min.js"></script><script src="/assets/js/bootstrap-tag.min.js"></script><script src="/assets/js/jquery.knob.min.js"></script><script src="/assets/js/jquery.autosize.min.js"></script><script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script><script src="/assets/js/jquery.maskedinput.min.js"></script><script src="/assets/js/bootstrap-colorpicker.min.js"></script><script src="/assets/js/jquery-ui.custom.min.js"></script><script src="/assets/js/jquery.ui.touch-punch.min.js"></script><script src="/assets/js/chosen.jquery.min.js"></script><script src="/assets/js/fuelux/fuelux.spinner.min.js"></script><script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script><script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script><script src="/assets/js/date-time/moment.min.js"></script><script src="/assets/js/date-time/daterangepicker.min.js"></script><script src="/assets/js/date-time/bootstrap-datetimepicker.min.js"></script><script src="/assets/js/ace.min.js"></script><script src="/assets/js/ace-elements.min.js"></script>@* Tag文本框 *@<script type="text/javascript">$(function ($) {@* Disable it!点击时 *@$('#id-disable-check').on('click', function () {var inp = $('#form-input-readonly').get(0);if (inp.hasAttribute('disabled')) {inp.setAttribute('readonly', 'true');inp.removeAttribute('disabled');inp.value = "This text field is readonly!";}else {inp.setAttribute('disabled', 'disabled');inp.removeAttribute('readonly');inp.value = "This text field is disabled!";}});@* 带提示的文本框生效 *@$('[data-rel=tooltip]').tooltip({ container: 'body' });$('[data-rel=popover]').popover({ container: 'body' });@* 拖动条控制文本框大小 *@$("#input-size-slider").css('width', '200px').slider({value: 1,range: "min",min: 1,max: 8,step: 1,slide: function (event, ui) {var sizing = ['', 'input-sm', 'input-lg', 'input-mini', 'input-small', 'input-medium', 'input-large', 'input-xlarge', 'input-xxlarge'];var val = parseInt(ui.value);$('#form-field-4').attr('class', sizing[val]).val('.' + sizing[val]);}});@* 拖动条控制文本框长度 *@$("#input-span-slider").slider({value: 1,range: "min",min: 1,max: 12,step: 1,slide: function (event, ui) {var val = parseInt(ui.value);$('#form-field-5').attr('class', 'col-xs-' + val).val('.col-xs-' + val);}});@* Tag文本框(Taq需要用到特别多的js) *@var tag_input = $('#form-field-tags');try {tag_input.tag({placeholder: tag_input.attr('placeholder'),//enable typeahead by specifying the source array
                  source: ace.vars['US_STATES'],//defined in ace.js >> ace.enable_search_ahead/**//从Web后台读取数据的写法source: function(query, process) {$.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)}).done(function(result_items){process(result_items);});}*/});//编程的方式添加一个项var $tag_obj = $('#form-field-tags').data('tag');$tag_obj.add('Programmatically Added');}catch (e) {//旧IE版本兼容
            tag_input.after('<textarea id="' + tag_input.attr('id') + '" name="' + tag_input.attr('name') + '" rows="3">' + tag_input.val() + '</textarea>').remove();//$('#form-field-tags').autosize({append: "\n"});
        }});</script>
</body>
</html>

三、TextArea

　　TextArea在AceAdmin里多了两个比较特别的功能。

　　1、限制输入字符数

　　class="form-control limited" maxlength="50"

　　2、自适应高度，输入越多高度自动增长

　　class="autosize-transition form-control"

　　3、默认文本

　　placeholder="默认显示出来的文本"

@{Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head><title>TextArea - Ace Admin</title><link rel="stylesheet" href="/assets/css/bootstrap.min.css" /><link rel="stylesheet" href="/assets/css/ace.min.css" />
</head><body class="no-skin"><div class="col-sm-4"><div class="widget-body"><div class="widget-main"><div><textarea class="form-control" id="form-field-8" placeholder="Default Text"></textarea></div><hr /><div><textarea class="form-control limited" id="form-field-9" maxlength="50"></textarea></div><hr /><div>@Html.TextArea("text", "你在他想还好吗", new { @class = "form-control limited", maxlength = "20" })</div><hr /><div><textarea id="form-field-11" class="autosize-transition form-control"></textarea></div></div></div></div>@* TextArea用到的js *@<script src="/Scripts/jquery_2_1_0_min.js"></script><script src="/Scripts/bootstrap.min.js"></script><script src="/assets/js/chosen.jquery.min.js"></script><script src="/assets/js/jquery.autosize.min.js"></script><script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script><script src="/assets/js/jquery.maskedinput.min.js"></script><!-- inline scripts related to this page --><script type="text/javascript">$(function ($) {$('textarea[class*=autosize]').autosize({ append: "\n" });$('textarea.limited').inputlimiter({remText: '%n character%s remaining...',limitText: 'max allowed : %n.'});});</script>
</body>
</html>

四、限制格式的文本框

　　主要是由jQuery.maskedinput插件实现。

@{Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head><title>Form Elements - Ace Admin</title><link rel="stylesheet" href="/assets/css/bootstrap.min.css" /><link rel="stylesheet" href="/assets/css/ace.min.css" /><link rel="stylesheet" href="/assets/css/font-awesome.min.css" /><link href="/assets/css/css.css" rel="stylesheet" /><script src="/Scripts/jquery_2_1_0_min.js"></script><script src="/assets/js/jquery.maskedinput.min.js"></script><script src="/assets/js/ace.min.js"></script><script src="/assets/js/ace-elements.min.js"></script><script type="text/javascript">$(function ($) {$.mask.definitions['~'] = '[+-]';$('.input-mask-date').mask('9999/99/99');$('.input-mask-phone').mask('(999) 9999999');$('.input-mask-eyescript').mask('~9.99 ~9.99 999');$(".input-mask-product").mask("a*-999-a999", { placeholder: " ", completed: function () { alert("You typed the following: " + this.val()); } });});</script></head><body class="no-skin"><div class="col-xs-12 col-sm-4"><div class="widget-box"><div class="widget-header"><h4 class="widget-title">限制格式输入框</h4><span class="widget-toolbar"><a href="#" data-action="settings"><i class="ace-icon fa fa-cog"></i></a><a href="#" data-action="reload"><i class="ace-icon fa fa-refresh"></i></a><a href="#" data-action="collapse"><i class="ace-icon fa fa-chevron-up"></i></a><a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a></span></div><div class="widget-body"><div class="widget-main"><div><label for="form-field-mask-1">日期<small class="text-success">9999/99/99</small></label><div class="input-group"><input class="form-control input-mask-date" type="text" id="form-field-mask-1" /><span class="input-group-btn"><button class="btn btn-sm btn-default" type="button"><i class="ace-icon fa fa-calendar bigger-110"></i>Go!</button></span>@Html.TextBox("date", "2014-12-12", new { @class = "form-control input-mask-date" })<span class="input-group-btn"><button class="btn btn-sm btn-default" type="button"><i class="ace-icon fa fa-calendar bigger-110"></i>Go!</button></span></div></div><hr /><div><label for="form-field-mask-2">电话<small class="text-warning">(999) 9999999</small></label><div class="input-group"><span class="input-group-addon"><i class="ace-icon fa fa-phone"></i></span><input class="form-control input-mask-phone" type="text" id="form-field-mask-2" /></div></div><hr /><div><label for="form-field-mask-3">密钥<small class="text-error">a*-999-a999</small></label><div class="input-group"><input class="form-control input-mask-product" type="text" id="form-field-mask-3" /><span class="input-group-addon"><i class="ace-icon fa fa-key"></i></span></div></div><hr /><div><label for="form-field-mask-4">Eye Script<small class="text-info">~9.99 ~9.99 999</small></label><div><input class="input-medium input-mask-eyescript" type="text" id="form-field-mask-4" /></div></div></div></div></div></div>
</body>
</html>

五、CheckBox与Radio与CheckBox实现的开关

@{Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head><title>CheckBox与Radio与开关 - Ace Admin</title><link href="/assets/css/bootstrap.min.css" rel="stylesheet" /><link href="/assets/css/font-awesome.min.css" rel="stylesheet" /><link href="/assets/css/css.css" rel="stylesheet" /><link href="/assets/css/ace.min.css" rel="stylesheet" /><script src="/Scripts/jquery_2_1_0_min.js"></script><script type="text/javascript">$(function ($) {$('#chosen-multiple-style').on('click', function (e) {var target = $(e.target).find('input[type=radio]');var which = parseInt(target.val());if (which == 2) $('#form-field-select-4').addClass('tag-input-style');else $('#form-field-select-4').removeClass('tag-input-style');});});</script>
</head><body class="no-skin"><div class="row"><div class="col-xs-12 col-sm-5"><div class="control-group"><label class="control-label bolder blue">Checkbox</label><div class="checkbox"><label><input name="form-field-checkbox" type="checkbox" class="ace" /><span class="lbl"> choice 1</span></label></div><div class="checkbox"><label><input name="form-field-checkbox" class="ace ace-checkbox-2" type="checkbox" /><span class="lbl"> choice 2</span></label></div><div class="checkbox"><label class="block"><input name="form-field-checkbox" disabled="" type="checkbox" class="ace" /><span class="lbl"> disabled</span></label></div></div></div><div class="col-xs-12 col-sm-6"><div class="control-group"><label class="control-label bolder blue">Radio</label><div class="radio"><label><input name="form-field-radio" type="radio" class="ace" /><span class="lbl"> radio option 1</span></label></div><div class="radio"><label><input name="form-field-radio" type="radio" class="ace" /><span class="lbl"> radio option 2</span></label></div><div class="radio"><label><input disabled="" name="form-field-radio" type="radio" class="ace" /><span class="lbl"> disabled</span></label></div></div></div></div><hr /><div class="form-group"><label class="control-label col-xs-12 col-sm-3">开关控制</label><div class="controls col-xs-12 col-sm-9"><div class="row"><div class="col-xs-3"><label><input name="switch-field-1" class="ace ace-switch ace-switch-3" type="checkbox" /><span class="lbl"></span></label></div></div></div></div>
</body>
</html>

　　CheckBox当选中时默认提交的值为"On"，如果选中的CheckBox提交true，则可以增加一个value="true"，可以这样写：

<input name="IsTop" type="checkbox" class="ace" value="true">

六、日期选择控件

　　日期控件主要用DateTime Picker来实现

@{Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head><title>日期选择控件 - Ace Admin</title><link rel="stylesheet" href="/assets/css/bootstrap.min.css" /><link href="/assets/css/font-awesome.min.css" rel="stylesheet" /><link rel="stylesheet" href="/assets/css/datepicker.css" /><link rel="stylesheet" href="/assets/css/bootstrap-timepicker.css" /><link rel="stylesheet" href="/assets/css/daterangepicker.css" /><link rel="stylesheet" href="/assets/css/bootstrap-datetimepicker.css" /><link href="/assets/css/css.css" rel="stylesheet" /><link href="/assets/css/ace.min.css" rel="stylesheet" /><script src="/assets/js/ace-extra.min.js"></script><script src="/Scripts/jquery_2_1_0_min.js"></script><script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script><script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script><script src="/assets/js/date-time/moment.min.js"></script><script src="/assets/js/date-time/daterangepicker.min.js"></script><script src="/assets/js/date-time/bootstrap-datetimepicker.min.js"></script><script type="text/javascript">$(function ($) {$('.date-picker').datepicker({autoclose: true,todayHighlight: true}).next().on(ace.click_event, function () {$(this).prev().focus();});$('.input-daterange').datepicker({ autoclose: true });$('input[name=date-range-picker]').daterangepicker({'applyClass': 'btn-sm btn-success','cancelClass': 'btn-sm btn-default',locale: {applyLabel: 'Apply',cancelLabel: 'Cancel',}}).prev().on(ace.click_event, function () {$(this).next().focus();});$('#timepicker1').timepicker({minuteStep: 1,showSeconds: true,showMeridian: false}).next().on(ace.click_event, function () {$(this).prev().focus();});$('#date-timepicker1').datetimepicker().next().on(ace.click_event, function () {$(this).prev().focus();});});</script></head><body class="no-skin"><div class="col-sm-4"><div class="widget-box"><div class="widget-header"><h4 class="widget-title">日期选择</h4><span class="widget-toolbar"><a href="#" data-action="settings"><i class="ace-icon fa fa-cog"></i></a><a href="#" data-action="reload"><i class="ace-icon fa fa-refresh"></i></a><a href="#" data-action="collapse"><i class="ace-icon fa fa-chevron-up"></i></a><a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a></span></div><div class="widget-body"><div class="widget-main"><label for="id-date-picker-1">日期选择</label><div class="row"><div class="col-xs-8 col-sm-11"><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="fa fa-calendar bigger-110"></i></span></div><div class="input-group">@Html.TextBox("Pick", DateTime.Now.ToString("yyyy-MM-dd"), new { @class = "form-control date-picker", data_date_format = "yyyy-mm-dd" })<span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span></div></div></div><div class="space space-8"></div><label>范围选择</label><div class="row"><div class="col-xs-8 col-sm-11"><div class="input-daterange input-group"><input type="text" class="input-sm form-control" name="start" /><span class="input-group-addon"><i class="fa fa-exchange"></i></span><input type="text" class="input-sm form-control" name="end" /></div></div></div><hr /><label for="id-date-range-picker-1">日期范围选择</label><div class="row"><div class="col-xs-8 col-sm-11"><div class="input-group"><span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span><input class="form-control" type="text" name="date-range-picker" id="id-date-range-picker-1" /></div></div></div><hr /><label for="timepicker1">时间选择</label><div class="input-group bootstrap-timepicker"><input id="timepicker1" type="text" class="form-control" /><span class="input-group-addon"><i class="fa fa-clock-o bigger-110"></i></span></div><hr /><label for="date-timepicker1">日期-时间选择</label><div class="input-group"><input id="date-timepicker1" type="text" class="form-control" /><span class="input-group-addon"><i class="fa fa-clock-o bigger-110"></i></span></div></div></div></div></div>
</body>
</html>

七、上传控件

　　上传控件好像很强大，可以不上传先获取文件名了，具体怎么实现的还不是很清楚。

@{Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head><title>文本上传框 - Ace Admin</title><link rel="stylesheet" href="/assets/css/bootstrap.min.css" /><link href="/assets/css/font-awesome.min.css" rel="stylesheet" /><link href="/assets/css/css.css" rel="stylesheet" /><link rel="stylesheet" href="/assets/css/ace.min.css" /><script src="/assets/js/ace-extra.min.js"></script><script src="/Scripts/jquery_2_1_0_min.js"></script><script src="/assets/js/ace-elements.min.js"></script><script type="text/javascript">$(function ($) {$('#id-input-file-1 , #id-input-file-2').ace_file_input({no_file: '暂无文件 ...',btn_choose: 'Choose',btn_change: 'Change',droppable: false,onchange: null,thumbnail: false});$('#id-input-file-3').ace_file_input({style: 'well',btn_choose: 'Drop files here or click to choose',btn_change: null,no_icon: 'ace-icon fa fa-cloud-upload',droppable: true,thumbnail: 'small',preview_error: function (filename, error_code) {}}).on('change', function () {});$('#id-file-format').removeAttr('checked').on('change', function () {var whitelist_ext, whitelist_mime;var btn_choosevar no_iconif (this.checked) {btn_choose = "Drop images here or click to choose";no_icon = "ace-icon fa fa-picture-o";whitelist_ext = ["jpeg", "jpg", "png", "gif", "bmp"];whitelist_mime = ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"];}else {btn_choose = "Drop files here or click to choose";no_icon = "ace-icon fa fa-cloud-upload";whitelist_ext = null;whitelist_mime = null;}var file_input = $('#id-input-file-3');file_input.ace_file_input('update_settings',{'btn_choose': btn_choose,'no_icon': no_icon,'allowExt': whitelist_ext,'allowMime': whitelist_mime})file_input.ace_file_input('reset_input');file_input.off('file.error.ace').on('file.error.ace', function (e, info) {});});});</script>
</head><body class="no-skin"><div class="widget-box col-xs-6"><div class="widget-header"><h4 class="widget-title">上传文本框</h4><div class="widget-toolbar"><a href="#" data-action="collapse"><i class="ace-icon fa fa-chevron-up"></i></a><a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a></div></div><div class="widget-body"><div class="widget-main"><div class="form-group"><div class="col-xs-12"><input type="file" id="id-input-file-2" /></div></div><div class="form-group"><div class="col-xs-12"><input multiple="" type="file" id="id-input-file-3" /></div></div><label><input type="checkbox" name="file-format" id="id-file-format" class="ace" /><span class="lbl"> 只允许图片</span></label></div></div></div>
</body>
</html>

posted on 2014-11-25 11:10 逆心阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/kissdodog/p/4120508.html

AceAdmin In MVC之控件相关推荐

MVC html 控件扩展【转载】
项目中用到mvc2控件扩展,任务分给了我,开发完了,结果可能要用devexpress,费了不少功夫,网上查找资料,整理成符合项目的,自己留个备份吧,一起学习 DropDownTree 第一个控件是Dr ...
移动界面控件Essential Studio for Mobile MVC网格控件解析
移动界面控件Essential Studio for Mobile MVC是Syncfusion公司旗下一款企业级的用于移动应用开发的界面控件,整个套包中包含了grids.charts.gauges. ...
移动界面控件Essential Studio for Mobile MVC图表控件解析
企业级的用于移动应用开发的界面控件Essential Studio for Mobile MVC中的Essential Chart for Mobile MVC是一款基于HTML 5的高性能且轻量化的 ...
1. mvc 树形控件tree + 表格jqgrid 显示界面
1.界面显示效果 2.资源下载地址 1. jstree https://www.jstree.com/ 2.表格jqgrid https://blog.mn886.net/jqGrid/ ...
MVC分页控件之二，为IQueryable定义一个扩展方法，直接反回PagedListT结果集
namespace Entity { public interface IPagedList { /// <summary> /// 记录数 ...
SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）...
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
MVC3学习第十三章佟掌柜第二弹——MVC3下利用陕北吴旗娃的分页控件实现数据分页...
本章学习内容 1.了解陕北吴旗娃的Mvc分页控件 2.利用分页控件实现MVC3下的商品分页 3.利用分页控件实现MVC3下一个页面多个分页以及ajax分页效果 1.了解陕北吴旗娃的Mvc分页控件在w ...
SNF开发平台WinForm-Grid表格控件大全
我们在开发系统时,会有很多种控件进行展示,甚至有一些为了方便的一些特殊需求. 那么下面就介绍一些我们在表格控件里常用的方便的控件: 1.Grid表格查询条 Grid表格下拉 3.Grid表格弹框选 ...
MVC控件类型-HtmlHelper类
HtmlHelper类位于System.Web.MVC.Html命名空间下.主要包括FormExtensions,InputExtensions, LinkExtensions,SelectExten ...
MVC模式下My97DatePicker日期控件引用注意事项
My97DatePicker日期控件之前在用webform模式开发的时候,只要 <script language="javascript" type="text/j ...