《开源框架那点事儿20》：公布TinyUI前端框架

时间 2019-11-19

原文原文链接

曾经发表过一篇文章： TinyAdmin前端展示框架，其在线演示路径为： http://www.tinygroup.org/tinyadmin/，应该说有不少人仍是感受兴趣的。但是由于这个是基于SmartAdmin框架改写的，尽管咱们本身买了SmartAdmin的受权。但是广大用户假设要用的时候，就会有受权相关的问题。这会大大影响一些人的使用决策--尤为是会再发行的朋友。

再一个缘由是SmartAdmin初看不是不错的。但是实际用起来，里面的问题比較多，对IE8基本上可以说是不兼容。尽管咱们努力进行了必定的修正，但是仍是兼容性不够好。有些用户体验方面也有改进的空间，这就愈来愈让我思考。是否是要有更好的解决方式？
直到AJian和密缘之友增长个人团队以后，我以为是时候比較完全的解决问题了。果真。在风淡芸轻、AJian、密缘之友的通力合做下。仅仅用了一个月左右的时间，就拿出一TinyUI的初始版本号，眼下已经基本无缺，固然咱们还在进行系统性的測试，相信还存在一些小问题（有些咱们本身已经发现，正在修正中），欢迎感兴趣的同窗们一块儿来參与改进。php

在线演示地址：http://www.tinygroup.org/tinyuiweb/
源代码地址（必须托管在高大上的开源中国GIT仓库）：http://git.oschina.net/tinyframework/TinyUiEnterprise
开发环境构建，需要有GIT，MAVEN(3.1.x)，JDK1.6：
?
html

1
2
3
4
5

git clone https://git.oschina.net/tinyframework/TinyUiEnterprise.git
cd TinyUiEnterprise
mvn install
cd *web
mvn jetty:run

在运行mvn install的时候，第一次时间比較长，由于要从中央仓库下载一些资源包，可以抽支烟、喝杯茶、走走步啥的。

假设走完最后一步，就可以启动起一个本地环境（注意。没有别的应用战用8080port），这个时候起个浏览器，输入：

?
前端

1	http://localhost:8080/tinyuiweb/

注意，请在IE9以上浏览器、Chrome、FireFox等浏览器上浏览，眼下IE8还在做适应性调整。

一些说明，本UI框架中。有一些内容取自H-UI，这个咱们和H-UI源创团队进行过沟通，他们赞成咱们复用他们框架中的内容。git

本UI框架中，在某些外在实现方面參考了SmartAdmin的一些特性。但是没有复用它的源代码。
本UI框架中，集成了一些开源的JQuery插件，但是不改变原来插件的受权方式，请使用者在使用时查看原始插件的受权方式。
TinyUI的一些特性说明：
web

提供了完整的主页面框架
提供了整页切换和Ajax局部刷新的支持
提供了丰富的菜单插入点
提供了多种皮肤
提供了丰富的界面元素本身定义
提供了UI组件包的封装
提供了宏封装，使得使用时没必要关心详细实现
提供了流式布局，在手机端也有良好的展示
良好的攻克了UI组件包之间的依赖关系
良好的攻克了CSS合并和JS合并及其压缩方面的问题

如下我经过一些图形了作一个展现：

上面是当中的一个页面。组件包列表是依据实际载入的组件包数量实时计算出来的，所以不需要人为进行改动---这个就是依赖TinyUiEngine的强大支持了。

点击设置button，会显示界面调整面板。在这里可以对导航条、菜单条、导般菜单等进行固定与否的调整。也可以调整菜单的位置。

还可以选择是採用全屏仍是固定宽度的设置，值得一提的是假设选择固定宽度，会依据页面的宽度在970与1170宽度之间本身主动适应。再如下就是各类各样的主题风格了。

呵呵，现在的主题风格仅仅是简单调整了一下，用于測试，后面会请专业的美工同窗进行系统性的调整。
而后，里面就是几十个组件的实际演示样例。我敢保证你想用的多大多组件都已经包括在内了。假设你以为还不够，请到bbs.tinygroup.org社区中留言，仅仅要提的合理。咱们会以你想象不到的速度高速进行增长。

如下我展现一个流式布局的示范：
一開始是整页宽度的固定宽度显示，还可以看到两边的阴影，现在固定宽度为1170像素。

咱们下降它的宽度

它的宽度已经变成970像素宽。
再把它的宽度下降，

可以看到两边的隐藏已经没有了。

由于宽度实在是小，菜单就再也不完整显示，而是仅仅显示图标了。

嗯嗯。效果不错。已经完整的展现了整个过程。

上面是菜单显示方式。可以看到是很适合手机等触摸屏上操做的。
Tiny出品，必是精品，小伙伴们一块儿參与或增长咱们吧！！！

欢迎訪问开源技术社区：http://bbs.tinygroup.org。

本例涉及的代码和框架资料。将会在社区分享。《本身动手写框架》成员QQ群：228977971。一块儿动手。了解开源框架的奥秘。或点击增长QQ群：http://jq.qq.com/?_wv=1027&k=d0myfX

开源訪谈录