Giter VIP home page Giter VIP logo

avalon.oniui's Introduction

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/

avalon.oniui's People

Contributors

0x333333 avatar babyfatty avatar bukede avatar canox3 avatar dragonwong avatar edwonlim avatar gogoyqj avatar ilife5 avatar jinwei233 avatar kxxoling avatar lb1064 avatar litor avatar lkiarest avatar michaeljayt avatar niuliwei avatar qinqingzhang avatar rubylouvre avatar scott-wong avatar shirlyfe avatar xuzicn avatar yuhaoju avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

avalon.oniui's Issues

Q1 目标

http://wiki.corp.qunar.com/pages/viewpage.action?pageId=42893679

考核点比例目标说明
数量35%11开发数量 与 投入数量 (转化率) 旧的适配器的升级
质量25%组件中的某个功能交付delay率,onion ui的迁移成本(即与旧接口的兼容性),BUG, 文档覆盖度, 性能,旧UI库的维护
推广20%4次组内培训
服务20%当天响应(决定能做或不能做),能的话最迟一星期内搞定响应速度

Validator组件需求

Validator组件需求

愿景

  • 功能覆盖已知的验证需求,对可预见性的验证需求扩展友好
  • 简单易用
  • 测试驱动

组件功能边界范围

  • form

image

form元素可作为验证的根节点,对属于它并且设置了验证属性的元素做验证。

  • group

表单控件可以成组进行验证, 常见的形式是依赖或是决策(可见下文)。

  • control

表单控件有多种类型,常见的有input,textarea,radio,checkbox,select

group类型

依赖

若表单控件A与表单控件B有如下的关系,则称B依赖A:

image

即,当B做验证时,要依赖A的取值,在真实场景中,在用户注册页面,有输入框:“密码”,“确认密码”,可称“确认密码”依赖“密码”,如:

image

决策

若表单控件A与表单控件B有如下关系,则称A决策B:

image

即,当A的取值改变时,将改变B的验证规则。在真实场景中,在用户注册页面,有选项卡“电话”,“邮箱”,有输入框,当“电话/邮箱”选项卡进行切换时,将改变输入框的验证规则,可称“电话/邮箱”决策,如:

image

依赖与决策的区别是,决策会改变元素的验证规则,而依赖只改变验证结果。

spinner

<input ms-duplex="p1" ms-widget="spinner" ms-min='8' ms-max='99' />

spinner组件可以在dom中指定最大最小值么?

组件开发情况一览表

onition 的重构(重点,完成当中的三分之一)

颜色选择器 colorpicker
日历 四种 JQ式的双日历, 迷你日历, 单日历, my97风格

下拉框 (先模拟bootstrap的, 以后搞无级分级的,会根据边沿调整位置)

轮播 (163风格的)
http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/
滚动监听
上传组件
iframe高度自适应组件
验证框架 (基于jvalidator重构)

富文本编辑器(优先级排后)

图标字体库
nodejs <--> AMD 转换工具 (优先级高)
参考
https://github.com/anodynos/uRequire
https://github.com/yinso/amdee
https://github.com/thlorenz/browserify-ftw

手机上常用框架 动画 https://github.com/visionmedia/move.js 滚动条https://github.com/cubiq/iscroll 点击https://github.com/ftlabs/fastclick 切换图片与内容 https://github.com/thebird/Swipe
totoro测试平台的搭建 (avalon API的测试与onition)

avalon在公司的培训(当然让组员去干)

fekit的重构(待完成fekit,grunt与gulpjs的源码解读后动工)

http://2014.html5dw.com/topic售签

fontawesome.io icon字体 貌似只有taobao和腾讯有一个平台,大公司都注重工具盒组件开发的

http://fex.baidu.com/blog/2014/04/fis-static-resource-management/

模拟这个 http://ux.etao.com/page2012 做展示页面

JSCritic - JS代码质量检测工具 http://jscritic.com/

富文本编辑器中粘贴图片时,chrome可以得到e.clipBoardData.items并从中获取二进制数据,以便ajax上传到后台,实现粘贴图片的功能。firefox中items为undefined,可选的方案:1将base64原样上传到后台进行文件存储替换,2将内容清空,待粘贴完毕后取图片src,再恢复现场http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser

简历中一些字眼的能力评级

级别 评级 描述
不了解 D 没有听说过,没有用过
了解 C 曾经在别人的辅导下使用过,记得其一点API与参数
熟悉/熟练 B 独立地使用此技术解决过实际问题,能立即说出其半数API
精通 A 了解此技术一些偏门用法,对其API了如指掌,了解其优缺点与适应范围,并能辅导他人

SPA

SPA很重要一个需要解决的问题就是视图的嵌套和视图的组合。

【grid】如何设计获得一行的高

 var rtag = /<\w+\b(?:(["'])[^"]*?(\1)|[^>])*>/i
            function getTableHeight(table, rowNumbers) {
                var tableStart = table.outerHTML.match(rtag)[0]
                var tbody = table.getElementsByTagName("tbody")[0]
                var tbodyStart = tbody.outerHTML.match(rtag)[0]
                var tr = tbody.getElementsByTagName("tr")[0]
                var trStart = tr.outerHTML.match(rtag)[0]
                var td = tr.cells[0]
                var tdStart = td.outerHTML.match(rtag)[0]
                var tdEnd = "</" + td.tagName.toLowerCase() + ">"
                var start = tableStart + tbodyStart + "\n"
                var end = "</tbody></table>"
                var row = trStart + tdStart + "&nbsp;" + tdEnd + "</tr>"
                var html = ""
                for (var i = 0; i < rowNumbers; i++) {
                    html += row + "\n"
                }
                html = start + html + end
                var div = document.createElement("div")
                div.innerHTML = html
                var newTable = div.getElementsByTagName("*")[0]
                newTable.style.position = "absolute"
                newTable.style.visibility = "hidden"
                table.parentNode.appendChild(newTable)
                var ret = newTable.offsetHeight
                table.parentNode.removeChild(newTable)
                return ret
            }
var height = getTableHeight(table, 30)
var rowHeight = ( height -1 ) / 30

datepicker的容器ms-if切换,导致datepicker不能正常从隐藏到显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>datepicker demo </title>
<link type="text/css" rel="stylesheet"  href="../highlight/shCore.css"/>
<link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"/>
<script src="../highlight/shCore.js"></script>
<script src="../avalon.js"></script>
</head>
<body>
    <div class="demo-show" ms-controller="demo">
            <div ms-if="wrap">
                <input ms-widget="datepicker"/>
            </div>
            <button type="button" ms-click="clickToggleWrap">切换容器显示隐藏</button>

            {{wrap}}

            <script> 
                require("datepicker/avalon.datepicker", function(avalon) {
                    var model = avalon.define("demo", function(vm) {
                        vm.wrap = true;
                        vm.clickToggleWrap = function(){
                            model.wrap = !model.wrap;
                        }
                    })
                    avalon.scan();
                })
            </script>
        </div>
</body>
</html>

描述:datepicker外层ms-if变量wrap。
复现步骤:当wrap从false变为true时,datepicker不能显示
期望:datepicker可以随外层容器的显示隐藏,正常显示隐藏

谢谢

CSS框架的设计

先定义一个英文字体再定义中文字体,这是因为英文字体中一般不含有中文,执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体“微软雅黑”。比如,可以这样来定义WordPress中的中英文字体:

body{
    font-family: Arial,"微软雅黑";
}

*需要注意的是,这样的做法对符合网页规范的浏览器比如Firefox虽然有效,但对IE6、IE7会导致中文字体设定无效,也就是说,这样的办法对于微软的IE系列来说等于不设置中文字体,而只是采用系统默认的“宋体”来显示网页内容。

也可以指定两个class分别分配给中文和英文内容,这样就可以对IE也实现如上的字体效果,并可以为中英文的显示进行更详细的定制(比如字号等属性),但缺点是这样的做法比较繁杂,使用上不太方便,特别是对博客这样的中英文混编的文章内容来说更是麻烦。

progressbar修改意见

cirecleR --> cirecleRadius,
success --> readyState
right的意义不明
vm.full 的意义不明
vm.d 的意义不明

前端代码异常监控

http://rapheal.sinaapp.com/2014/11/06/javascript-error-monitor/

window.onerror = function(msg,url,line,col,error){
    //没有URL不上报!上报也不知道错误
    if (msg != "Script error." && !url){
        return true;
    }
    //采用异步的方式
    //我遇到过在window.onunload进行ajax的堵塞上报
    //由于客户端强制关闭webview导致这次堵塞上报有Network Error
    //我猜测这里window.onerror的执行流在关闭前是必然执行的
    //而离开文章之后的上报对于业务来说是可丢失的
    //所以我把这里的执行流放到异步事件去执行
    //脚本的异常数降低了10倍
    setTimeout(function(){
        var data = {};
        //不一定所有浏览器都支持col参数
        col = col || (window.event && window.event.errorCharacter) || 0;

        data.url = url;
        data.line = line;
        data.col = col;
        if (!!error && !!error.stack){
            //如果浏览器有堆栈信息
            //直接使用
            data.msg = error.stack.toString();
        }else if (!!arguments.callee){
            //尝试通过callee拿堆栈信息
            var ext = [];
            var f = arguments.callee.caller, c = 3;
            //这里只拿三层堆栈信息
            while (f && (--c>0)) {
               ext.push(f.toString());
               if (f  === f.caller) {
                    break;//如果有环
               }
               f = f.caller;
            }
            ext = ext.join(",");
            data.msg = error.stack.toString();
        }
        //把data上报到后台!
    },0);

    return true;
};

avalon.daterangepicker.ex6.html

这个例子中的日期范围框setDate,当点击日历的时候可以选择开始日期和结束日期,但是当点击开始和结束之后,确定,却发现开始日期更新了,结束日期显示的还是上一次的日期,并没有更新,要想改变,需要再次点开日历 只点击结束日历 选择一个日期 确定之后 结束日期才会更新为选中的日期。

DatePicker的滑动条问题

(2014-11-25,avalon和OniUI均采用今天最新代码,OSX平台,chrome浏览器)
发现avalon.moder.js和OniUI中的datepicker合作使用时,选取设定时间选项,滑动条不改变。
同版本avalon.js不会出现这个问题。同样环境下的safari浏览器不会出现这个问题。

spinner max,min不可以动态赋值么?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>spinner demo </title>
<script src="../avalon.js"></script>
</head>
<body>
        <div ms-controller="spinner">
            <fieldset>
                <legend>spinner</legend>
                    <input ms-repeat-el="list" ms-duplex="el.value" ms-widget="spinner" ms-data-spinner-min="el.min" data-spinner-max="8"/>
            </fieldset>
            <script>
                require(["spinner/avalon.spinner"], function(avalon) {
                    avalon.define('spinner', function(vm) {
                        vm.list = [{value:5,min:3,max:6},{value:2,min:3,max:8}]
                    });
                    avalon.scan();
                })
            </script>
        </div>
</body>
</html>

avalon.coupledatepicker.ex3.html

其中的双日历框,禁用双日历框切换禁用时好用,双日历框,禁用双日历框禁用组件的时候就会报错(Uncaught TypeError: undefined is not a function ),代码如下:
vm.toggleDisabled = function() {
vm.disabled = !vm.disabled;//好用的
}
vm.setDisabled = function() {//不好用 禁用失败而且还报错
var coupledatepickerVM = avalon.vmodels.a;
coupledatepickerVM.setDisabled(true);
}

Dialog组件中关于配置项继承的问题

想参考写个dialog,结果发现这里
https://github.com/RubyLouvre/avalon.oniui/blob/master/dialog/avalon.dialog.js#L24

if (len > 1) {
    var dialogOpts = vmodels[len-1][data.value.split(',')[2]];
    avalon.mix(options, dialogOpts);
}

不用考虑这种情况吧,既然avalon.js本身并没有提供组件配置项的继承机制,具体的组件构建也不应考虑,可以通过嵌套ms-controller解决嘛,不然每个组件构建岂不是都要考虑嵌套情况,而且万一里面有嵌套ms-controller,不就和就近取配置项的原则冲突了吗

通过JS触发keyup事件

            function fireKeyUp(elem, keyCode) {
                //https://gist.github.com/termi/4654819
                var oEvent
                try {
                    // FF
                    oEvent = document.createEvent("KeyEvents")//firefox 
                    oEvent.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, keyCode, 0)
                } catch (ex) {
                    try {
                        //http://www.w3.org/TR/DOM-Level-3-Events/#idl-interface-KeyboardEvent-initializers
                        oEvent = document.createEvent("KeyboardEvent")
                        Object.defineProperty(oEvent, 'keyCode', {
                            get: function() {
                                return this.keyCodeVal;
                            }
                        });
                        Object.defineProperty(oEvent, 'which', {
                            get: function() {
                                return this.keyCodeVal;
                            }
                        });
                        oEvent.initKeyboardEvent("keyup", true, true, document.defaultView, false, false, false, false, keyCode, keyCode)
                        oEvent.keyCodeVal = keyCode
                    } catch (ex3) {
                    }
                }
                if (oEvent) {
                    elem.dispatchEvent(oEvent)
                } else if (document.createEventObject) {
                    //http://stackoverflow.com/questions/7518664/how-can-i-generate-a-keyup-event-with-a-specific-keycode-in-ie8
                    oEvent = document.createEventObject("KeyboardEvent");
                    oEvent.keyCode = keyCode;
                    elem.fireEvent("onkeyup", oEvent);
                }
            }

分页组件bug

当刷新页面之后,分页默认在第1页,然后点击跳转台“确定”按钮,页码变为0;
截图如下:
qq 20140826150739

qq 20140826150554

补充:
在没使用跳转台前提下,先将页码调到某一页(用下一页等方式),然后点击“确定”都会变为0;
截图如下:
qq 20140826152311
qq 20140826152343

下半年要做的事

mmAnimate动画引擎,基于Promise完成过半, 以后会设计对应指令
mmState 基于状态机的路由系统钟,杨 95%
avalon移动套装 avalon.touch, avalon.gesture, avalon.shake, avalon.iscroll)杨乾军 基本完成, 现在是直接使用avalon.mobile
avalon ms-duplex2.0 像JAVA的struts框架那样,可以添加N个拦截图,进行数据格式化,验证,光标引导,数据类型转换钟 avalon1.3.9已经集成
avalon 视频教材两套 陆 基础教程已经完成
avalon验证框架 基于avalon ms-duplex2.0 钟, 完成
avalon树组件 杨, 完成
注释转文档工具现在可以处理Oniui的JS文件 钟,李, 完成
avalon.maskms-duplex2.0的一个扩展功能,光标引导用户转入,格式化处理输出 完成
avalon.upload现在只支持图片上传,需要支持更多格式王,徐, 开发中
度假,目的地事业部的落地工作完成
页面avalon的VM树 数据化展示工具田,开发中

页面标签写法错误

在avalon.resizable.doc.html页面中的第97接口方法与固有属性,这里应该是,在第103行startResizeWidth/startResizeHeight</td0 > 被调整大小的元素最开始时的宽高中的“</td0 > ”应该写成0

avalon.datepicker.ex9.html

1.这里的切换日历的禁用与否,点击右侧的按钮切换禁用,发现并没有效果,
vm.toggleDisabled = function() {
console.log(vm.disabled);//这里想打印出来 但是无论如何点击,都打印true
var datepicker = avalon.vmodels.a;
datepicker.setDisabled(!model.disabled);
model.disabled = !model.disabled;
}
并且每次打印true之后都会报错 Uncaught TypeError: undefined is not a function
2./avalon.datepicker.ex9.html中的手动输入日期使输入域失去焦点,看看date的变化例子中,当输入2014-00-00失去焦点后会显示2013-11-30 而在这之后在输入所有的无效不符合日期格式的时候都会显示2013-11-30 这时在输入2013-00-00 失去焦点后会变成2012-11-30 如此可以循环下去

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.