介绍一套后台UI-aceadmin

aceadmin是基于bootstrap开发的一套后台ui框架，由外国友人开发的。可以在github上找到它的源代码。

下面一起来看看它的构成。

主页预览

aceadmin预览

列表页 index.html






首页-管理平台




































Toggle sidebar












Ace 管理平台









4





4 Tasks to complete







Software Update
65%











Hardware Upgrade
35%











Unit Testing
15%











Bug Fixes
90%












See tasks with details









8





8 Notifications









New Comments

+12







Bob just signed up as an editor ...








New Orders

+8









Followers

+11








See all notifications









5





5 Messages









Alex:
Ciao sociis natoque penatibus et auctor ...




a moment ago










Susan:
Vestibulum id ligula porta felis euismod ...




20 minutes ago










Bob:
Nullam quis risus eget urna mollis ornare ...




3:15 pm










Kate:
Ciao sociis natoque eget urna mollis ornare ...




1:33 pm










Fred:
Vestibulum id penatibus et auctor  ...




10:09 am









进入收件箱










欢迎你,
Admin









系统设置






个人资料








注销











try{ace.settings.loadState('main-container')}catch(e){}







 首页 









 系统管理 








人员管理








新增人员





















管理平台

首页













jQuery dataTables





Results for "Latest Registered Domains"









ID




Domain
Price
Clicks



Update

Status















app.com

$45
3,330
Feb 12


Expiring







































































Ace
管理平台 © 2016 All Rights Reserved



















if('ontouchstart' in document.documentElement) document.write(""+"<"+" script="">");

































jQuery(function($) {
//initiate dataTables plugin
var myTable =
$('#dynamic-table').DataTable({
"processing": true,
"serverSide": true,
"ajax": "tables.php"

});


$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';

new $.fn.dataTable.Buttons(myTable, {
buttons: \[
{
"extend": "colvis",
"text": " Show/hide columns",
"className": "btn btn-white btn-primary btn-bold",
columns: ':not(:first):not(:last)'
},
{
"extend": "copy",
"text": " Copy to clipboard",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "csv",
"text": " Export to CSV",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "excel",
"text": " Export to Excel",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "pdf",
"text": " Export to PDF",
"className": "btn btn-white btn-primary btn-bold"
},
{
"extend": "print",
"text": " Print",
"className": "btn btn-white btn-primary btn-bold",
autoPrint: false,
message: 'This print was produced using the Print button for DataTables'
}
\]
});
myTable.buttons().container().appendTo($('.tableTools-container'));


myTable.on('select', function (e, dt, type, index) {
if (type === 'row') {
$(myTable.row(index).node()).find('input:checkbox').prop('checked', true);
}
});
myTable.on('deselect', function (e, dt, type, index) {
if (type === 'row') {
$(myTable.row(index).node()).find('input:checkbox').prop('checked', false);
}
});

/////////////////////////////////
//table checkboxes
$('th input\[type=checkbox\], td input\[type=checkbox\]').prop('checked', false);

//select/deselect all rows according to table header checkbox
$('#dynamic-table > thead > tr > th input\[type=checkbox\], #dynamic-table_wrapper input\[type=checkbox\]').eq(0).on('click', function () {
var th_checked = this.checked;//checkbox inside "TH" table header

$('#dynamic-table').find('tbody > tr').each(function () {
var row = this;
if (th_checked) myTable.row(row).select();
else  myTable.row(row).deselect();
});
});

//select/deselect a row when the checkbox is checked/unchecked
$('#dynamic-table').on('click', 'td input\[type=checkbox\]', function () {
var row = $(this).closest('tr').get(0);
if (this.checked) myTable.row(row).deselect();
else myTable.row(row).select();
});


$(document).on('click', '#dynamic-table .dropdown-toggle', function (e) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
});

})

表单页form.html

    
    
        
            
            
        新增人员-管理平台    
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
        
            
                
                    
                    Toggle sidebar    
                        
                        
                        
                    
                    
                        
                            
                                
                            Ace 管理平台    
                            
                        
                    
                    
                        
                            
                                
                                    
                                4    
                                
                                
                                    
                                        
                                    4 Tasks to complete    
                                    
                                    
                                        
                                            
                                                
                                                    
                                                    Software Update    
                                                    65%    
                                                    
                                                    
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                    Hardware Upgrade    
                                                    35%    
                                                    
                                                    
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                    Unit Testing    
                                                    15%    
                                                    
                                                    
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                    Bug Fixes    
                                                    90%    
                                                    
                                                    
                                                        
                                                    
                                                
                                            
                                        
                                    
                                    
                                        
                                        See tasks with details    
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                8    
                                
                                
                                    
                                        
                                    8 Notifications    
                                    
                                    
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                        New Comments    
                                                        
                                                    +12    
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                Bob just signed up as an editor ...    
                                                
                                            
                                            
                                                
                                                    
                                                        
                                                            
                                                        New Orders    
                                                        
                                                    +8    
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                        
                                                            
                                                        Followers    
                                                        
                                                    +11    
                                                    
                                                
                                            
                                        
                                    
                                    
                                        
                                        See all notifications    
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                5    
                                
                                
                                    
                                        
                                    5 Messages    
                                    
                                    
                                        
                                            
                                                
                                                    
                                                    
                                                        
                                                        Alex:    
                                                        Ciao sociis natoque penatibus et auctor ...    
                                                        
                                                        
                                                            
                                                        a moment ago    
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                    
                                                        
                                                        Susan:    
                                                        Vestibulum id ligula porta felis euismod ...    
                                                        
                                                        
                                                            
                                                        20 minutes ago    
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                    
                                                        
                                                        Bob:    
                                                        Nullam quis risus eget urna mollis ornare ...    
                                                        
                                                        
                                                            
                                                        3:15 pm    
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                    
                                                        
                                                        Kate:    
                                                        Ciao sociis natoque eget urna mollis ornare ...    
                                                        
                                                        
                                                            
                                                        1:33 pm    
                                                        
                                                    
                                                
                                            
                                            
                                                
                                                    
                                                    
                                                        
                                                        Fred:    
                                                        Vestibulum id penatibus et auctor  ...    
                                                        
                                                        
                                                            
                                                        10:09 am    
                                                        
                                                    
                                                
                                            
                                        
                                    
                                    
                                        
                                        进入收件箱    
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                    
                                    欢迎你,    
                                    Admin    
                                    
                                    
                                
                                
                                    
                                        
                                            
                                        系统设置    
                                        
                                    
                                    
                                        
                                            
                                        个人资料    
                                        
                                    
                                    
                                    
                                        
                                            
                                        注销    
                                        
                                    
                                
                            
                        
                    
                
            
            
                
                try{ace.settings.loadState('main-container')}catch(e){}    
                
                
                    
                        
                            
                                
                             首页     
                            
                            
                        
                        
                            
                                
                             系统管理     
                                
                            
                            
                            
                                
                                    
                                        
                                    人员管理    
                                    
                                    
                                
                                
                                    
                                        
                                    新增人员    
                                    
                                    
                                
                            
                        
                    
                    
                        
                    
                
                
                    
                        
                            
                                
                                    
                                系统管理    
                                
                            新增人员    
                            
                        
                        
                            
                                
                                    
                                    
                                        
                                         Text Field     
                                            
                                                
                                                    
                                                
                                            
                                        
                                        
                                         Full Length     
                                            
                                                
                                            
                                        
                                        
                                        
                                         Password Field     
                                            
                                                
                                                
                                                Inline help text    
                                                
                                            
                                        
                                        
                                        
                                         Readonly field     
                                            
                                                
                                                
                                                    
                                                        
                                                     Disable it!    
                                                    
                                                
                                            
                                        
                                        
                                        
                                        Relative Sizing    
                                            
                                                
                                                
                                                
                                            
                                        
                                        
                                        Grid Sizing    
                                            
                                                
                                                    
                                                
                                                
                                                
                                            
                                        
                                        
                                        Input with Icon    
                                            
                                                
                                                    
                                                    
                                                
                                                
                                                    
                                                    
                                                
                                            
                                        
                                        
                                        
                                        Tooltip and help button    
                                            
                                                
                                            ?    
                                            
                                        
                                        
                                        
                                        Tag input    
                                            
                                                
                                                    
                                                
                                            
                                        
                                        
                                            
                                                
                                                    
                                                Submit    
                                                
                                                     
                                                
                                                    
                                                Reset    
                                                
                                            
                                        
                                    
                                    
                                
                            
                        
                    
                
                
                    
                        
                            
                            Ace    
                            管理平台 © 2016 All Rights Reserved    
                            
                        
                    
                
                
                    
                
            
            
            
            
            
            
            
            if('ontouchstart' in document.documentElement) document.write(""+"<"+" script="">");    
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            function validF(){    
                if(!$('#validation-form').valid()){    
                }    
            }    
            jQuery(function($) {    
            $.mask.definitions\['~'\]='\[+-\]';    
            $('#phone').mask('(999) 999-9999');    
            jQuery.validator.addMethod("phone", function (value, element) {    
                return this.optional(element) || /^(d{3}) d{3}-d{4}( xd{1,6})?$/.test(value);    
            }, "Enter a valid phone number.");    
            $('#validation-form').validate({    
                errorElement: 'div',    
                errorClass: 'help-block',    
                focusInvalid: false,    
                ignore: "",    
                rules: {    
                    email: {    
                        required: true,    
                        email:true    
                    },    
                    password: {    
                        required: true,    
                        minlength: 5    
                    },    
                    password2: {    
                        required: true,    
                        minlength: 5,    
                        equalTo: "#password"    
                    },    
                    username: {    
                        required: true    
                    },    
                    phone: {    
                        required: true,    
                        phone: 'required'    
                    },    
                    url: {    
                        required: true,    
                        url: true    
                    },    
                    comment: {    
                        required: true    
                    },    
                    state: {    
                        required: true    
                    },    
                    platform: {    
                        required: true    
                    },    
                    subscription: {    
                        required: true    
                    },    
                    gender: {    
                        required: true,    
                    },    
                    agree: {    
                        required: true,    
                    }    
                },    
                messages: {    
                    email: {    
                        required: "Please provide a valid email.",    
                        email: "Please provide a valid email."    
                    },    
                    password: {    
                        required: "Please specify a password.",    
                        minlength: "Please specify a secure password."    
                    },    
                    state: "Please choose state",    
                    subscription: "Please choose at least one option",    
                    gender: "Please choose gender",    
                    agree: "Please accept our policy"    
                },    
                highlight: function (e) {    
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');    
                },    
                success: function (e) {    
                    $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');    
                    $(e).remove();    
                },    
                errorPlacement: function (error, element) {    
                    if(element.is('input\[type=checkbox\]') || element.is('input\[type=radio\]')) {    
                        var controls = element.closest('div\[class*="col-"\]');    
                        if(controls.find(':checkbox,:radio').length > 1) controls.append(error);    
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));    
                    }    
                    else if(element.is('.select2')) {    
                        error.insertAfter(element.siblings('\[class*="select2-container"\]:eq(0)'));    
                    }    
                    else if(element.is('.chosen-select')) {    
                        error.insertAfter(element.siblings('\[class*="chosen-container"\]:eq(0)'));    
                    }    
                    else error.insertAfter(element.parent());    
                },    
                submitHandler: function (form) {    
                },    
                invalidHandler: function (form) {    
                }    
            });    
        })

表单页预览