TinyAdmin前端展现框架

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

  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组件包抽取

?


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/

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

时间: 2024-11-18 12:41:22

TinyAdmin前端展现框架的相关文章

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

以前发表过一篇文章:TinyAdmin前端展现框架,其在线演示路径为:http://www.tinygroup.org/tinyadmin/,应该说有许多人还是感觉兴趣的,但是由于这个是基于SmartAdmin框架改写的,虽然我们自己买了SmartAdmin的授权,但是广大用户如果要用的时候,就会有授权相关的问题,这会大大影响一些人的使用决策--尤其是会再发行的朋友. 再一个原因是SmartAdmin初看不是不错的,但是实际用起来,里面的问题比较多,对IE8基本上可以说是不兼容,虽然我们努力进行

网站应该需要什么样的功能以及前端展现形式

摘要: cms系统已经成为建站的首选,因为现有的cms非常多,用户数量也很多.cms入门很快,加上cms本身提供的模版也超多,因此建一个站不超过10分钟. 在众多类型的cms中该如何选择一款心仪 cms系统已经成为建站的首选,因为现有的cms非常多,用户数量也很多.cms入门很快,加上cms本身提供的模版也超多,因此建一个站不超过10分钟. 在众多类型的cms中该如何选择一款心仪的CMS作为建站的程序,或者说我的网站应该需要什么样的功能以及前端展现形式是众多cms爱好者最常见和最关注的问题之一.

Angular.js框架基础知识,来自Google的前端JavaScript框架

AngularJS 是一款来自 Google 的前端 JavaScript 框架,也是 SPA(single-page-application,单页应用)框架.AngularJS 框架的体积非常小,但是设计理念和功能却非常强大,极大地简化前端开发的负担,它快速成为了 JavaScript 的主流框架,帮助开发者从事 web 开发. SPA 和 MVC SPA:单页面应用是指用户通过浏览器加载独立的 HTML 页面并且无需离开此导航页面.对用户操作来说,一旦加载和执行单个页面应用程序通常会有更多的

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用户的体验已经需要越来越注重,这次我们是左右分栏,左边是系统菜单,右边是一个以tabs页组成的页面集合,每一个tab都可以单独刷新和关闭,因为他们会是一个iframe 工欲善其事必先利其器.需要用到以下工具. Visual Studio 2012 您可以安装MVC4 for vs2010用VS2010

前端ligerui框架的grid控件, 后端springmvc获取分页问题

问题描述 前端ligerui框架的grid控件, 后端springmvc获取分页问题 前端ligerui框架 的grid控件 添加参数 contentType:'application/json', 后端springmvc就获取分页page有问题? 如果前端不加contentType及parms参数, 后端不加@RequestBody参数,能获取到page.pagesize. 如果前端加contentType及parms参数, 后端加@RequestBody参数,报错:java.lang.Nul

Ext JS 4.0发布 一个与后台技术无关的前端ajax框架

ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;功能丰富,无人能出其右.无论是界面之美,还是功能之强,ext的表格控件都高居榜首. 单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能咱们就不提了. 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染

AngularJS (前端MVC框架)

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS的核心特点是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入. 适用于:构建CRUD web应用.(CDUQ,数据的增删改查). 不适用于:游戏,图形界面编辑器.这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建.像这种情况用一些更轻量.简单的技术如jQuery可能会更好. 参考 官方API : http://docs.ngnice.

Javascript前端UI框架Kit使用指南之Kitjs简介_javascript技巧

Kitjs,(http://xueduany.github.com/KitJs),是我2011年底,离开淘宝UED之后,自己搞起的一套HTML5的前端widget库,原本的用途主攻手机端HTML页面交互组件使用,正如其字面意思Kit一样,愿景是做一个娇小,实用,既可以直接拿来用,也可以很方便做2次开发的一套组件.后来由于项目的越做越大,组件数的膨胀,也加入PC端浏览器(IE6+,FF,chrome核心系列等等)的支持,不再仅限于原来手机开发领域,开始正式迈向全平台.所以近期也对原来的所有模块按照

bootstrap (前端css框架)

bootstrap是一个前端css框架,由twitter公司开发.它简洁.直观.漂亮,特点之一是能够根据不同尺寸的设备(如手机.平板.笔记本与台式机的显示器尺寸不一)来响应式地布局,背后原理是css的媒体查询功能. 响应式 实现响应式布局的<meta>标签: <!-- Bootstrap 根据屏幕大小自适应样式 --> <meta name="viewport" content="width=device-width,initial-scale=