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本项目!