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)

mod=attachment&aid=Njg0fGQ4MWE3ZDE4fDE0MzU5MzEzMDh8Mnw1MzA%3D&nothumb=yes" target="_blank">下载附件

3 秒前 上传

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

下载附件

3 秒前 上传

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

mod=attachment&aid=Njg2fDNiZmZkMDM3fDE0MzU5MzEzMDh8Mnw1MzA%3D&nothumb=yes" target="_blank">下载附件

3 秒前 上传

5.资源压缩及合并情况

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

mod=attachment&aid=Njg3fDE4ZTRiMTQyfDE0MzU5MzEzMDh8Mnw1MzA%3D&nothumb=yes" target="_blank">下载附件

3 秒前 上传

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

mod=attachment&aid=Njg4fDUxOWJkZTE4fDE0MzU5MzEzMDh8Mnw1MzA%3D&nothumb=yes" target="_blank">下载附件

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获取很多其它内容。