文档章节

TinyAdmin前端展现框架

悠悠然然
 悠悠然然
发布于 2014/11/01 23:28
字数 1656
阅读 11470
收藏 228
点赞 21
评论 77
一直在苦苦寻找一个合适的前端框架,少说也看了几十个。
  1. ext太重,而且有内存泄露,在IE下就是个悲剧。
  2. dhtmlx,速度比较好,开源是GPL不适合企业应用,商业的要钱,倒也不贵万把块钱,但是样式比较接近于传统管理台应用,另外一个弊端是比较小众
  3. Dojo,其实架构比较好,但是比较小众
  4. Semantic:非常好的一个框架,但是成熟度不太好,对IE支持尤其比较差,另外比较小众
  5. easyui:相对来说,也是一个不错的框架了,但是样式有点接近ext,也存在内存泄露
  6. wijmo:非常完善的前端框架,但是比较小众,对IE8兼容方面有些问题
  7. kendoui:也是非常不错的前端框架,比较小众,后台应用开发包要收费
  8. jqueryui:非常不错的前端框架,应用面够广,但是组件相对少一些
  9. JQuery:本身只是个基础库,当然有许多的插件,但是不同插件之间的样式啥的不太一致,自己去整合费效比较差
  10. Bootstrap,不错的框架,组件相当来说少一点
  11. ......还有许多知名不知名的前端框架,但是比较可用的,真的很难找
其实我的要求也不是太高,只要满足下面的就差不多了:
  1. 组件丰富些,自己不添加也足够用
  2. 兼容性好一点,最好IE8以上都能兼容的
  3. 修改容易点,我想要就要,不想要就不要
  4. 扩展方便点,我想增加就能增加,我想修改就能修改
  5. 性能能好点,即使在老旧如IE8,操作系统为XP的环境也,可以跑出不错的速度来。
  6. 内存回收能回一点,内存出现泄露,也可以但是可以简单一个刷新就比较彻底的回收掉,也是可以接受的。
  7. 界面好看点,让人最好能眼前一亮,再看,更亮的效果。
  8. 最好是免费的,如果不免费,费用要尽量低的,最好3、5$可以搞定,再不行几十$也可以接受
  9. 最好能支持更换皮肤啥的
  10. 最好能支持窗口小组件,可以由客户进行位置调整啥的
  11. 最好支持流式布局
也看了许多基于bootstrap做出来的,说实际的有一些还是不错的,但是总觉得有这样那样的遗憾或不足,直到有一天看到smartadmin,哇,眼睛一亮,这不就是我想要的么?赶紧去看,越看越喜欢,就是它了。
仔细研究下来,发现他与我要求的匹配度比较接近,但是还是有一些不足在的:
  1. JS及CSS文件众多,稍有不慎就会出现错误,从而导致无法展示
  2. 对于IE8兼容性不太好,在IE8下无法使用
  3. 对皮肤啥的修改过之后,不能保存,下次进来的时候,还要重新设过
  4. 全是E文的,用起来上手慢一点
呵呵,想要一个100%满足要求的太难了,这个已经满足95%以上了,有不满足的自己动手丰衣足食吧。
  • 对于问题1:进行组件化,对这些CSS,JS文件进行分别治理,这个工作量非常大,而且要胆大心细,这里消耗N多脑细胞,终于搞定了。
  • 对于问题2:主要是CSS及JS兼容性相关的问题,这个已经超出本人能力范围,没得办法,找一外援搞定之。
  • 对于问题3:这个相对于上面两个问题SoEasy,轻松搞定了。2014/11/1 发表博文 - 悠悠然然的个人页面 - 开源中国社区
  • 对于问题4:汉化之,更方便国人使用
在对其进行重构及完善过程中,还修复了一些BUG。

现在使用起来就方便多了,不必引入js和css及图像文件,字体文件等等,直接进行Pom依赖即可,结合到Tiny框架中,还提供了更容易使用的宏,提供了样式文件合并压缩,JS文件压缩合并,做前端的小朋友们的好日子来了。

1.UI组件包抽取

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组件宏封装

#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.界面编写

#@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/

也可以访问 www.tinygroup.org获取更多内容。


© 著作权归作者所有

共有 人打赏支持
悠悠然然

悠悠然然

粉丝 2365
博文 173
码字总数 360373
作品 14
杭州
架构师
加载中

评论(77)

悠悠然然
悠悠然然

引用来自“许雷神”的评论

真心感谢楼主大大。。。

http://www.tinygroup.org/tinyuiweb/,这个更强大
许雷神
许雷神
真心感谢楼主大大。。。
小白小霸王
小白小霸王
metronic
悠悠然然
悠悠然然

引用来自“alex_xia2014”的评论

貌似SmartAdmin和jquery ui,ext,Bootstrap之类的不是一类东西吧,SmartAdmin只不过是基于Bootstrap的后台管理模板而已。
厉害,确实你看得比较深入哦。 从前面的展现框架来说,与SmartAdmin等还是比较类似的,但是从底层实现方面那就完全不是一个东西了。
c
cloudgoon
貌似SmartAdmin和jquery ui,ext,Bootstrap之类的不是一类东西吧,SmartAdmin只不过是基于Bootstrap的后台管理模板而已。
悠悠然然
悠悠然然

引用来自“淘醒迷乐”的评论

有下载的地址吗

有,加群或访问bbs.tinygroup.org
淘醒迷乐
淘醒迷乐
有下载的地址吗
悠悠然然
悠悠然然

引用来自“xingmu”的评论

也求个下载的地方?一定要和TINY系列一块使用嘛?

加入tiny群问问看吧
xingmu
xingmu
也求个下载的地方?一定要和TINY系列一块使用嘛?
mlovewt
mlovewt
是否有下载呀?学习一下13
Tiny 前端展现框架--TinyUiEnterprise

以前发表过一篇文章:TinyAdmin前端展现框架,其在线演示路径为:http://www.tinygroup.org/tinyadmin/,应该说有许多人还是感觉兴趣的,但是由于这个是基于SmartAdmin框架改写的,虽然我们自...

悠悠然然 ⋅ 2015/07/01 ⋅ 13

Tiny前端展现框架开源了~~~

以前发表过一篇文章:TinyAdmin前端展现框架,其在线演示路径为:http://www.tinygroup.org/tinyadmin/,应该说有许多人还是感觉兴趣的,但是由于这个是基于SmartAdmin框架改写的,虽然我们自...

悠悠然然 ⋅ 2015/06/30 ⋅ 107

OSChina 技术周刊第七期——每周技术精粹

每周技术抢先看,总有你想要的! 移动开发 【博客】WordPress 手机客户端生成系统 NextApp 配置指南 【博客】基于SuperSocket的IIS主动推送消息给android客户端 前端开发 【翻译】jQuery 3....

OSC编辑部 ⋅ 2014/11/03 ⋅ 4

求大神解答,大型网站 PHP 框架如何选择? PHP 未来的发展趋势?接口框架选择?数据操作类选择?

1.PHP开发大型网站用什么框架好呢?YII2?Symfony2?还是其他什么框架,求指引 2.PHP未来的发展趋势是怎样的呢?PC端网页开发?给APP和m端做接口?还是微信的相关开发?,求指引 3.PHP用来开发...

jack984 ⋅ 2015/04/11 ⋅ 17

前后端分离-为什么分离

What? 什么是前后端分离?一般我们所说的前后端分离都是说开发模式的前后端分离,部署一般也是分离的。 现在我所知道的常见的开发模式有: 传统的MCV模式:前端写html,后端套界面,转成jsp...

郭恩洲_OSC博客 ⋅ 2016/11/21 ⋅ 0

一入前端深似海,从此红尘是路人系列第四弹之未来前端路该何去何从

一、为什么学下此篇博客? 今天之所以会发这么一篇博客,主要是因为最近横空出世的微信小程序,当然本人也自己玩了一下小程序,发现的确是挺好玩的。但我今天要讲的并不是关于小程序的,而是...

qiangdada ⋅ 2016/10/03 ⋅ 31

OSChina 开源周刊 41 期 —— Python 不是 C

每周技术抢先看,总有你想要的! 移动开发 【翻译】为什么 JavaScript 会在移动端中胜出? 【博客】开发基于 PhoneGap 的 Hybrid APP 前端开发 【翻译】使用 HTML5 时如何改进移动 Web 应用开...

OSC编辑部 ⋅ 2015/07/04 ⋅ 0

jqGrid怎样能将hibernate查询到的多张表的数据,展现在前端页面(SHH集成框架)?

我有一个前端页面需要从后端查询数据,但查询是在不同的多个表之间去查的,前端数据展现用的是jqGrid,后端的数据查询用的是hibernate,整体是SSH集成框架。模型层用的是hibernate,但是查询...

Alyce ⋅ 2015/01/05 ⋅ 1

Ant Design 2.7.4 发布,阿里前端设计语言&前端框架

Ant Design 2.7.4 发布了,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。 更新内容: 修复 TreeSelect 多选框无法展现的问题。 修复 Anchor...

王练 ⋅ 2017/03/01 ⋅ 5

TinyAdmin在线演示网站 这个有开源吗?​

@悠悠然然 你好,想跟你请教个问题: TinyAdmin在线演示网站 这个有开源吗?

HulkZ ⋅ 2014/12/01 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux中的端口大全

1 被LANA定义的端口 端口 名称 描述 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 d...

寰宇01 ⋅ 4分钟前 ⋅ 0

Confluence 6 如何备份存储文件和页面信息

备份的 ZIP 文件包含有 entities.xml,这个 XML 文件包含有 Confluence 的所有页面内容和存储附件的目录。 备份 Zip 文件结构 页面的附件是存储在附件存储目录中的,通过页面和附件 ID 进行识...

honeymose ⋅ 6分钟前 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 10分钟前 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 15分钟前 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 17分钟前 ⋅ 0

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 47分钟前 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 4

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

NEO智能合约之发布和升级(二)

接NEO智能合约之发布和升级(一),我们接下来说说智能合约的升级功能。 一 准备工作 合约的升级需要在合约内预先设置好升级接口,以方便在升级时调用。接下来我们对NEO智能合约之发布和升级...

红烧飞鱼 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部