easyUI_API

EasyUI

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

EasyUI的组成













核心文件

样式对象

数学对象

缓动对象

颜色对象

可扩展的附加组件

EasyUI API（DOM部分）

()

自执行方法,为ype添加bind方法，用于提供保持对象作用域的事件方法的邦定

参数：无

返回值：无

()

自执行方法,为ype添加insertAdjacentHTML方法，用于为不支持insertAdjacentHTML方法的浏览器提供兼容

参数：无

返回值：无

(sUrl,sArgs,bAsync,fCallBack,fFailure)

使用xmlhttp发送post请求

参数：sUrl 请求地址,sArgs 请求参数串,bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数

返回值：

(sUrl,bAsync,fCallBack,fFailure)

使用xmlhttp发送get请求

参数：sUrl 请求地址(包括请求参数),bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数

返回值：

st(sUrl,sid)

发送跨域请求

参数：sUrl 请求地址(包括请求参数),sid Script标签id(填写不重复的ID，如果不填写则自动生成一个随机ID)

返回值：Javascript脚本

ns(node,childNode)

用于判断两个DOM节点之间是否存在包含与被包含的关系

参数：DOM元素A,DOM元素B

返回值：true|false

xtNode(domobj)

清除DOM元素内的#text节点

参数：domobj

返回值：

utLine(sTag,dModule)

清除指定的DOM元素(dModule)内所有tagName为sTag的虚线框

参数：sTag 要清除虚线框的tagName，dModule 指定的DOM范围

返回值：无

orm(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_

参数：form 表单,fooWarningMsg 提示警告信息函数(形参为验证目标，警告信息)，如果没有指定该函数，将直接alert出警告信息,foosuccess 验证通过后要执行的函数(形参为验证目标)

返回值：true|false

ector(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#id

E

参数：sSelector CSS2 Selector可以通过逗号分隔多个选择器,dScope 指定要查找的DOM节点范围

返回值：[DOM Collection]

为跨模组交互事件解耦，提供事件注册，触发方法

er(sTrigger,foo)

参数：trigger名称,处理方法

r(sTrigger,args0,args1,...)

参数：trigger名称,供处理方法使用的其他任意参数

eExist(sModule,oFunction)

指定的DOM节点存在才执行指定的函数

参数：sModule 指定的DOM节点、DOM节点的ID、[object HTMLCollection]集合,oFunction 要运行的函数,参数为前面指定的DOM对象

返回值：

nt()

为DOM节点或[object HTMLCollection]对象添加安全的事件绑定和解除的方法

参数：无

返回值：无

用法：(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事件绑定的函数列表

s()

获取URL参数

参数：

返回值：{argName:value,...,argName:value}

mentsBy(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为真时，返回与匹配项相反的元素

ition(domobj)

取元素坐标，如元素或其上层元素设置position relative，应该getPosition(子元素).y-getPosition(父元素).y

参数：DOM元素

返回值：{x:value,y:value}

le(domobj,stylename)

获取元素当前样式

参数：domobj,stylename

返回值：cssStyle value

get(event)

获取事件触发对象

参数：event

返回值：DOM元素

dowSize()

获取窗体尺寸

参数：无

返回值：{width,height,scrollWidth,scrollHeight}

()

最大化浏览器窗口

参数：

返回值：

(list,delay)

函数执行队列

参数：list 函数队列数组,delay 每个函数运行后延迟时间

返回值：

ition(domobj,x,y)

为dom元素设置x坐标和y坐标

参数：DOM元素,x,y

返回值：

ent(event)

阻止事件冒泡和Event返回值

参数：event

返回值：

(obj)

将JavaScript对象转换为JSON字符串

参数：obj javascript对象

返回值：JSON格式字符串

EasyUI API（Style部分）

ss(dObj,sClassName)

添加新的className

参数：DOM节点对象,className

返回值：

e(stylesheet,cssSelector,cssValue)

添加新的css规则

参数：stylesheet对象,css选择器,css内容

返回值：

leSheet(n)

获取第n个styleSheet对象

参数：整数值

返回值：stylesheet对象

leSheet()

创建新的styleSheet

参数：无

返回值：styleSheet对象

Class(dObj,sClassName)

移除指定的className

参数：DOM节点对象,className

返回值：

EasyUI API（Math部分）

le(x0,y0,x1,y1)

取倾斜角

参数：起点x,y,终点x,y

返回值：角度值

2Direct(angle)

角度转8方向

参数：角度值

返回值：0-7的8方向值

2(t,p0,p1,p2)

2次贝塞尔曲线

参数：跟踪时间，起点，中间点，终点

返回值：跟踪时间时所处在的点

3(t,p0,p1,p2,p3)

3次贝塞尔曲线

参数：跟踪时间，起点，中间点，中间点2，终点

返回值：跟踪时间时所处在的点

JSTweener（动画部分）

Author:Yuichi Tateno

Copyright (c) 2007 Yuichi Tateno.

en(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

en(,{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部分）

2rgb(h,s,b)

HSB颜色模式转换为RGB颜色模式

参数：h,s,b

返回值：[r,g,b]

2hsb(r,g,b)

RGB颜色模式转换为HSB颜色模式

参数：r,g,b

返回值：[h,s,b]

2hex(r,g,b)

RGB颜色模式转换为HEX颜色模式

参数：r,g,b

返回值：hex value (eg.#xxxxxx)

2rgb(hex)

HEX颜色模式转换为RGB颜色模式

参数：hex value (eg.#xxxxxx)

返回值：[r,g,b]

tColor(r,g,b)

判断一个RGB颜色值是否为亮色

参数：r,g,b

返回值：true|false

基于EasyUI开发的可扩展附加组件

Easy Template（模板引擎）(New!) (EasyTemplate演示)

Easy Slider（滑块） (EasySlider演示)

WEB取色（颜色选择器）Easy Color Picker类 (Easy Color Picker演示)

拖拽类EasyDragDrop，弹出层基类EasyLayer，遮罩类EasyMask，Popup类

(Ajax Treeview) 功能强大的可静态渲染列表或异步加载数据的前端JavaScript树 (dhATV演示)

(Easy Calendar) 简单易用,可以自由配置的JavaScript日历 (EasyCalendar演示)

(Easy Rich Text Editor) 轻量级富文本编辑器JavaScript Rich Editor (easyRT演示)

Easy Validate 简单易用的JavaScript表单验证类

(Magic Switch tabStrip) 功能强大的多用途万能切换效果控件，可实现任何形式的TabStrip、AdShow、Slide等等切换效果 (MagicSwitch演示)