avalon新一代UI库发布
任何前端框架,尤其是国内的,想推广开,必须有一个UI库,光是一个核心库当光头司令是不行的。此外还有一个小圈子,供大家遇到问题时可以发问,一起完善。自从avalon嫁入"去哪儿网"后,拥有一支专业的全职团队在做,其发展可谓一日千里。
首先,先做个备课给之前没有接触过avalon的朋友听。avalon是一个MVVM架构的前端框架,它与knockout, angular, ember,react的目标非常相近,就是让用户专注于数据模型本身,不再自己手动处理DOM。正因为如此,它与当前主流的jQuery的写法是截然不同,jQuery的90%操作是从选择器引擎出发,总是想着如何从一串类名,标签名,ID得到要操作的元素,然后用它高度封装优雅的原型方法来操作元素。但尽管链式操作多么轻便,API多么好用,但我们在接管别人用jQuery写的javascript代码时,都非常痛苦。尤其是新人,他们的代码基本是writeOnly。越大的项目,这缺点就越严重。因此后端搞的那一套类机制,设计模式,于前端是必不可少的。但一般人是很难在写代码应用到那一套东西。这时,我们就需要分层架构。MVVM就是其解药之一。backbone在前年也非常流行,它带来的是没什么改动的MVC,但angular一出来就把它秒了,因此后者让用户写的代码量更少,并有一整套方法论,如何分目 录啊,如何测试,如何定义服务,如何设计指令……照搬就行,不会像jQuery的代码那样千人千面,离奇百怪。
那avalon相对于angular有什么优势呢?
- 更轻量,但功能齐备,不到5千行包含1万7千行的angular的90%功能。
- 没有angular那么多概念,入门简单。
- 兼容IE6,并针对高级浏览器有更高效小体积的avalon.mobile。而 angular只支持IE9,需说网上有各种方案让你兼容到IE6,但这些方案都非常麻烦,也意味着你不能使用老外写的其他外围模块。
- 拥有完整的解决方案,SEO, 打包(r.js),权限(ms-if), UI
- 自带加载器,及换用其他加载器的解决方案。注,加载器一般用于开发阶段,上线时还是建议打包压缩。
- 强大的UI库。我之前搞过mass UI,然后为avalon搞了一套Pilot UI。我来去哪儿网前,他们基于avalon搞了一套Onion UI, 最后所有成果汇成这一套Oni UI。现在拥有32个组件,包含大家最关心的日历,表格……
下面Oni UI已有的组件及已经列入开发议程的组件
- UI组件,有界面的,通过ms-widget调用
- 功能组件,没有界面的,添加辅助性功能的
名称 | 类别 | 状态 | 说明 |
---|---|---|---|
第1期 | |||
hotkeys | 功能组件 | 完成 | 钟,组合键 |
position | 功能组件 | 完成 | 杨,定位 |
draggable | 功能组件 | 完成 | 钟,拖拽 |
resizable | 功能组件 | 完成 | 钟,缩放 |
checkboxlist | UI组件 | 完成 | 田,全选非全选 |
textbox+suggest | UI组件 | 完成 | 田,文本域及智能提示 |
at | UI组件 | 完成 | 钟,@提示列表 |
pager | UI组件 | 完成 | 钟,分页栏 |
dialog | UI组件 | 完成 | 田,弹出层 |
grid | UI组件 | 完成 | 钟, 表格 |
according | UI组件 | 完成 | 田, 手风琴 |
slider | UI组件 | 完成 | 田,滑动条 |
flipswitch | UI组件 | 完成 | 杨, 拖动切换 |
tabs | UI组件 | 完成 | 杨, 切换卡 |
spinner | UI组件 | 完成 | 田,数字输入框 |
progressbar | UI组件 | 完成 | 杨, 进度条 |
dropdown | UI组件 | 完成 | 姚,下拉框 |
switchdropdown | UI组件 | 完成 | 姚,切换下拉框(图标加提示) |
miniswitch | UI组件 | 完成 | 姚, 迷你下拉框(只有图标) |
tooltip | UI组件 | 完成 | 杨,气泡提示(有小三角,围绕元素的任意位置出现) |
notice | UI组件 | 完成 | 田,信息提示(能并排出现) |
doublelist | UI组件 | 完成 | 姚,角色选择 |
datepicker | UI组件 | 完成 | 田, 日期选框器 |
scrollbar | UI组件 | 完成 | 杨, 滚动条 |
第2期 | |||
json | 功能组件 | 完成 | 钟,json2 |
cookie | 功能组件 | 完成 | 钟,cookie |
store | 功能组件 | 完成 | 钟,本地储存 |
promise | 功能组件 | 完成 | 钟, es6的Promise组件 |
colorpicker | UI组件 | 完成 | 王,颜色选择器 |
lazyload | 功能组件 | 懒加载 | |
editor | UI组件 | 富文本编辑器 | |
menu | UI组件 | 多级菜单 | |
tree | UI组件 | 树 | |
waterfall | UI组件 | 瀑布流 | |
button | UI组件 | 按钮, http://www.bootcss.com/p/buttons/ | |
marquee | UI组件 | 多个照片 | |
carousel | UI组件 | 单个照片 | |
rating | UI组件 | 星级评分 | |
uploader | UI组件 | 上传 | |
preview | UI组件 | 完成 | 钟, 图片预览 |
scrollspy | UI组件 | 完成 | 杨, 滚动监听 |
imagecropper | UI组件 | 图片剪切 | |
validator | 功能组件 | 验证框架 |
既然本文是宣传Oni UI,那么着重说说其一些特性。它是基于sass来编写它的样式,经过严密的组织,想实现换肤功能是非常轻松的。在avalon OniUI的仓库里有一个chameleon目录。chameleon是OniUI的皮肤生成系统,基于sass的compass框架改写而成。 直接路径下有oniui-theme.scss,oniui-common.scss这两个文件, 其中oniui-common.scss会生成oniui-common.css,这个文件所有UI组件都应该引用,如simplegrid.js就是这样引用
define(["avalon",
"text!./avalon.simplegrid.html",
"pager/avalon.pager",
"scrollbar/avalon.scrollbar",
"css!../chameleon/oniui-common.css",
"css!./avalon.simplegrid.css"
], function(avalon, tmpl) {
//.... })
oniui-theme.scss是用于每个组件对应的scss文件引用的,如avalon.simplegrid.js
肯定与一个叫avalon.simplegrid.scss文件放在一块,这scss里开头就是这样写的:
@charset "utf-8";
@import "../chameleon/oniui-theme";
$uiname : "ui-simplegrid"; .#{$uiname}{
width:100%;
border: 1px solid $ui-state-default-border-color;
@extend %oniui-font-setting;
.#{$uiname}-scroll-wrapper{
width:100%;
overflow:auto;
position: relative; }
//....
}
正通过这样严格的组件,我们的OniUI就可以修改两处实现全库的换肤功能
第一处位于chameleon/compass/_config.scss文件中,里面有
@import "themes/smoothness" ;
$oinui-theme: smoothness !global;
这两个地方修改
第二处是chameleon/compass/theme目录中,因为我们现在的皮肤叫smoothness,
那么就在它里面建一个叫smoothness.scss文件
以后你要添加一个叫sunny的皮肤,那么对应处改成
@import "themes/sunny" ;
$oinui-theme: sunny !global;
自己再建一个sunny.scss文件就行了
我们再看一下这皮肤里面的规则是怎么搞的
@charset "utf-8";
// 两种主色调 银灰浅蓝
// 激活的蓝色为天蓝色 #3775c0
// hover上去为浅灰色 #f8f8f8
// 普通的底色为银灰色 #d9d9d9
// 银灰底色对应的边框色为深灰色:#cccccc; //两个用到的绿色 #3e973e(深) #68c969(浅) // 正常的字体颜色为黑色: #000;
// slider的激活蓝色为 #22dddd; // input[type=text],input[type=password],textarea的样式
//┌───┬────┬────┬────┬────┬────┐
//│状态 │default │ hover │active │diabled │error │
//├───┼────┼────┼────┼────┼────┤
//│边框 │#cccccc │#999999 │active │#3775c0 │#ff8888 │
//├───┼────┼────┼────┼────┼────┤
//│背景 │#ffffff │#ffffff │#ffffff │#f5f5f5 │#fffff │
//├───┼────┼────┼────┼────┼────┤
//│文字 │#000000 │#000000 │#000000 │#999999 │#ff8888 │
//└───┴────┴────┴────┴────┴────┘
//字体设置
$oniui-font-size: 1em;
$oniui-font-weight: normal;
$oniui-font-family: Helvetica,Arial,Sans-serif; $oniui-icon-start-color: #58b359;
$oniui-icon-pause-color: #333;
$oniui-icon-state-hover-color: #fff;
$oniui-icon-state-active-color: #fff; //通用阴影
$oniui-shadow-box: 2px 2px 3px 0 rgba(0, 0, 0, 0.1); $ui-widget-content-border-color:#3e973e!global;
$ui-widget-content-background-color:#68c969!global;
$ui-widget-content-color:#fff!global; $ui-widget-header-border-color: #aaa!global;
$ui-widget-header-background-color: rgb(223,223,223)!global;
$ui-widget-header-color: #fff!global; $ui-state-default-background-color: #e6e6e6!global;
$ui-state-default-border-color: #d4d4d4!global;
$ui-state-default-color: #555!global;
//移上去时
$ui-state-hover-background-color: #f8f8f8!global;
$ui-state-hover-border-color: #f8f8f8!global;
$ui-state-hover-color: #000!global;
//激活状态(蓝色)
$ui-state-active-background-color:#3775c0 !global;
$ui-state-active-border-color: #3775c0!global;
$ui-state-active-color: #fff!global;
//禁用(灰色)
$ui-state-disabled-background-color: #F5F5F5!global;
$ui-state-disabled-border-color: #D9D9D9!global;
$ui-state-disabled-color: #999!global; //出错(红色)
$ui-state-error-background-color: #ff8888!global;
$ui-state-error-border-color: #ff8888!global;
$ui-state-error-color: #ff8888!global;
你只要将对应位置的颜色值改一下就行了。avalon的组件是分成高亮区,底色区与可变区。
高亮区通过添加.ui-widget-content类名标识,底色区添加.ui-widget-header类名标识;
可变区通过添加不同的类名来判定它的状态实现,一般分正常,hover, 激活,禁用,禁用,出错这几种状态。
它们分别添加.ui-state-default, .ui-state-hover, .ui-state-active, .ui-state-disabled, .ui-state-error类名实现。
悄悄话一句,这其实是抄自jquery ui的皮肤系统。
如果有的组件比较奇特,需要区别对待,那么我们可以在对应的scss文件中,如
@if($oinui-theme == smoothness){
$ui-state-hover-background-color:#E8F5FD;
}
改成这些,重新编译一下就行了。
最后附上国内使用avalon的一些公司LOGO,我们不是一个人在战斗!欢迎大家来fork本项目!
avalon新一代UI库发布的更多相关文章
- Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序
XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...
- 免费的Android UI库及组件推荐
短短数年时间Android平台就已经形成了一个庞大而活跃的开发者社区.许多社区开发的项目业已进入成熟阶段,甚至可以用于商业的软件生产中,且不用担心质量问题. 本文编译自androiduipattern ...
- 重大发现: windows下C++ UI库 UI神器-SOUI(转载)
转载:http://www.cnblogs.com/setoutsoft/p/4996870.html 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多语言 ...
- 推荐 9 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
- 转: windows下C++ UI库 UI神器-SOUI
转:http://www.cnblogs.com/setoutsoft/p/4996870.html 前言 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多 ...
- Ligg.EasyWinApp-100-Ligg.EasyWinForm:一款Winform应用编程框架和UI库介绍
本项目是一个Winform应用编程框架和UI库.通过这个该框架,不需任何代码,通过XML配置文件,搭建任意复杂的Windows应用界面,以类似Execel公式的方式实现基本的过程控制(赋值.条 ...
- GUI - GEB UI库
最近基于Winform开发了几款产品,感觉Winform有很大的局限性,其最主要的一点在于:控件是基于Windows窗体的,这就导致每个控件都是重量级控件,对复杂的界面来说,其性能和表现力都欠佳.在实 ...
- Riot - 比 Facebook React 更轻量的 UI 库
Riot 是一个类似 Facebook React 的用户界面库,只有3.5KB,非常轻量.支持IE8+浏览器的自定义标签,虚拟 DOM,语法简洁.Riot 给前端开发人员提供了除 React 和 P ...
- AloneJs —— 简洁高效的JavaScript UI库
以前做项目时用了一些第三方的JS UI库,项目比较low的时候用还行,一旦项目要求比较高,特别是交互比较复杂时,某些第三方UI库就显得无能为力,用起来也不顺手,改也不好改,所以我就自己基于jQuery ...
随机推荐
- java基础第5天
数组概述 数组是储存多个变量(元素)的东西(容器} 这多个变量的数据类型要一致 概念:数组是存储同一种数据类型多个元素的集合.也就是一个容器,这个容器有个名字,就是数组名. 数组就是在内存中开辟出一段 ...
- L206
There are so many new books about dying that there are now special shelves set aside forthem in book ...
- DIY远程控制开关(tiny6410+LED+yeelink+curl)
上一次,介绍了如何实现远程监控室内温度,大家伙反响还是很热烈的,笔者很欣慰,独乐乐不如众乐乐啊.不过话说回来,那个实现只能是远程监测家中温度,假如发现家里热得很,想远程打开空调开关提前降降温,回家后不 ...
- cousera 吴恩达 深度学习 第一课 第二周 作业 过拟合的表现
上图是课上的编程作业运行10000次迭代后,输出每一百次迭代 训练准确度和测试准确度的走势图,可以看到在600代左右测试准确度为最大的,74%左右, 然后掉到70%左右,再掉到68%左右,然后升到70 ...
- CSS 中文字体的英文名称 (simhei, simsun) 宋体 微软雅黑等
Mac OS的一些: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 俪黑 P ...
- 使用rollup 开发专业js library
rollup 是一个不错的javascript 模块打包器,一般我们用来构建library 安装 npm install -g rollup 参考集成jquey && shortid ...
- nexus yum 私服集成
nexus 集成了 yum 私服使用起来还是比较简单的 配置 yum proxy 实际使用我们可能需要配置centos 以及epel 的源 centos可以用http://mirror.cento ...
- list_for_each与list_for_each_entry具体解释
一.list_for_each 1.list_for_each原型#define list_for_each(pos, head) \ for (pos = (head)->next, ...
- vs2005新建项目中没有ASP.NET WEB应用程序的解决方法
在vs2003的年代,我们可以在项目模板中选择创建"asp.net web应用程序",可是到vs2005中,就变成了创建网站,原有的创建"asp.net web应用程序& ...
- 华为交换机STP 根ID优先级设置
http://m.blog.csdn.net/flyfish5/article/details/50224537 STP(Spanning Tree Protocol)生成树协议. 冗余链路 当前的交 ...