Matrix Admin 后台模板筆記

    一個后台模板用久了就想換一個。上次找到了Matrix Admin.和ACE一樣都是Bootstrap風格，比較容易上手。Matrix要更健壯些。感覺拿去做用戶界面也是可以的。

    整體風格：

    

    1.表單驗證

 

   驗證是借助於jquery.validate.js . 有豐富的驗證方法，更多API請戳這里

   js:

  $("#basic_validate").validate({
        rules:{
            required:{
                required:true
            },
            email:{
                required:true,
                email: true
            },
            password: {
                required: false,
            },
            date:{
                required:true,
                date: true
            },
            url:{
                required:true,
                url: true
            }
        },
        errorClass: "help-inline",
        errorElement: "span",
        highlight:function(element, errorClass, validClass) {
            $(element).parents('.control-group').addClass('error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.control-group').removeClass('error');
            $(element).parents('.control-group').addClass('success');
        }
    });

form元素，這種指定格式非常方便。

$("#mask-phone").mask("[phone]", {completed:function(){alert("Callback action after complete");}});
    $("#mask-phoneExt").mask("[phone]? x99999");
    $("#mask-phoneInt").mask("[phone]");
    $("#mask-date").mask("99/99/9999");
    $("#mask-ssn").mask("999-99-9999");
    $("#mask-productKey").mask("a*-999-a999", { placeholder: "*" });
    $("#mask-eyeScript").mask("~9.99 ~9.99 999");
    $("#mask-percent").mask("99%");

這里整合的是masked.js   讓用戶按照格式輸入。

2.DataTable

ACE用的Jqgrid，比較起來，還是DataTable好用，語法簡單，支持分頁，排序和查詢。jquery.dataTables.min.js --> 更多API

js:

$('.data-table').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<""l>t<"F"fp>'
    });

3 icon 有更豐富的圖標

4.登陸

5.其他

基本樣式用法基本和Bootstrap是一致的，像Tab,Accordion，modal 對話框，Popover ，button 等。

 另外還有圖表，活動日歷以及圖片管理的部分。charts是基於jquery.flot.js ，flot是很強大的。官網有更多用法。日歷是 fullcalendar

定義一個chart

 $.plot($(".chart"),
           [ { data: sin, label: "sin(x)", color: "#ee7951"}, { data: cos, label: "cos(x)",color: "#4fb9f0" } ], {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
               yaxis: { min: -1.6, max: 1.6 }
           });

 

小結：Matrix Admin整合了這些我們熟知的插件，所以用起來上手也快。

下載鏈接是三個包，還有收藏的另外兩個模板，一個是Metro風格的集合。希望大家喜歡

http://pan.baidu.com/s/1bnz2fqJ

 ACE模板