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

WEB WEB 前端交互快速开发指南前端交互快速开发指南 EasyUI 使用介绍(dh20156 风之石) EasyUI EasyUI 使用介绍使用介绍(dh20156 (dh20156 风之石风之石) ) WEB WEB 页面中常见的功能形式页面中常见的功能形式切换: 切换: 表单验证表单验证树状展示树状展示( ( 此功能多见于此功能多见于 WEB WEB 管理员页面管理员页面) ) AJAX( AJAX( 提交数据、获取数据提交数据、获取数据) ) 广告轮显广告轮显( ( 滤镜切换或滚动切换滤镜切换或滚动切换) ) TabStrip( TabStrip( 导航菜单、内容切换等等导航菜单、内容切换等等) ) 当然,有些站点还会有其他一些特别的交当然,有些站点还会有其他一些特别的交互功能如互功能如 plete plete 、、 RichEditor RichEditor ,我们,我们暂不做讨论。暂不做讨论。如果我们对上述常用的功能都能够迅速处如果我们对上述常用的功能都能够迅速处理,那前端开发部分的工作就只剩页面布理,那前端开发部分的工作就只剩页面布局了,那将会非常轻松(就是累点局了,那将会非常轻松(就是累点^_^ ^_^ )。)。结构与功能分离结构与功能分离在动手之前,我们需要先制定一套规则,用以保证在动手之前,我们需要先制定一套规则,用以保证 WEB WEB 结构与功结构与功能代码分离! 能代码分离! 不要写任何的不要写任何的 inline script inline script ,所有事件都需要通过脚本抓取,所有事件都需要通过脚本抓取 DOM DOM 元元素(通过素(通过 id id或或 class class 或其他或其他 attribute attribute 进行抓取)后再进行绑定! 进行抓取)后再进行绑定! 不被支持的写法: 不被支持的写法: <button onclick= <button onclick= ““ alert(0); alert(0); ””>alert 0</button> >alert 0</button> 推荐的方式: 推荐的方式: <button>alert 0</button> <button>alert 0</button> <script type= <script type= ““ text/javascript text/javascript ””> > var dbtns = ( var dbtns = ( ‘‘ button button ’’); ); var il = ; var il = ; var dbtn = il&&dbtns[0]; var dbtn = il&&dbtns[0]; if(dbtn){ = function(){alert(0)};} if(dbtn){ = function(){alert(0)};} </script> </script> 结构与功能分离结构与功能分离页脚页脚侧栏区域侧栏区域主内容区域主内容区域头部头部功能按所在页面区域进行划分,如果头部有交互功能, 则可以抓取头部进行绑定,其他部分类似! 按 Y!的说法就是按模组进行划分,这真的是很值得借鉴的数据与表现分离模式! 页脚页脚侧栏区域侧栏区域主内容区域主内容区域头部头部 id= id= ““ header header ”” <button class= <button class= ““ btn btn ””>alert 0</button> >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 用法的朋友一定很