EasyUI

来自W3C标准WEB前端专家DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!

EasyUI的组成

EasyUI.js核心文件
EasyUI.style样式对象
EasyUI.math.js数学对象
JSTweener.js缓动对象
EasyUI.color.js颜色对象
可扩展的附加组件

EasyUI API（DOM部分）

easyUI.fpbind(): 自执行方法,为Function.prototype添加bind方法，用于提供保持对象作用域的事件方法的邦定; 参数：无; 返回值：无
easyUI.IAHTML(): 自执行方法,为HTMLElement.prototype添加insertAdjacentHTML方法，用于为不支持insertAdjacentHTML方法的浏览器提供兼容; 参数：无; 返回值：无
easyUI.ajax.post(sUrl,sArgs,bAsync,fCallBack,fFailure): 使用xmlhttp发送post请求; 参数：sUrl 请求地址,sArgs 请求参数串,bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数; 返回值：
easyUI.ajax.get(sUrl,bAsync,fCallBack,fFailure): 使用xmlhttp发送get请求; 参数：sUrl 请求地址(包括请求参数),bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数; 返回值：
easyUI.ajax.xRequest(sUrl,sid): 发送跨域请求; 参数：sUrl 请求地址(包括请求参数),sid Script标签id(填写不重复的ID，如果不填写则自动生成一个随机ID); 返回值：Javascript脚本
easyUI.contains(node,childNode): 用于判断两个DOM节点之间是否存在包含与被包含的关系; 参数：DOM元素A,DOM元素B; 返回值：true|false
easyUI.clearTxtNode(domobj): 清除DOM元素内的#text节点; 参数：domobj; 返回值：
easyUI.clearOutLine(sTag,dModule): 清除指定的DOM元素(dModule)内所有tagName为sTag的虚线框; 参数：sTag 要清除虚线框的tagName，dModule 指定的DOM范围; 返回值：无
easyUI.checkForm(form,fooWarningMsg,foosuccess): 验证form表单; 为需要验证的输入项添加两个自定义属性作为判断的依据以及需要执行的验证; validate="这里输入验证方法，多种验证以分号隔开"; msg="这里输入验证不合格时提示的信息，与validate一一对应，如果信息数少于验证方法数量，则后面的验证不合格时将显示最后一条提示信息"; 验证方法:; isFilled(S) 必填，如果指定S，则如果内容等于S，都将无法通过; filter(S) 用于过滤特殊字符，如filter(^|$|'|%)，多个字符用|进行分隔; isNaN 如果填写，必须为非数字; isNumber 如果填写，必须为数字; isInt 如果填写，必须为整数; isEmail 如果填写，必须为Email格式; isEmailList 如果填写，必须为以分号;隔开的1个或多个Email格式; fileType(ext|ext|ext|...|ext) 如果填写，必须为指定扩展名ext列表内的文件类型; moreThan(N) 如果填写，必须为大于N的数; lessThan(N) 如果填写，必须为小于N的数; equalTo(N) 如果填写，必须为等于N的数; maxLength(N) 如果填写，最大长度不超过N; minLength(N) 如果填写，最小长度不小于N; sameValue(IDS) 指定N个表单元素的id，判断它们的值是否相同，如果不同，则不能通过，可用于密码与确认密码的验证; 详情请参见：easyValidate_demo.html; 参数：form 表单,fooWarningMsg 提示警告信息函数(形参为验证目标，警告信息)，如果没有指定该函数，将直接alert出警告信息,foosuccess 验证通过后要执行的函数(形参为验证目标); 返回值：true|false
easyUI.cssSelector(sSelector,dScope): 在指定的DOM节点dScope下按CSS2,CSS3选择器的定义去找出相关的DOM节点; 支持的选择器：; E[att^="val"],E[att$="val"],E[att*="val"],E[att~="val"],E[att|="val"],E[att!="val"],E[att="val"]; E:enabled,E:disabled,E:checked,E:not(s); + E.class; > E.class; E.class; E#id; E; 参数：sSelector CSS2 Selector可以通过逗号分隔多个选择器,dScope 指定要查找的DOM节点范围; 返回值：[DOM Collection]
easyUI.doWhileExist(sModule,oFunction): 指定的DOM节点存在才执行指定的函数; 参数：sModule 指定的DOM节点、DOM节点的ID、[object HTMLCollection]集合,oFunction 要运行的函数,参数为前面指定的DOM对象; 返回值：
easyUI.domEvent(): 为DOM节点或[object HTMLCollection]对象添加安全的事件绑定和解除的方法; 参数：无; 返回值：无; 用法：easyUI.domEvent.call(DOM节点或[object HTMLCollection]对象); 方法：DOM节点或[object HTMLCollection]对象.bindEvent(事件类型如'click'，前面不要写'on', 绑定的函数, capture); 方法：DOM节点或[object HTMLCollection]对象.removeEvent(事件类型如'click'，前面不要写'on', 绑定的函数, capture); 属性：DOM节点或[object HTMLCollection]对象.eventList Object，包含绑定的事件对应的函数列表，如：对象.eventList['click']可获取该对象click事件绑定的函数列表
easyUI.getArgs(): 获取URL参数; 参数：; 返回值：{argName:value,...,argName:value}
easyUI.getElementsBy(attribute,value,tagName,scopeDom,bcollection,binverse): 在指定的DOM节点scopeDom下查找属性名称为attribute，属性值为value的，tagName为tagName的DOM元素; 当attribute和value为空时，找出所有标签名为指定值tagName的那些元素; 当attribute最后一个字符为如下字符时，则按CSS2，3选择符意义进行匹配：^,$,*,~,|,!; 当bcollection为true或1时，则查找范围只针对scopeDOM那些元素,而不包括它们的子元素; 参数：attribute属性名称,value属性值,tagName标签名,scopeDom指定要查找的DOM节点范围,bcollection只在查找scopeDOM集合中查找,binverse返回与匹配值相反的结果; 返回值：[DOM Collection]，当binverse为真时，返回与匹配项相反的元素
easyUI.getmpb(domobj,stylename): 获取DOM元素margin,padding,border值; 参数：domobj,stylename[margin|padding|border]; 返回值：[iTop,iRight,iBottom,iLeft]
easyUI.getPosition(domobj): 取元素坐标，如元素或其上层元素设置position relative，应该getPosition(子元素).y-getPosition(父元素).y; 参数：DOM元素; 返回值：{x:value,y:value}
easyUI.getStyle(domobj,stylename): 获取元素当前样式; 参数：domobj,stylename; 返回值：cssStyle value
easyUI.getTarget(event): 获取事件触发对象; 参数：event; 返回值：DOM元素
easyUI.getWindowSize(): 获取窗体尺寸; 参数：无; 返回值：{width,height,scrollWidth,scrollHeight}
easyUI.queue(list,delay): 函数执行队列; 参数：list 函数队列数组,delay 每个函数运行后延迟时间; 返回值：
easyUI.setPosition(domobj,x,y): 为dom元素设置x坐标和y坐标; 参数：DOM元素,x,y; 返回值：
easyUI.stopEvent(event): 阻止事件冒泡和Event返回值; 参数：event; 返回值：
easyUI.toJSON(obj): 将JavaScript对象转换为JSON字符串; 参数：obj javascript对象; 返回值：JSON格式字符串

EasyUI API（Style部分）

easyUI.style.addClass(dModule,sclass): 为DOM元素添加指定的className; 参数：DOM元素,className; 返回值：
easyUI.style.addRule(stylesheet,cssSelector,cssValue): 添加新的css规则; 参数：stylesheet对象,css选择器,css内容; 返回值：
easyUI.style.getStyleSheet(n): 获取第n个styleSheet对象; 参数：整数值; 返回值：stylesheet对象
easyUI.style.newStyleSheet(): 创建新的styleSheet; 参数：无; 返回值：styleSheet对象
easyUI.style.removeClass(dModule,sclass): 为DOM元素移除指定的className; 参数：DOM元素,className; 返回值：

EasyUI API（Math部分）

easyUI.math.angle2Direct(angle): 角度转8方向; 参数：角度值; 返回值：0-7的8方向值
easyUI.math.bezier2(t,p0,p1,p2): 2次贝塞尔曲线; 参数：跟踪时间，起点，中间点，终点; 返回值：跟踪时间时所处在的点
easyUI.math.bezier3(t,p0,p1,p2,p3): 3次贝塞尔曲线; 参数：跟踪时间，起点，中间点，中间点2，终点; 返回值：跟踪时间时所处在的点
easyUI.math.bh_arc(x0,y0,r): Bresenham取圆各点坐标; 参数：起点坐标x0,y0,半径; 返回值：[[x,y]...[x,y]]
easyUI.math.bh_ellipse(px,py,rx,ry): Bresenham取椭圆各点坐标; 参数：起点坐标px,py,x轴半径rx,y轴半径ry; 返回值：[[x,y]...[x,y]]
easyUI.math.bh_line(x1,y1,x2,y2): Bresenham取直线各点坐标; 参数：起点坐标x1,y1,终点坐标x2,y2; 返回值：[[x,y]...[x,y]]
easyUI.math.getAngle(x0,y0,x1,y1): 取倾斜角; 参数：起点x,y,终点x,y; 返回值：角度值

JSTweener.addTween(obj,{time: 1,transition:'easeNone',delay:0,prefix:{},suffix:{},onStart:undefined,onStartParams:undefined,onUpdate:undefined,onUpdateParams:undefined,onComplete:undefined,onCompleteParams:undefined})

参数：DOM对象（或DOM STYLE对象），{时间，动画类型，事件，动画属性}

返回值：

用法举例：改变DOM对象的left

JSTweener.addTween(DomObj.style,{time:时间,transition:动画类型,onComplete:function(){alert('动作结束');},left:400});

动画事件

onStart
onUpdate
onComplete

动画类型 » 动画演示

easeNone
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeOutInCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeOutInQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeOutInQuint
easeInSine
easeOutSine
easeInOutSine
easeOutInSine
easeInExpo
easeOutExpo
easeInOutExpo
easeOutInExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeOutInCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeOutInElastic
easeInBack
easeOutBack
easeInOutBack
easeOutInBack
easeInBounce
easeOutBounce
easeInOutBounce
easeOutInBounce

EasyUI API（Color部分）

easyUI.color.hsb2rgb(h,s,b): HSB颜色模式转换为RGB颜色模式; 参数：h,s,b; 返回值：[r,g,b]
easyUI.color.rgb2hsb(r,g,b): RGB颜色模式转换为HSB颜色模式; 参数：r,g,b; 返回值：[h,s,b]
easyUI.color.rgb2hex(r,g,b): RGB颜色模式转换为HEX颜色模式; 参数：r,g,b; 返回值：hex value (eg.#xxxxxx)
easyUI.color.hex2rgb(hex): HEX颜色模式转换为RGB颜色模式; 参数：hex value (eg.#xxxxxx); 返回值：[r,g,b]
easyUI.color.isLightColor(r,g,b): 判断一个RGB颜色值是否为亮色; 参数：r,g,b; 返回值：true|false