avalon.oniui

KO | EN

gitlite — search

#python #hacktoberfest #ai #llm #golang #android #machine-learning #docker #windows #awesome #kubernetes #security #mcp #open-source

(★ 411)

基于avalon的组件库

avalon.oniui Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

avalon.oniui
==========================

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

基于avalon的组件库,由<a href="http://ued.qunar.com/">去哪儿网</a>前端架构组倾力打造

<p>当前进度表</p>
<ul>                                       
    <li>UI组件，有界面的，通过ms-widget调用</li>
    <li>功能组件，没有界面的，添加辅助性功能的 </li>
</ul>
<table border="1" width="90%">
    <tr>
        <th>名称</th><th>类别</th><th>状态</th><th>说明</th>
    </tr>
    <tr>
        <td colspan=4>第1期</td>
    </tr>
    <tr>
        <td>hotkeys</td><td>功能组件</td><td>完成</td><td>钟，组合键</td>
    </tr>
    <tr>
        <td>position</td><td>功能组件</td><td>完成</td><td>杨，定位</td>
    </tr>
    <tr>
        <td>draggable</td><td>功能组件</td><td>完成</td><td>钟，拖拽</td>
    </tr>
    <tr>
        <td>resizable</td><td>功能组件</td><td>完成</td><td>钟，缩放</td>
    </tr>
    <tr>
        <td>checkboxlist</td><td>UI组件</td><td>完成</td><td>田，全选非全选</td>
    </tr>
    <tr>
        <td>textbox+suggest</td><td>UI组件</td><td>完成</td><td>田，文本域及智能提示</td>
    </tr>
    <tr>
        <td>at</td><td>UI组件</td><td>完成</td><td>钟，@提示列表</td>
    </tr>
    <tr>
        <td>pager</td><td>UI组件</td><td>完成</td><td>钟，分页栏</td>
    </tr>
    <tr>
        <td>dialog</td><td>UI组件</td><td>完成</td><td>田，弹出层 </td>
    </tr>
    <tr>
        <td>grid</td><td>UI组件</td><td>完成</td><td>钟， 表格</td>
    </tr>
    <tr>
        <td>according</td><td>UI组件</td><td>完成</td><td>田， 手风琴</td>
    </tr>
    <tr>
        <td>slider</td><td>UI组件</td><td>完成</td><td>田，滑动条 </td>
    </tr>
    <tr>
        <td>flipswitch</td><td>UI组件</td><td>完成</td><td>杨， 拖动切换 </td>
    </tr>
    <tr>
        <td>tabs</td><td>UI组件</td><td>完成</td><td>杨， 切换卡 </td>
    </tr>
    <tr>
        <td>spinner</td><td>UI组件</td><td>完成</td><td>田，数字输入框 </td>
    </tr>
    <tr>
        <td>progressbar</td><td>UI组件</td><td>完成</td><td>杨， 进度条</td>
    </tr>
    <tr>
        <td>dropdown</td><td>UI组件</td><td>完成</td><td>姚，下拉框</td>
    </tr>   
    <tr>
        <td>switchdropdown</td><td>UI组件</td><td>完成</td><td>姚，切换下拉框(图标加提示)</td>
    </tr>
    <tr>
        <td>miniswitch</td><td>UI组件</td><td>完成</td><td>姚， 迷你下拉框(只有图标)</td>
    </tr>
    <tr>
        <td>tooltip</td><td>UI组件</td><td>完成</td><td>杨，气泡提示（有小三角，围绕元素的任意位置出现） </td>
    </tr>
    <tr>
        <td>notice</td><td>UI组件</td><td>完成</td><td>田，信息提示（能并排出现）</td>
    </tr>
    <tr>
        <td>doublelist</td><td>UI组件</td><td>完成</td><td>姚，角色选择</td>
    </tr>
    <tr>
        <td>datepicker</td><td>UI组件</td><td>完成</td><td>田， 日期选框器</td>
    </tr>
    <tr>
        <td>scrollbar</td><td>UI组件</td><td>完成</td><td>杨， 滚动条</td>
    </tr>
    <tr>
        <td colspan=4>第2期</td>
    </tr>
   <tr>
        <td>json</td><td>功能组件</td><td>完成</td><td>钟，json2</td>
    </tr>
    <tr>
        <td>cookie</td><td>功能组件</td><td>完成</td><td>钟，cookie</td>
    </tr>
    <tr>
        <td>store</td><td>功能组件</td><td>完成</td><td>钟，本地储存</td>
    </tr>
    <tr>
        <td>promise</td><td>功能组件</td><td>完成</td><td>钟, es6的Promise组件</td>
    </tr>
    <tr>
        <td>colorpicker</td><td>UI组件</td><td>完成</td><td>王，颜色选择器</td>
    </tr>
    <tr>
        <td>lazyload</td><td>功能组件</td><td>完成</td><td>懒加载</td>
    </tr>
    <tr>
        <td>editor</td><td>UI组件</td><td></td><td>富文本编辑器</td>
    </tr>
    <tr>
        <td>menu</td><td>UI组件</td><td>完成</td><td>多级菜单</td>
    </tr>
    <tr>
        <td>tree</td><td>UI组件</td><td>开发中</td><td>树</td>
    </tr>
    <tr>
        <td>waterfall</td><td>UI组件</td><td></td><td>瀑布流</td>
    </tr>
    <tr>
        <td> button</td><td>UI组件</td><td>完成</td><td>按钮</td>
    </tr>
    <tr>
        <td> carousel</td><td>UI组件</td><td>完成</td><td>单个照片http://owlgraphic.com/owlcarousel/demos/custom.html</td>
    </tr>
    <tr>
        <td> rating</td><td>UI组件</td><td>完成</td><td>林 星级评分</td>
    </tr>
    <tr>
        <td> uploader</td><td>UI组件</td><td>完成</td><td> 上传</td>
    </tr>
    <tr>
        <td>preview</td><td>UI组件</td><td>完成</td><td>钟， 图片预览</td>
    </tr>  
    <tr>
        <td>scrollspy</td><td>UI组件</td><td>完成</td><td>杨， 滚动监听</td>
    </tr>
    <tr>
        <td> imagecropper</td><td>UI组件</td><td></td><td> 图片剪切</td>
    </tr>
    <tr>
        <td> validator</td><td>功能组件</td><td>完成</td><td> 验证框架</td>
    </tr>
</table>
如何使用OniUI
==========================
<ul>
   <li>将项目下载地本地</li>
   <li>如果有netBeans的同学，可以直接新建一个项目，将它放在里面，然后点击上方的运行（R）菜单，设置项目浏览器，然后在IDE左方找到index.html文件，右键运行</li>
   <li>其他同学可以到<a href="https://github.com/RubyLouvre/avalon">avalon项目</a>，将它的server.exe（一个迷你的.Net服务器）文件拷过来，然后运行它，选中index.html打开</li>
</ul>
<img src="https://raw.githubusercontent.com/RubyLouvre/avalon.oniui/master/style/homepage.jpg"/>
license
==========================
MIT

如何打包
==========================
比如这是你们的业务页面
```html
<!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目录](https://github.com/RubyLouvre/avalon/tree/master/combo)搬到oniui目录下，里面有你们需要的各种工具
比如我们的main.js是这样
```javascript
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的文件，如果你们的同事又写一个业务代码，如
```javascript
//aaa.js
require(["./dropdown/avalon.dropdown"], function(){
  //你们的业务代码
})
```
那么上面的代码就变成
```javascript
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](https://github.com/RubyLouvre/avalon/tree/master/dist)(这个版本没有自带加载器)
“domReady!”我们可以在combo文件夹下找到domReady.js，这是一个requirejs插件。avalon.tab又是什么呢，聪明的你们应该能
猜到这应该是一个快捷方式，用于在某个地方对应我们的实际JS文件。

嗯，下面就是我们打包的重点，建议一个build.js
```javascript
({
    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](https://cloud.githubusercontent.com/assets/190846/8647486/eb41a380-298a-11e5-9ed3-4c6b746ca0d4.png)

详细教程还是需要到[官网](http://avalonjs.github.io/#zh/engineering/loader.rjs.html)去看

如何为OniUI贡献一套新的皮肤
==========================
<b>chameleon</b>是OniUI的皮肤生成系统,基于sass的compass框架改写而成.
直接路径下有oniui-theme.scss,oniui-common.scss这两个文件, 
其中oniui-common.scss会生成oniui-common.css,这个文件所有UI组件都应该引用,如simplegrid.js就是这样引用
```javascript

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里开头就是这样写的:
```css
@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就可以<b>修改</b>两处实现全库的换肤功能
第一处位于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文件就行了

我们再看一下这皮肤里面的规则是怎么搞的
```csss
@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文件中，如
```scss
@if($oinui-theme == smoothness){
    $ui-state-hover-background-color:#E8F5FD;
}
```
改成这些，重新编译一下就行了。

LOGO的来历
==========================
Oni日语为鬼, 可以美化一下叫英灵
在fate/Zero这部动画中, 最强大的英灵就是"金闪闪"吉尔伽美什
而吉尔伽美什对应的咒令就是 远坂时臣的那个
<div><img src="http://i.imgur.com/jezsx.jpg"/></div>
<div><img  src="http://i-7.vcimg.com/crop/26fb9dd7fa1a77169a869b31df5b576f12700(280x)/thumb.jpg"/></div>
<div><a href="<div><a href=""><img width=400 height=300 src="http://www.fate-zero.jp/talksession/img/talk_bg-archer.jpg"/></a></div>
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/

avalon.oniui

avalon.oniui Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

avalon.oniui

avalon.oniui Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README