一直在苦苦寻找一个合适的前端框架，少说也看了几十个。
其实我的要求也不是太高，只要满足下面的就差不多了：
也看了许多基于bootstrap做出来的，说实际的有一些还是不错的，但是总觉得有这样那样的遗憾或不足，直到有一天看到smartadmin，哇，眼睛一亮，这不就是我想要的么？赶紧去看，越看越喜欢，就是它了。
仔细研究下来，发现他与我要求的匹配度比较接近，但是还是有一些不足在的：
呵呵，想要一个100%满足要求的太难了，这个已经满足95%以上了，有不满足的自己动手丰衣足食吧。
在对其进行重构及完善过程中，还修复了一些BUG。
现在使用起来就方便多了，不必引入js和css及图像文件，字体文件等等，直接进行Pom依赖即可，结合到Tiny框架中，还提供了更容易使用的宏，提供了样式文件合并压缩，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 |
通过封装类似上面的宏，对于界面的编写就更容易了，要会的内容就更少了。 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.图片展示
5.资源压缩及合并情况
从上面可以看到，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获取更多内容。
原文：http://j2eetop.iteye.com/blog/2224180
