`
j2eetop
  • 浏览: 60130 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

TinyAdmin前端展现框架

 
阅读更多

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

  • ext太重,而且有内存泄露,在IE下就是个悲剧。
  • dhtmlx,速度比较好,开源是GPL不适合企业应用,商业的要钱,倒也不贵万把块钱,但是样式比较接近于传统管理台应用,另外一个弊端是比较小众
  • Dojo,其实架构比较好,但是比较小众
  • Semantic:非常好的一个框架,但是成熟度不太好,对IE支持尤其比较差,另外比较小众
  • easyui:相对来说,也是一个不错的框架了,但是样式有点接近ext,也存在内存泄露
  • wijmo:非常完善的前端框架,但是比较小众,对IE8兼容方面有些问题
  • kendoui:也是非常不错的前端框架,比较小众,后台应用开发包要收费
  • jqueryui:非常不错的前端框架,应用面够广,但是组件相对少一些
  • JQuery:本身只是个基础库,当然有许多的插件,但是不同插件之间的样式啥的不太一致,自己去整合费效比较差
  • Bootstrap,不错的框架,组件相当来说少一点
  • ......还有许多知名不知名的前端框架,但是比较可用的,真的很难找

其实我的要求也不是太高,只要满足下面的就差不多了:

  • 组件丰富些,自己不添加也足够用
  • 兼容性好一点,最好IE8以上都能兼容的
  • 修改容易点,我想要就要,不想要就不要
  • 扩展方便点,我想增加就能增加,我想修改就能修改
  • 性能能好点,即使在老旧如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框架中,还提供了更容易使用的宏,提供了样式文件合并压缩,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.图片展示

<ignore_js_op>

<ignore_js_op>


<ignore_js_op>


5.资源压缩及合并情况

<ignore_js_op>


<ignore_js_op>


从上面可以看到,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获取更多内容。

0
1
分享到:
评论

相关推荐

    高校学生选课系统项目源码资源

    项目名称: 高校学生选课系统 内容概要: 高校学生选课系统是为了方便高校学生进行选课管理而设计的系统。该系统提供了学生选课、查看课程信息、管理个人课程表等功能,同时也为教师提供了课程发布和管理功能,以及管理员对整个选课系统的管理功能。 适用人群: 学生: 高校本科生和研究生,用于选课、查看课程信息、管理个人课程表等。 教师: 高校教师,用于发布课程、管理课程信息和学生选课情况等。 管理员: 系统管理员,用于管理整个选课系统,包括用户管理、课程管理、权限管理等。 使用场景及目标: 学生选课场景: 学生登录系统后可以浏览课程列表,根据自己的专业和兴趣选择适合自己的课程,并进行选课操作。系统会实时更新学生的选课信息,并生成个人课程表。 教师发布课程场景: 教师登录系统后可以发布新的课程信息,包括课程名称、课程描述、上课时间、上课地点等。发布后的课程将出现在课程列表中供学生选择。 管理员管理场景: 管理员可以管理系统的用户信息,包括学生、教师和管理员账号的添加、删除和修改;管理课程信息,包括课程的添加、删除和修改;管理系统的权限控制,包括用户权限的分配和管理。 目标: 为高校学生提

    TC-125 230V 50HZ 圆锯

    TC-125 230V 50HZ 圆锯

    影音娱乐北雨影音系统 v1.0.1-bymov101.rar

    北雨影音系统 v1.0.1_bymov101.rar 是一个计算机专业的 JSP 源码资料包,它为用户提供了一个强大而灵活的在线影音娱乐平台。该系统集成了多种功能,包括视频上传、播放、分享和评论等,旨在为用户提供一个全面而便捷的在线视频观看体验。首先,北雨影音系统具有强大的视频上传功能。用户可以轻松地将本地的视频文件上传到系统中,并与其他人分享。系统支持多种视频格式,包括常见的 MP4、AVI、FLV 等,确保用户能够方便地上传和观看各种类型的视频。其次,该系统提供了丰富的视频播放功能。用户可以选择不同的视频进行观看,并且可以调整视频的清晰度、音量等参数,以适应不同的观看需求。系统还支持自动播放下一个视频的功能,让用户可以连续观看多个视频,无需手动切换。此外,北雨影音系统还提供了一个社交互动的平台。用户可以在视频下方发表评论,与其他观众进行交流和讨论。这为用户之间的互动提供了便利,增加了观看视频的乐趣和参与感。最后,该系统还具备良好的用户体验和界面设计。界面简洁明了,操作直观易用,让用户可以快速上手并使用各项功能。同时,系统还提供了个性化的推荐功能,根据用户的观看历史和兴趣,为用户推荐

    Tripp Trapp 儿童椅用户指南 STOKKE

    Tripp Trapp 儿童椅用户指南

    node-v8.13.0-linux-armv6l.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    谷歌浏览器 64位-89.0.4389.128.exe

    Windows版本64位谷歌浏览器,是由Google谷歌公司开发的一款电脑版网络浏览器,可以运行在Windows 10/8.1/8/7 64位的操作系统上。该浏览器是基于其它开放原始码软件所撰写,包括WebKit和Mozilla,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。软件的特点是简洁、快速。并且支持多标签浏览,每个标签页面都在独立的“沙箱”内运行,在提高安全性的同时,一个标签页面的崩溃也不会导致其他标签页面被关闭。此外,谷歌浏览器(Google Chrome)基于更强大的JavaScript V8引擎,这是当前Web浏览器所无法实现的。

    适用于鲲鹏麒麟的OpenJDK1.8

    适用于鲲鹏麒麟的OpenJDK1.8

    毕业设计-基于SSH的任务调度系统的设计与实现

    任务调度试系统,基本功能包括:用户的注册、用户的登录、发起项目、项目详细及搜索等。本系统结构如下: (1)用户的注册登录: 注册模块:完成用户注册功能; 登录模块:完成用户登录功能; (2)发起项目: 发起项目模块:完成了项目及项目下一个或者多个任务的添加; 项目详细:点击项目名称,可以看到项目及任务详细信息; 搜索项目:完成对项目名称的模糊搜索功能 任务调度试系统,基本功能包括:用户的注册、用户的登录、发起项目、项目详细及搜索等。本系统结构如下: (1)用户的注册登录: 注册模块:完成用户注册功能; 登录模块:完成用户登录功能; (2)发起项目: 发起项目模块:完成了项目及项目下一个或者多个任务的添加; 项目详细:点击项目名称,可以看到项目及任务详细信息; 搜索项目:完成对项目名称的模糊搜索功能

    30个炫酷的数据可视化大屏(含源码)

    大屏数据可视化是以大屏为主要展示载体的数据可视化设计,30个可视化大屏包含源码,直接运行文件夹中的index.html,即可看到大屏。 内含:数据可视化页面设计;数据可视化演示系统;大数据可视化监管平台;智能看板;翼兴消防监控;南方软件视频平台;全国图书零售监测数据;晋城高速综合管控大数据;无线网络大数据平台;设备大数据;游戏数据大屏;厅店营业效能分析;车辆综合管控平台;政务大数据共享交换平台;智慧社区;物流云数据看板平台;风机可视化大屏等。

    基于yolov5识别算法实现的DNF自动脚本源码.zip

    优秀源码设计,详情请查看资源源码内容

    毕业设计:基于SSM的mysql-在线网上书店(源码 + 数据库 + 说明文档)

    毕业设计:基于SSM的mysql_在线网上书店(源码 + 数据库 + 说明文档) 2.系统分析与设计 3 2.1系统分析 3 2.1.1需求分析 3 2.1.2必要性分析 3 2.2系统概要设计 3 2.2.1 项目规划 3 2.2.2系统功能结构图 4 2.3开发及运行环境 4 2.4逻辑结构设计 5 2.4.1 数据库概要说明 5 2.4.2 主要数据表结构 6 2.5文件夹架构 9 2.6编写JAVA BEAN 9 3.网站前台主要功能模块设计 10 3.1前台首页架构设计 10 3.2网站前台首页设计 11 3.3新书上市模块设计 12 3.4特价书籍模块设计 13 3.5书籍分类模块设计 14 3.6会员管理模块设计 15 3.7购物车模块设计 17 3.8收银台设计模块 19 3.9畅销书籍模块设计 20 4.网站后台主要功能模块设计 21 4.1网站后台文件夹架构设计 21 4.2后台主页面设计 21 4.3书籍管理模块设计 22 4.4会员管理模块设计 25 4.5订单管理模块设计 26 4.6公告管理模块设计 28 4.7退出系统页面设计 29 5.网站制作中遇到的问

    python 开发 python爬虫数据可视化分析项目源码加课题报告,源码注解清晰一看就懂,适合新手.zip

    python 开发 python爬虫数据可视化分析项目源码加课题报告,源码注解清晰一看就懂,适合新手

    node-v8.0.0-linux-armv7l.tar.gz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    使用FPGA发送一个经过曼彻斯特编码的伪随机序列

    rtl中存放的是设计文件 sim中存放的是仿真文件

    基于Java的班级管理系统课程设计源码

    附件是基于 Java的班级管理系统课程设计源码,包含程序说明和运行环境要求,文件绿色安全,仅供学习交流使用,欢迎大家下载学习交流!

    最新获取QQ微信头像橘头像阁PHP源码下载.rar

    最新获取QQ微信头像橘头像阁PHP源码下载.rar最新获取QQ微信头像橘头像阁PHP源码下载.rar

    K-750 管道疏通机手册

    K-750 管道疏通机手册 Drain Cleaner Manual K-750 Drain Cleaning Machine

    基于哈希链表的简单人员信息管理系统

    实现基于哈希表的员工信息管理系统,该系统主要用于处理员工信息,主要包括员工个人信息的录入、删除、查找、修改等,同时支持数据的导入导出

    node-v6.16.0.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

    3D模型007,可用于建模、GIS、BIM、CIM学习

    3D模型007,可用于建模、GIS、BIM、CIM学习

Global site tag (gtag.js) - Google Analytics