WEB前端交互快速开发指南-EasyUI使用介绍.ppt

文档介绍：WEB前端交互快速开发指南
EasyUI使用介绍(dh20156风之石)
WEB页面中常见的功能形式
切换:


表单验证
树状展示(此功能多见于WEB管理员页面)
AJAX(提交数据、获取数据)
广告轮显(滤镜切换或滚动切换)
TabStrip(导航菜单、内容切换等等)
当然,plete、RichEditor,我们暂不做讨论。
如果我们对上述常用的功能都能够迅速处理,那前端开发部分的工作就只剩页面布局了,那将会非常轻松(就是累点^_^)。
结构与功能分离
在动手之前,我们需要先制定一套规则,用以保证WEB结构与功能代码分离!
不要写任何的inline script,所有事件都需要通过脚本抓取DOM元素(通过id或class或其他attribute进行抓取)后再进行绑定!
不被支持的写法:<button onclick=“alert(0);”>alert 0</button>
推荐的方式:
<button>alert 0</button>
<script type=“text/javascript”>
var dbtns = (‘button’);
var il = ;
var dbtn = il&&dbtns[0];
if(dbtn){ = function(){alert(0)};}
</script>
结构与功能分离
头部
主内容区域
侧栏区域
页脚
功能按所在页面区域进行划分,如果头部有交互功能,则可以抓取头部进行绑定,其他部分类似!
按Y!的说法就是按模组进行划分,这真的是很值得借鉴的数据与表现分离模式!
头部id=“header”<button class=“btn”>alert 0</button>
主内容区域
侧栏区域
页脚
假设id为header的头部有一样式名为btn的按钮需要绑定事件!
我们用EasyUI的写法:
var fooheader = function(domobj){//头部功能都在此函数体内定义
if(!domobj){return;}
var dbtns = (‘class’,’btn’,’button’,domobj);
var l = ;
if(!l){return;}
dbtns[0].onclick = function(){alert(0);};
};
(function(){
([//执行队列
function(){(‘header’,fooheader);}
],1);
})();
相信熟悉YUI用法的朋友一定很容易上手!^_^
EasyUI 概述
作者:杜欢(dh20156风之石)
风格:简约
功能:相对齐全
扩展:方便
使用:简单
大小:,JS Minifier处理后为7K
组成: + 扩展的附加组件
官网:/easyui/
EasyUI Core API
()
自执行方法,,用于提供保持对象作用域的事件方法的邦定
参数:无
返回值:无
()
自执行方法,,用于为不支持insertAdjacentHTML方法的浏览器提供兼容
参数:无
返回值:无
(node,childNode)
用于判断两个DOM节点之间是否存在包含与被包含的关系
参数:DOM元素A,DOM元素B
返回值:true|false
(attribute,value,tagName,scopeDom)
在指定的DOM节点scopeDom下查找属性名称为attribute,属性值为value的,tagName为tagName的DOM元素
参数:attribute属性名称,属性值value,DOM元素tagName,指定要查找的DOM节点范围scopeDom
返回值:DOM Collection
(domobj)
取元素坐标,如元素或其上层元素设置position relative,应该getPosition(子元素).y-getPosition(父元素).y
参数:DOM元素
返回值:{x:value,y:value}
(ev