基于avalon的组件库
Switch branches/tags
Nothing to show
Clone or download
RubyLouvre Merge pull request #828 from roscoe054/master
fix(dropdownlist): 修复无法筛选出大写labal
Latest commit a63f173 Sep 14, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
accordion init Sep 17, 2015
animation init Sep 17, 2015
at init Sep 17, 2015
breadcrumb add breadcrumb Nov 3, 2015
browser init Sep 17, 2015
button fix iconfont 编码错误 May 23, 2016
buttons init Sep 17, 2015
camera init Sep 17, 2015
carousel carousel:去掉多余的变量 Aug 26, 2015
chameleon 同步beta更新 Jan 5, 2016
checkboxlist 同步beta更新 Jan 5, 2016
colorpicker init Sep 17, 2015
combo init Sep 17, 2015
cookie init Sep 17, 2015
datepicker fix(date picker): 修复year/month dropdown取值不正确 Jul 1, 2016
dialog 同步beta更新 Jan 5, 2016
doublelist init Sep 17, 2015
draggable merge(draggable): fix err when using ms-repeat and other bugs Apr 26, 2016
dropdown fix(dropdown): get error when set dropdown value out of range Apr 26, 2016
dropdownlist fix(dropdownlist): 修复无法筛选出大写labal Sep 14, 2016
fileuploader init Sep 17, 2015
flipswitch init Sep 17, 2015
highlight init Sep 17, 2015
hotkeys init Sep 17, 2015
i18n init Sep 17, 2015
json init Sep 17, 2015
kindeditor init Sep 17, 2015
layout init Sep 17, 2015
lazyload lazyload: 修复load多次 Dec 8, 2015
live init Sep 17, 2015
loading init Sep 17, 2015
mask init Sep 17, 2015
menu init Sep 17, 2015
miniswitch init Sep 17, 2015
mmPromise init Sep 17, 2015
mmRequest 修复mmState突然的不行了 Mar 11, 2016
mmRouter change doc Apr 26, 2016
mocha init Sep 17, 2015
notice notice:去掉初始状态下的margin Nov 23, 2015
pager init Sep 17, 2015
pages 添加样例至官网 Dec 21, 2015
position init Sep 17, 2015
preview init Sep 17, 2015
progressbar init Sep 17, 2015
rating init Sep 17, 2015
resizable resizable: 修复draggable时,鼠标脱离元素不能拖动 Jan 20, 2016
scrollbar 同步beta更新 Jan 5, 2016
scrollspy init Sep 17, 2015
simplegrid 同步beta更新 Jan 5, 2016
slider init Sep 17, 2015
smartgrid merge(smartgrid): fix content line-break and other bugs Apr 26, 2016
spinner fix(spinner): value fixing when blur won't change vm Apr 26, 2016
store init Sep 17, 2015
style 同步beta更新 Jan 5, 2016
switchdropdown 同步beta更新 Jan 5, 2016
tab init Sep 17, 2015
test 修复测试报错 Dec 3, 2015
textbox 同步beta更新 Jan 5, 2016
timer init Sep 17, 2015
tooltip 同步beta更新 Jan 5, 2016
touch init Sep 17, 2015
tree 修复tree组件nodeCreated触发两次的bug Dec 4, 2015
uploader init Sep 17, 2015
uptop init Sep 17, 2015
validation fix 邮箱的验证 Feb 1, 2016
.gitignore 同步beta更新 Jan 5, 2016
.gitmodules init Sep 17, 2015
.travis.yml init Sep 17, 2015
README.md Update README.md Dec 28, 2015
avalon.getModel.js init Sep 17, 2015
avalon.js fix mmState Oct 9, 2015
avalon.shim.js init Sep 17, 2015
bower.json init Sep 17, 2015
build-tree.sh init Sep 17, 2015
build.html init Sep 17, 2015
build.js init Sep 17, 2015
index.html 添加统计 Nov 27, 2015
main-built.js init Sep 17, 2015
main.js init Sep 17, 2015
mvc.sh init Sep 17, 2015
oni.standard.html init Sep 17, 2015
oniui.sublime-build init Sep 17, 2015
package.json init Sep 17, 2015
r.js init Sep 17, 2015
require.js init Sep 17, 2015
sublime-build.sh init Sep 17, 2015

README.md

avalon.oniui

*注意:avalon1.5及以上版本不支持oniui,请使用1.4.或以下版本的avalon

基于avalon的组件库,由去哪儿网前端架构组倾力打造

当前进度表

  • UI组件,有界面的,通过ms-widget调用
  • 功能组件,没有界面的,添加辅助性功能的
名称类别状态说明
第1期
hotkeys功能组件完成钟,组合键
position功能组件完成杨,定位
draggable功能组件完成钟,拖拽
resizable功能组件完成钟,缩放
checkboxlistUI组件完成田,全选非全选
textbox+suggestUI组件完成田,文本域及智能提示
atUI组件完成钟,@提示列表
pagerUI组件完成钟,分页栏
dialogUI组件完成田,弹出层
gridUI组件完成钟, 表格
accordingUI组件完成田, 手风琴
sliderUI组件完成田,滑动条
flipswitchUI组件完成杨, 拖动切换
tabsUI组件完成杨, 切换卡
spinnerUI组件完成田,数字输入框
progressbarUI组件完成杨, 进度条
dropdownUI组件完成姚,下拉框
switchdropdownUI组件完成姚,切换下拉框(图标加提示)
miniswitchUI组件完成姚, 迷你下拉框(只有图标)
tooltipUI组件完成杨,气泡提示(有小三角,围绕元素的任意位置出现)
noticeUI组件完成田,信息提示(能并排出现)
doublelistUI组件完成姚,角色选择
datepickerUI组件完成田, 日期选框器
scrollbarUI组件完成杨, 滚动条
第2期
json功能组件完成钟,json2
cookie功能组件完成钟,cookie
store功能组件完成钟,本地储存
promise功能组件完成钟, es6的Promise组件
colorpickerUI组件完成王,颜色选择器
lazyload功能组件完成懒加载
editorUI组件富文本编辑器
menuUI组件完成多级菜单
treeUI组件开发中
waterfallUI组件瀑布流
buttonUI组件完成按钮
carouselUI组件完成单个照片http://owlgraphic.com/owlcarousel/demos/custom.html
ratingUI组件完成林 星级评分
uploaderUI组件完成 上传
previewUI组件完成钟, 图片预览
scrollspyUI组件完成杨, 滚动监听
imagecropperUI组件 图片剪切
validator功能组件完成 验证框架
如何使用OniUI ==========================
  • 将项目下载地本地
  • 如果有netBeans的同学,可以直接新建一个项目,将它放在里面,然后点击上方的运行(R)菜单,设置项目浏览器,然后在IDE左方找到index.html文件,右键运行
  • 其他同学可以到avalon项目,将它的server.exe(一个迷你的.Net服务器)文件拷过来,然后运行它,选中index.html打开

license ========================== MIT

如何打包

比如这是你们的业务页面

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="require.js" data-main="main-built"></script>
      
    </head>
    <body>
        <div ms-controller="demo">
            <input ms-widget="datepicker"/>
        </div>
    </body>
</html>

它依赖于require.js,data-main的值main-built是你们上线后的JS文件(这里去掉后缀名js) 有main-built.js就有main.js main.js是你的入口文件,作用类似于C语言的main函数

你们到avalon项目将里面的combo目录搬到oniui目录下,里面有你们需要的各种工具 比如我们的main.js是这样

require([
    "avalon",
    "domReady!",
    "./tab/avalon.tab",
    "./pager/avalon.pager",
    "./datepicker/avalon.datepicker"
], function (avalon) {
    avalon.log("domReady完成")
   var vm = avalon.define({$id: "demo"})
    avalon.scan(document.body, vm);
    //你们的业务代码
})

现在除了回调里面的代码是你们写的,其他都是oniui或avalon的文件,如果你们的同事又写一个业务代码,如

//aaa.js
require(["./dropdown/avalon.dropdown"], function(){
  //你们的业务代码
})

那么上面的代码就变成

require([
    "avalon",
    "domReady!",
    "./tab/avalon.tab",
    "./pager/avalon.pager",
    "./datepicker/avalon.datepicker"
    "./aaa"
], function (avalon) {
    avalon.log("domReady完成")
   var vm = avalon.define({$id: "demo"})
    avalon.scan(document.body, vm);
    //你们的业务代码
})

显然,avalon是对应avalon.js,但由于我们是使用requirejs,那么我们就要用到avalon.shim.js(这个版本没有自带加载器) “domReady!”我们可以在combo文件夹下找到domReady.js,这是一个requirejs插件。avalon.tab又是什么呢,聪明的你们应该能 猜到这应该是一个快捷方式,用于在某个地方对应我们的实际JS文件。

嗯,下面就是我们打包的重点,建议一个build.js

({
    baseUrl: "./", //找到main.js文件的目录
    paths: {
        avalon: "./avalon.shim",
        text: "./combo/text", //由于分居两个目录,因此路径都需要处理一下
        css: "./combo/css",
        "css-builder": "./combo/css-builder",
        "normalize": "./combo/normalize",
        domReady: "./combo/domReady",
    },
    //optimize: "none",//如果要调试就不压缩
    name: "main", //如果从哪一个文件开始合并
    out: "./main-built.js" //确定要生成的文件路径及名字
})

然后将combo文件的require.js与r.js,然后命令行node r.js -o build.js,就生成main-built.js文件 image

详细教程还是需要到官网去看

如何为OniUI贡献一套新的皮肤

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;
}

改成这些,重新编译一下就行了。

LOGO的来历

Oni日语为鬼, 可以美化一下叫英灵 在fate/Zero这部动画中, 最强大的英灵就是"金闪闪"吉尔伽美什 而吉尔伽美什对应的咒令就是 远坂时臣的那个

http://baike.baidu.com/view/2850010.htm http://baike.baidu.com/subview/666734/7383298.htm?fromtitle=FateZero&fromid=5097473&type=syn#6_4

https://github.com/jxnblk/loading http://touch.code.baidu.com/

移动端上的皮肤 http://goratchet.com/components/