- Notifications
You must be signed in to change notification settings - Fork0
Tony-87/avalon.oniui
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
*注意：avalon1.5及以上版本不支持oniui，请使用1.4.或以下版本的avalon
基于avalon的组件库,由去哪儿网前端架构组倾力打造
当前进度表
- 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组件 | 完成 | 按钮 |
| carousel | UI组件 | 完成 | 单个照片http://owlgraphic.com/owlcarousel/demos/custom.html |
| rating | UI组件 | 完成 | 林 星级评分 |
| uploader | UI组件 | 完成 | 上传 |
| preview | UI组件 | 完成 | 钟， 图片预览 |
| scrollspy | UI组件 | 完成 | 杨， 滚动监听 |
| imagecropper | UI组件 | 图片剪切 | |
| validator | 功能组件 | 完成 | 验证框架 |
- 将项目下载地本地
- 如果有netBeans的同学，可以直接新建一个项目，将它放在里面，然后点击上方的运行（R）菜单，设置项目浏览器，然后在IDE左方找到index.html文件，右键运行
- 其他同学可以到avalon项目，将它的server.exe（一个迷你的.Net服务器）文件拷过来，然后运行它，选中index.html打开
比如这是你们的业务页面
<!DOCTYPE html><html><head><title>TODO supply a title</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="require.js"data-main="main-built"></script></head><body><divms-controller="demo"><inputms-widget="datepicker"/></div></body></html>
它依赖于require.js，data-main的值main-built是你们上线后的JS文件（这里去掉后缀名js）有main-built.js就有main.jsmain.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完成")varvm=avalon.define({$id:"demo"})avalon.scan(document.body,vm);//你们的业务代码})
现在除了回调里面的代码是你们写的，其他都是oniui或avalon的文件，如果你们的同事又写一个业务代码，如
//aaa.jsrequire(["./dropdown/avalon.dropdown"],function(){//你们的业务代码})
那么上面的代码就变成
require(["avalon","domReady!","./tab/avalon.tab","./pager/avalon.pager","./datepicker/avalon.datepicker""./aaa"],function(avalon){avalon.log("domReady完成")varvm=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文件
详细教程还是需要到官网去看
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;}
改成这些，重新编译一下就行了。
Oni日语为鬼, 可以美化一下叫英灵在fate/Zero这部动画中, 最强大的英灵就是"金闪闪"吉尔伽美什而吉尔伽美什对应的咒令就是 远坂时臣的那个
%2fthumb.jpg&f=jpg&w=240)
https://github.com/jxnblk/loadinghttp://touch.code.baidu.com/
About
基于avalon的组件库
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- JavaScript64.0%
- HTML30.0%
- CSS5.8%
- Other0.2%