• TinyAdmin前端展现框架


    一直在苦苦寻找一个合适的前端框架,少说也看了几十个。


    • ext太重。并且有内存泄露,在IE下就是个悲剧。
    • dhtmlx,速度比較好,开源是GPL不适合企业应用,商业的要钱,倒也不贵万把块钱,可是样式比較接近于传统管理台应用,另外一个弊端是比較小众
    • Dojo。事实上架构比較好,可是比較小众
    • Semantic:很好的一个框架,可是成熟度不太好。对IE支持尤其比較差,另外比較小众
    • easyui:相对来说。也是一个不错的框架了。可是样式有点接近ext。也存在内存泄露
    • wijmo:很完好的前端框架。可是比較小众,对IE8兼容方面有些问题
    • kendoui:也是很不错的前端框架,比較小众,后台应用开发包要收费
    • jqueryui:很不错的前端框架,应用面够广,可是组件相对少一些
    • JQuery:本身仅仅是个基础库,当然有很多的插件,可是不同插件之间的样式啥的不太一致。自己去整合费效比較差
    • Bootstrap,不错的框架,组件相当来说少一点
    • ......还有很多知名不知名的前端框架,可是比較可用的。真的很难找
    事实上我的要求也不是太高。仅仅要满足以下的就差点儿相同了:
    • 组件丰富些。自己不加入也足够用
    • 兼容性好一点,最好IE8以上都能兼容的
    • 改动easy点,我想要就要。不想要就不要
    • 扩展方便点,我想添加就能添加,我想改动就能改动
    • 性能能好点,即使在老旧如IE8,操作系统为XP的环境也。能够跑出不错的速度来。
    • 内存回收能回一点,内存出现泄露。也能够可是能够简单一个刷新就比較彻底的回收掉,也是能够接受的。

    • 界面好看点。让人最好能眼前一亮。再看。更亮的效果。
    • 最好是免费的,假设不免费,费用要尽量低的,最好3、5$能够搞定,再不行几十$也能够接受
    • 最好能支持更换皮肤啥的
    • 最好能支持窗体小组件,能够由客户进行位置调整啥的
    • 最好支持流式布局
    也看了很多基于bootstrap做出来的。说实际的有一些还是不错的。可是总认为有这样那样的遗憾或不足,直到有一天看到smartadmin,哇。眼睛一亮。这不就是我想要的么?赶紧去看,越看越喜欢,就是它了。
    细致研究下来。发现他与我要求的匹配度比較接近。可是还是有一些不足在的:
    • JS及CSS文件众多,稍有不慎就会出现错误,从而导致无法展示
    • 对于IE8兼容性不太好,在IE8下无法使用
    • 对皮肤啥的改动过之后。不能保存,下次进来的时候,还要又一次设过
    • 全是E文的,用起来上手慢一点
    呵呵。想要一个100%满足要求的太难了,这个已经满足95%以上了,有不满足的自己动手丰衣足食吧。
    • 对于问题1:进行组件化,对这些CSS,JS文件进行分别治理,这个工作量很大,并且要胆大心细,这里消耗N多脑细胞,最终搞定了。

    • 对于问题2:主要是CSS及JS兼容性相关的问题,这个已经超出本人能力范围,没得办法,找一外援搞定之。
    • 对于问题3:这个相对于上面两个问题SoEasy,轻松搞定了。

      2014/11/1 发表博文 - 悠悠然然的个人页面 - 开源中国社区

    • 对于问题4:汉化之,更方便国人使用
    在对其进行重构及完好过程中。还修复了一些BUG。


    如今使用起来就方便多了,不必引入js和css及图像文件。字体文件等等,直接进行Pom依赖就可以,结合到Tiny框架中,还提供了更easy使用的宏,提供了样式文件合并压缩,JS文件压缩合并,做前端的小朋友们的好日子来了。
    1.UI组件包抽取 ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    org.tinygroup.calendar
    org.tinygroup.jquery
    org.tinygroup.bootstrap
    org.tinygroup.bootstrapWizard
    org.tinygroup.ckeditor
    org.tinygroup.colorhelpers
    org.tinygroup.colorpicker
    org.tinygroup.component
    org.tinygroup.datatables
    org.tinygroup.delete-table-row
    org.tinygroup.dropzone
    org.tinygroup.easyPieChart
    org.tinygroup.excanvas
    org.tinygroup.fastclick
    org.tinygroup.flot
    org.tinygroup.FontAwesome
    org.tinygroup.fueluxwizard
    org.tinygroup.fullcalendar
    org.tinygroup.ie-placeholder
    org.tinygroup.ion-slider
    org.tinygroup.jquery-form
    org.tinygroup.jquery-nestable
    org.tinygroup.jquery-touch
    org.tinygroup.jstorage
    org.tinygroup.js-migrate
    org.tinygroup.knob
    org.tinygroup.markdown
    org.tinygroup.maskedInput
    org.tinygroup.maxlength
    org.tinygroup.morris
    org.tinygroup.msieFix
    org.tinygroup.multiselect
    org.tinygroup.notification
    org.tinygroup.noUiSlider
    org.tinygroup.pace
    org.tinygroup.prettify
    org.tinygroup.raphael
    org.tinygroup.select2
    org.tinygroup.selectToUISlider
    org.tinygroup.smartadmin-new
    org.tinygroup.smartwidgets
    org.tinygroup.sparkline
    org.tinygroup.summernote
    org.tinygroup.superbox
    org.tinygroup.throttle-denounce
    org.tinygroup.typeahead
    org.tinygroup.vectormap
    org.tinygroup.x-editable
    org.tinygroup.jqueryvalidate
    org.tinygroup.smartadmin
    org.tinygroup.jqgrid
    org.tinygroup.jqueryform
    org.tinygroup.jquerystorage


    SmartAdmin用到的Jquery插件真多。

    2.UI组件宏封装 ?


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #macro(jui_hrefButton $id $caption $construct)
    < a id="$id" href="#">$caption</a>
    < script>
    $(function() {
        $( "#$id").button($!construct);
    });
    < /script>
    #end

    #macro(jui_radio $id $groupId $caption)
    < input type="radio" id="$id" name="$groupId" /><label for="$id">$caption</label>
    #end


    通过封装类似上面的宏,对于界面的编写就更easy了,要会的内容就更少了。

    3.界面编写 ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #@juiTab("tabs")
    #@juiTabHeader()
    #@juiTabHeaderItem("tabs-a")标签1#end
    #@juiTabHeaderItem("tabs-b")标签2#end
    #@juiTabHeaderItem("tabs-c")标签3#end
    #end
     
    #@juiTabContentItem("tabs-a")
    <p>此前,李克强和梅德韦杰夫共同主持了中俄总理第十九次定期会晤。会晤后,两国总理签署联合公报,并见证经贸、投资、能源、金融等领域近40项关键文件的签署。

    </p>
    #end
     
    #@juiTabContentItem("tabs-b")
    <p>李克强是在和俄罗斯总理梅德韦杰夫共同会见记者时提到“套娃”的。这是一种俄罗斯特产的木制玩具,由多个一样图案的空心木娃娃一个套一个组成,最多可达十多个。</p>
    #end
     
    #@juiTabContentItem("tabs-c")
    <p>中国总理回顾起在农村生活的经历。

    “我年轻时在中国农村生活多年,亲身经历过吃不饱饭的艰难岁月。

    ”李克强说。吃一顿饱饭可能非常快就会忘记,但饥饿留下的印象永生难忘。</p>
    #end
    #end



    如今能够通过模板语言来写界面了。哦也  写出来的效果是怎么样的呢?
    4.图片展示 

    232258_pXjv_1245989.jpg (68.05 KB, 下载次数: 0)

    下载附件

    3 秒前 上传

    232446_NFwu_1245989.jpg (47.88 KB, 下载次数: 0)

    下载附件

    3 秒前 上传


    232601_U2Vb_1245989.jpg (58.19 KB, 下载次数: 0)

    下载附件

    3 秒前 上传


    5.资源压缩及合并情况

    233207_5nV3_1245989.jpg (23.69 KB, 下载次数: 0)

    下载附件

    3 秒前 上传


    233218_vF97_1245989.jpg (17.17 KB, 下载次数: 0)

    下载附件

    3 秒前 上传


    从上面能够看到。CSS文件已经被全然合并为一个,而JS,则除了应用相关的一个之外,也所有被压缩为1个,实际使用体验,採用Tiny框架的载入效率及总体使用流畅度比原生的要好不少。


    5.实际试用 再多的图也没有实际体验来得更有切身感受,喜欢的请猛点以下的链接
    http://www.tinygroup.org/tinyadmin/[url=http://my.oschina.net/tinyframework/admin/%E2%80%8Bhttp://www.tinygroup.org/tinyadmin/%E2%80%8B][/url]
    也能够訪问  www.tinygroup.org获取很多其它内容。


  • 相关阅读:
    MySQL主从复制报错 Errno 1205
    MySQL添加索引优化SQL
    MySQL通过添加索引解决线上数据库服务器压力大问题
    手把手教你搭建MySQL双主MM+keepalived高可用架构
    SQLSERVER 维护计划无法删除
    Form表单中Post与Get方法的区别
    ASP.NET MVC中常用的ActionResult类型
    Web安全相关(五):SQL注入(SQL Injection)
    Web安全相关(四):过多发布(Over Posting)
    Web安全相关(三):开放重定向(Open Redirection)
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/7099994.html
Copyright © 2020-2023  润新知