WEB前端交互快速开发指南.ppt

1、WEB前端交互快速开发指南,EasyUI使用介绍(dh20156风之石),WEB页面中常见的功能形式,切换： 表单验证 树状展示(此功能多见于WEB管理员页面) AJAX(提交数据、获取数据),广告轮显(滤镜切换或滚动切换),TabStrip(导航菜单、内容切换等等),当然，有些站点还会有其他一些特别的交互功能如AutoComplete、RichEditor，我们暂不做讨论。 如果我们对上述常用的功能都能够迅速处理，那前端开发部分的工作就只剩页面布局了，那将会非常轻松（就是累点 _）。,结构与功能分离,在动手之前，我们需要先制定一套规则，用以保证WEB结构与功能代码分离！ 不要写任何的inli

2、ne script，所有事件都需要通过脚本抓取DOM元素（通过id或class或其他attribute进行抓取）后再进行绑定！ 不被支持的写法：alert 0 推荐的方式： alert 0 var dbtns = document.getElementsByTagName(button); var il = dbtns.length; var dbtn = il ,结构与功能分离,功能按所在页面区域进行划分，如果头部有交互功能，则可以抓取头部进行绑定，其他部分类似！ 按Y!的说法就是按模组进行划分，这真的是很值得借鉴的数据与表现分离模式！,假设id为header的头部有一样式名为btn的按钮需

3、要绑定事件! 我们用EasyUI的写法： var fooheader = function(domobj)/头部功能都在此函数体内定义 if(!domobj)return; var dbtns = easyUI.getElementsBy(class,btn,button,domobj); var l = dbtns.length; if(!l)return; dbtns0.onclick = function()alert(0); ; (function() easyUI.queue(/执行队列 function()easyUI.doWhileExist(header,fooheader);

4、 ,1); )(); 相信熟悉YUI用法的朋友一定很容易上手！_,EasyUI 概述,作者：杜欢(dh20156风之石) 风格：简约 功能：相对齐全 扩展：方便 使用：简单 大小：8.9K，JS Minifier处理后为7K 组成：EasyUI.js + 扩展的附加组件 官网：http:/www.v-,EasyUI Core API,easyUI.fpbind() 自执行方法,为Ftotype添加bind方法，用于提供保持对象作用域的事件方法的邦定 参数：无 返回值：无 easyUI.IAHTML() 自执行方法,为HTMLEtotype添加inser

5、tAdjacentHTML方法，用于为不支持insertAdjacentHTML方法的浏览器提供兼容 参数：无 返回值：无 easyUI.contains(node,childNode) 用于判断两个DOM节点之间是否存在包含与被包含的关系 参数：DOM元素A,DOM元素B 返回值：true|false,easyUI.getElementsBy(attribute,value,tagName,scopeDom) 在指定的DOM节点scopeDom下查找属性名称为attribute，属性值为value的，tagName为tagName的DOM元素 参数：attribute属性名称,属性值valu

6、e,DOM元素tagName,指定要查找的DOM节点范围scopeDom 返回值：DOM Collection easyUI.getPosition(domobj) 取元素坐标，如元素或其上层元素设置position relative，应该getPosition(子元素).y-getPosition(父元素).y 参数：DOM元素 返回值：x:value,y:value easyUI.getTarget(event) 获取事件触发对象 参数：event 返回值：DOM元素,easyUI.getArgs() 获取URL参数 参数： 返回值：argName:value,.,argName:valu

7、e easyUI.setPosition(domobj,x,y) 为dom元素设置x坐标和y坐标 参数：DOM元素,x,y 返回值： easyUI.getStyle(domobj,stylename) 获取元素当前样式 参数：domobj,stylename 返回值：cssStyle value easyUI.stopEvent(event) 阻止事件冒泡和Event返回值 参数：event 返回值：,easyUI.ajax.post(sUrl,sArgs,bAsync,fCallBack,fFailure) 使用xmlhttp发送post请求 参数：sUrl 请求地址,sArgs 请求参数串

8、,bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数 返回值： easyUI.ajax.get(sUrl,bAsync,fCallBack,fFailure) 使用xmlhttp发送get请求 参数：sUrl 请求地址(包括请求参数),bAsync 是否异步,fCallBack 回调函数,fFailure 服务器错误处理函数 返回值： easyUI.clearTxtNode(domobj) 清除DOM元素内的#text节点 参数：domobj 返回值：,easyUI.checkForm(form,fooWarningMsg) 验证form表单 为需要验证

9、的输入项添加两个自定义属性作为判断的依据以及需要执行的验证 validate=这里输入验证方法，多种验证以分号隔开 msg=这里输入验证不合格时提示的信息，与validate一一对应，如果信息数少于验证方法数量，则后面的验证不合格时将显示最后一条提示信息 验证方法: isFilled 必填 isNaN 如果填写，必须为非数字 isNumber 如果填写，必须为数字 isInt 如果填写，必须为整数 isEmail 如果填写，必须为Email格式 isEmailList 如果填写，必须为以分号;隔开的1个或多个Email格式 fileType(ext|ext|ext|.|ext) 如果填写，必须

10、为指定扩展名ext列表内的文件类型 moreThan(N) 如果填写，必须为大于N的数 lessThan(N) 如果填写，必须为小于N的数 equalTo(N) 如果填写，必须为等于N的数 maxLength(N) 如果填写，最大长度不超过N minLength(N) 如果填写，最小长度不小于N 详情请参见：easyValidate_demo.html 参数：form 表单,fooWarningMsg 提示警告信息函数(形参为警告信息)，如果没有指定该函数，将直接alert出警告信息。 返回值：true|false,easyUI.maxwin() 最大化浏览器窗口 参数： 返回值： easyU

11、I.queue(list,delay) 函数执行队列 参数：list 函数队列数组,delay 每个函数运行后延迟时间 返回值： easyUI.doWhileExist(sModuleId,oFunction) 指定的DOM节点存在才执行指定的函数 参数：sModuleId 指定的DOM节点ID,oFunction 要运行的函数,参数为前面指定的DOM节点 返回值：,基于EasyUI的附加组件,dhATV.js(Ajax Treeview) 功能强大的可静态渲染列表或异步加载数据的前端JavaScript树 EasyCalendar.js(Easy Calendar) 简单易用,可以自由配置的JavaScript日历 easyRT.js(Easy Rich Text Editor) 轻量级