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 = "" });
SelectListItem.Add(new SelectListItem { Text = "关羽", Value = "" });
SelectListItem.Add(new SelectListItem { Text = "张飞", Value = "" });
ViewBag.SelectListItem = SelectListItem;
return View();
}

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

    //模拟数据库查出来的数据
List<Person> ListPerson = new List<Person>()
{
new Person(){ Id = , Name=" " },
new Person(){ Id = , Name="刘备" },
new Person(){ Id = , Name="关羽" },
new Person(){ Id = , 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_choose
var no_icon
if (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>
上一篇:Docker国内镜像source


下一篇:jquery.lazyload用法