zoukankan      html  css  js  c++  java
  • 《开源框架那点事儿20》:自己动手写前端框架

    曾经发表过一篇文章:TinyAdmin前端展现框架。其在线演示路径为:http://www.tinygroup.org/tinyadmin/。应该说有很多人还是感觉兴趣的,可是因为这个是基于SmartAdmin框架改写的,尽管我们自己买了SmartAdmin的授权,可是广大用户假设要用的时候,就会有授权相关的问题,这会大大影响一些人的使用决策--尤其是会再发行的朋友。 再一个原因是SmartAdmin初看不是不错的。可是实际用起来。里面的问题比較多。对IE8基本上能够说是不兼容,尽管我们努力进行了一定的修正,可是还是兼容性不够好。有些用户体验方面也有改进的空间,这就越来越让我思考。是不是要有更好的解决方式?
    直到AJian和密缘之友增加我的团队之后,我认为是时候比較彻底的解决问题了。

    果然。在风淡芸轻、AJian、密缘之友的通力合作下,仅仅用了一个月左右的时间。就拿出一TinyUI的初始版本号。眼下已经基本完好。当然我们还在进行系统性的測试,相信还存在一些小问题(有些我们自己已经发现,正在修正中),欢迎感兴趣的同学们一起来參与改进。
    在线演示地址:http://www.tinygroup.org/tinyuiweb/
    源代码地址(必须托管在高大上的开源中国GIT仓库):http://git.oschina.net/tinyframework/TinyUiEnterprise
    开发环境构建,须要有GIT,MAVEN(3.1.x)。JDK1.6:
    ?

    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源创团队进行过沟通。他们同意我们复用他们框架中的内容。


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

    • 提供了完整的主页面框架
    • 提供了整页切换和Ajax局部刷新的支持
    • 提供了丰富的菜单插入点
    • 提供了多种皮肤
    • 提供了丰富的界面元素自己定义
    • 提供了UI组件包的封装
    • 提供了宏封装,使得使用时不必关心详细实现
    • 提供了流式布局。在手机端也有良好的展现
    • 良好的攻克了UI组件包之间的依赖关系
    • 良好的攻克了CSS合并和JS合并及其压缩方面的问题
    以下我通过一些图形了做一个展示:

    101942_4gwE_1245989.jpg (149.91 KB, 下载次数: 0)

    下载附件

    半小时前 上传


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

    102247_JRuS_1245989.jpg (173.42 KB, 下载次数: 0)

    下载附件

    半小时前 上传


    点击设置button,会显示界面调整面板,在这里能够对导航条、菜单条、导般菜单等进行固定与否的调整,也能够调整菜单的位置。还能够选择是採用全屏还是固定宽度的设置。值得一提的是假设选择固定宽度,会依据页面的宽度在970与1170宽度之间自己主动适应。再以下就是各种各样的主题风格了。呵呵。如今的主题风格仅仅是简单调整了一下,用于測试,后面会请专业的美工同学进行系统性的调整。


    然后。里面就是几十个组件的实际演示样例。我敢保证你想用的多大多组件都已经包括在内了。

    假设你觉得还不够,请到bbs.tinygroup.org社区中留言,仅仅要提的合理。我们会以你想象不到的速度高速进行加入。
    以下我展示一个流式布局的示范:
    一開始是整页宽度的固定宽度显示。还能够看到两边的阴影,如今固定宽度为1170像素。


    105844_Y3Xr_1245989.jpg (139.81 KB, 下载次数: 0)

    下载附件

    半小时前 上传


    我们降低它的宽度 

    110144_U8Bj_1245989.jpg (134.49 KB, 下载次数: 0)

    下载附件

    半小时前 上传



    它的宽度已经变成970像素宽。


    再把它的宽度降低。

    110416_DqM2_1245989.jpg (131.87 KB, 下载次数: 0)

    下载附件

    半小时前 上传


    能够看到两边的隐藏已经没有了。


    110539_YSqH_1245989.jpg (108.22 KB, 下载次数: 0)

    下载附件

    半小时前 上传


    因为宽度实在是小。菜单就不再完整显示。而是仅仅显示图标了。

    110717_2u8d_1245989.jpg (84 KB, 下载次数: 0)

    下载附件

    半小时前 上传


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


    111016_159t_1245989.jpg (57.55 KB, 下载次数: 0)

    下载附件

    半小时前 上传


    上面是菜单显示方式。能够看到是很适合手机等触摸屏上操作的。
    Tiny出品,必是精品,小伙伴们一起參与或增加我们吧!!!



    欢迎訪问开源技术社区:http://bbs.tinygroup.org。本例涉及的代码和框架资料,将会在社区分享。《自己动手写框架》成员QQ群:228977971,一起动手,了解开源框架的奥秘!

    开源訪谈录

  • 相关阅读:
    shell 逻辑操作符
    shell 整数
    shell 字符串
    常用文件测试操作符
    系统级脚本 rpcbind
    shell 特殊字符
    redhat7.5 升级OpenSSH_7.8p1
    kubernetes 项目
    salt 安装kubernetes集群3节点
    web应用
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/6880216.html
Copyright © 2011-2022 走看看