后台UI模板开发规范

标签：

AdminLTE模板

在接触新模板之前，需要对bootstrap有初步了解，文档戳这里  主要是了解有哪些控件、样式、元素 可以直接follow使用（形成需要什么的时候直接去查文档的意识，而不是都自己创造）。 AdminLTE是基于bs 搭建的前端样式框架，完全遵循bs的前端规范。

AdminLTE有完善的Demo及文档说明，已部署到本地，戳这里。另外在新版的后台中也附带了链接

小图标

AdminLTE采用fonticon来作为默认的小图标，默认的FontIcon库（字体图标，这种方式的图标其实是字体，因此可以用css控制颜色，大小，甚至加动画，比单纯使用图片的方式更加灵活可控，是目前前端流行技术之一。），请参看Demo文档戳这里。模板附带了两套FontIcon，用法分别如下：

1. font awesome字体
   

   <i class="fa fa-dashboard"></i> 前面的fa是固定的 后面的是对应的图标

2. glyphicons
   

   <i class="glyphicon glyphicon-adjust"></i>

    

标准文档结构

1. 页头部分
   

   一个页面有3个Title，分别是html head里的title、文档结构正文中的大标题和副标题。针对Razor，需要在页面上对以下三个参数赋值：

   
   

   (1) ViewBag.Title => 页面大标题， （请设置）

   
   

   (2) ViewBag.PageTitle => 显示在页面里的标题 （请设置）

   
   

   (3) VIewBag.SubTitle => 显示在页面里的小标题 （可不设）

1. 菜单部分
   

   左侧的菜单经过修改之后，添加了小图标，在api设置页可以设置特定的小图标，一定是模板附带的font icon。 还有一个菜单是右上的面包屑菜单，这个菜单整体是个ul，请使用razor语法：

   
   

   @section headernav{	//section是Razor 预定义节，这里headernav被声明为必须
   
   <li><a href="#">Charts</a></li>
   
   <li class="active">ChartJS</li>
   
   }

   
   

   ATT:这部分等空了再改成配置，前期请自行添加!!!

1. 正文
   

   这里的正文指的是html文档结构右边的正文部分，在模板里必须是在div.content底下（bootstrap标准， 也可以采用其他允许的class，详细参考BootStrap 格栅系统），下面以一个标准的表格页面作为例子：

<section class="content">  //正文定义
    <div class="row">      //bs格栅 定义一个行
        <div class="col-xs-12">   //bs格栅 定义一个12格占位的列
            <div class="box box-default">    //模板控件 BOX，详见下面的说明
                <div class="box-header with-border">
                    <h3 class="box-title">搜索条件</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-tooltip="tooltip" title="隐藏" data-widget="collapse"><i class="fa fa-minus"></i></button>   // 这个box附带隐藏按钮
                    </div><!-- /.box-tools -->
                </div><!-- /.box-header -->
                <div class="box-body">
                    <div class="form-inline">  //form-inline 定义一行多列的表单
                        <div class="form-group">  //form-group 定义div内元素为一个行组
                            <block>
                                <label for="userId">客户编号:</label>
                                <input id="userId" type="text" style="width:90px;" placeholder="客户编号" />
                            </block>
                        </div>                       
                        <button class="btn btn-info btn-flat btn-sm" id="search">搜索</button>
                    </div>
                </div><!-- /.box-body -->
            </div>
            <!-- /.box -->

            <div class="box">    
                <div class="box-header">
                    <h3 class="box-title">数据</h3>
                </div><!-- /.box-header -->
                <div class="box-body">
                    <table id="example2" class="table table-bordered table-hover">  //定义表格
                       。。。。
                    </table>
                </div><!-- /.box-body -->
                <div id="processingIndicator" class="overlay" style="display:none"> //一个loading层， 见下面的说明
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
            </div><!-- /.box -->
        </div>
    </div>
</section>

上面的例子中使用了一些特殊的组件：

（1） Box， Box作为AdminLTE模板附带的块组件，是最常用的排版组建，应该作为基础牢记，Box有多种样式及用法（原文档）。 我们的页面结构里，content里一定是以Box为基础的！

（2）Loading组件， 模板中提供了非常方便的Loading使用方式，只要在Box的body块之下添加一段loading html即可，html见上面的代码，如果要控制loading显示隐藏，请使用js配合处理

DataTable.js （表格控件）

官方文档，请戳这里,可能需要FQ，实在翻不出去，找Gondar吧 - -!

这里只讲最常见的通用用法，直接上代码

var srtable = $(‘#example2‘).on(‘processing.dt‘, function (e, settings, processing) {
                //自定义loading，就是控制上面提到的loading html组件 这段照抄就好
                $(‘#processingIndicator‘).css(‘display‘, processing ? ‘block‘ : ‘none‘);
            }).DataTable({ //开始声明Table
                processing: false,//禁掉原生的loading，你也可以扔掉上面的代码用这个
                paging: true, //是否分页，要是！
                serverSide: true,//是否服务器端处理数据，要是！ 否则分页、排序之类会针对本地数据缓存
                ajax: {  //和jquery ajax一样
                    url: ‘@Url.Action("GetCustomerList")‘,
                    type: ‘POST‘,
                    data: function (d) {
                        return $.extend({}, d, {
                            //自定义参数， 此处非常要注意，d是 datatable的默认ajax参数，最好带着吧，除非你真的不需要。 采用jquery 复制函数来扩展自定义参数~！
                            "UserId": $(‘#userId‘).val(),                            
                        });
                    }
                },
                columns: [
                    { data: ‘UserId‘ },//列的映射， datatable的好用之处是，他会记录下完整的后台json数据，即使列不显示，数据还是在的，至于如何取一会讲。
                    。。。
                ],
                columnDefs: [
                    { "render": function ( data, type, row ) {
                    return ‘<a target="_blank" href="http://www.@CurrentShareDomain/hpsc/hpfcl-‘ + row.ID +‘.html">查看</a>‘
                }, "targets": 4 }    //列定义 这里扩展了一个操作列，用来查看，注意看 row就是一行的元数据，是个JSON
                ],
                "lengthChange": true,//每页大小
                "searching": true,//搜索
                "ordering": true,//排序
                "info": true,//？
                "autoWidth":true,//自动列宽， 这里顺带提一提，列多的时候thead的字体可以设置小一些
                sDom: ‘lrtip‘//dom结构 该语句 隐藏filter搜索条 我们这默认搜索应该不需要，有些页面只有一个搜索条，那直接使用这个 删掉这句话
            });

            //这里开始最强大的交互部分，注意一定on去挂一个事件委托，否则因为html是动态的 事件要丢的，而on是基于事件冒泡，遍历了当前元素的委托而响应的。
            $(‘#example2‘).on(‘click‘, ‘tr‘, function (event) {
                var data = srtable.row(this).data();//看行数据就是这么取到的！！！ 这句话一定要记住啊！！！千万！！
                if (data != null && data.UserId != null && data.UserId > 0) {
                    //跳转
                    window.location = ‘@Url.Action("userdetail")?userid=‘ + data.UserId;
                }

            }).on(‘dblclick‘, ‘td‘, function (event) {
                //$(this).css(‘background‘, ‘#000‘);
            });

由于DataTable的ajax参数众多，因此我封装了部分参数，如果没有封装进去，而需要使用的请找Gondar！

对DataTable Request的参数，封装成了JQDataTableModel类，使用时先集成此类，然后再Action参数处，声明自定义Bind

例如：

[ModelBinder(typeof(JQTBinder))]UserListJQTModel viewModel  // 这里需要特别注意的是SortColumn参数，对应的是列序号

Response参数， 封装成了JQDataTableResponse， 使用如下

var response = new JQDataTableResponse<OpUserDetail>
            {
                recordsTotal = (int)total,
                recordsFiltered = (int)total,
                data = data.ToList(),
                draw = viewModel.Draw
            };
            return response.ToJsonResult();

日期范围选择控件

在模板里看到这个控件，文档戳这

组建依赖 moment.js 文档戳这

$(‘#daterange-btn‘).daterangepicker(
                {
                    ranges: { //声明快速选择按钮
                        ‘今天‘: [moment(), moment().add(1, ‘days‘)],
                        ‘昨天‘: [moment().subtract(1, ‘days‘), moment()],
                        ‘最近7天‘: [moment().subtract(6, ‘days‘), moment()],
                        ‘最近30天‘: [moment().subtract(29, ‘days‘), moment()],
                        ‘本月‘: [moment().startOf(‘month‘), moment().endOf(‘month‘)],
                        ‘上月‘: [moment().subtract(1, ‘month‘).startOf(‘month‘), moment().subtract(1, ‘month‘).endOf(‘month‘)]
                    },
                    startDate: moment().subtract(29, ‘days‘),
                    endDate: moment()
                },
        function (start, end) {//应用按钮的响应事件，这里格式化
            $(‘#startDate‘).html(start.format(‘YYYY-MM-DD‘));
            $(‘#endDate‘).html(end.format(‘YYYY-MM-DD HH:mm:ss‘))
        }
        );

Messenger提示框

文档

这里只说明最简单的用法，已集成到模板，使用页面直接调用如下代码

$.message = {
            error: function (msg) {
                Messenger().post({ message: msg, type: "error", hideAfter: 5, showCloseButton: true });
            },
            info: function (msg) {
                Messenger().post({ message: msg, type: "info", hideAfter: 5, showCloseButton: true });
            },
            success: function (msg) {
                Messenger().post({ message: msg, type: "success", hideAfter: 5, showCloseButton: true });
            }};

//上面的代码已写到模板页，调用页调用如下:
$.message.error(‘保存失败！‘);

ArtDialog(弹出框)

这个组建提供了丰富的弹出功能，我们这里使用alter、confirm这些功能， 文档在这里

$.message = {
confirm: function (msg, okf, canf) {                
                var d = dialog({
                    title: ‘提示‘,
                    content: msg,
                    okValue: ‘确定‘,
                    ok: function () {
                        if (okf != null)
                            okf();
                    },
                    cancelValue: ‘取消‘,
                    cancel: function () {
                        if (canf != null)
                            canf();
                    },
                    width: ‘20em‘
                });
                d.show();
            }
}
//以上代码同样写到模板页了，调用如下:
$.meesage.confirm(‘确认删除？‘,function(){
//...删除
});

Tab

Tab控件是模板自带的，使用上非常简单，只要定义如下的Html结构：（具体的参考CRM-用户详情页）

 <ul class="nav nav-tabs ui-sortable-handle"> // Nav导航 其中active指的是当前激活的tab， 默认应该填上一个
                <li class="active"><a href="#company-info" data-toggle="tab" aria-expanded="true">公司信息</a></li>
                <li class=""><a href="#buyerdemands" data-toggle="tab">发布的货盘</a></li>
    </ul>
            <div class="tab-content no-padding"> //文档内容
                <!-- Morris chart - Sales -->
                <div class="box box-solid tab-pane active" id="company-info" style="position: relative; height: 600px;">
                    <div class="box-body">
                          // 看这里又实用了Box组件 
                    </div>
                    <div class="overlay">
                        <i class="fa fa-refresh fa-spin"></i>
                    </div>
                </div>

                
              </div>

复杂表单弹出（Modal）

这个Modal是bootstrap自带的弹出框，术语模态框。 用于弹出显示复杂的自定义的html内容， 完整的api请见文档

这里不贴Html代码了，只讲用法，代码见CRM-用户详情.

$(‘#md-visit-record .modal-title‘).text(‘添加访问记录‘);//修改title
  $(‘#md-visit-record‘).modal(‘show‘);//弹窗

Modal其实也可以用来做为ArtDialog的功能，只不过比较不同样，所以和argDialog的使用场合，请大家自行区别！

其他组件

模板里附带了很多控件，尤其是在DashBoard页面，大家自行参考，有需要统一说明的可以找Gondar一起。我们使用控件的原则是，简单，方便，不与模板冲突。最重要的是方便大家开发。

MVVM

关于MVVM，我建议大家自行学习，这对前端的建模和写法有很大的启发，传统的依赖Jquery的写法在大型数据交互的情景下，效率非常差，代码可维护性也非常低！这部分下次再详细写。参考Knockoutjs.

后台UI模板开发规范

标签：

原文地址：http://www.cnblogs.com/donchen/p/4744186.html