码迷，mamicode.com
首页 > Web开发 > 详细

AceAdmin In MVC之控件

时间：2015-05-30 19:37:21      阅读：124      评论：0      收藏：0      [点我收藏+]

标签：

 

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_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>

AceAdmin In MVC之控件

标签：

原文地址：http://www.cnblogs.com/feng-NET/p/4540748.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！