WEB前端交互快速开发指南

dh20156 2009-04-28 08:47:24

WEB前端交互快速开发指南
EasyUI使用介绍(dh20156风之石)
http://www.v-ec.com/dh20156/article.asp?id=240

WEB页面中常见的功能形式

切换：

1. 广告轮显(滤镜切换或滚动切换)

2. TabStrip(导航菜单、内容切换等等)

表单验证

树状展示(此功能多见于WEB管理员页面)

AJAX(提交数据、获取数据)

当然，有些站点还会有其他一些特别的交互功能如AutoComplete、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 = document.getElementsByTagName(‘button’);
var il = dbtns.length;
var dbtn = il&&dbtns[0];
if(dbtn){dbtn.onclick = function(){alert(0)};}
</script>

结构与功能分离

__________________________________________________________

头部

__________________________________________________________

内容 | 侧栏

__________________________________________________________

底部

__________________________________________________________

功能按所在页面区域进行划分，如果头部有交互功能，则可以抓取头部进行绑定，其他部分类似！

按Yahoo的说法就是按模组进行划分，这真的是很值得借鉴的数据与表现分离模式！

__________________________________________________________

头部 id="header" <button class=“btn”>alert 0</button>

__________________________________________________________

内容 | 侧栏

__________________________________________________________

底部

__________________________________________________________

假设id为header的头部有一样式名为btn的按钮需要绑定事件!
我们用EasyUI的写法：

var fooheader = function(domobj){//头部功能都在此函数体内定义
if(!domobj){return;}
var dbtns = easyUI.getElementsBy(‘class’,’btn’,’button’,domobj);
var l = dbtns.length;
if(!l){return;}
dbtns[0].onclick = function(){alert(0);};
};

(function(){
easyUI.queue([//执行队列
function(){easyUI.doWhileExist(‘header’,fooheader);}
],1);
})();

相信熟悉YUI用法的朋友一定很容易上手！^_^

EasyUI 概述

作者：杜欢(dh20156风之石)
风格：简约
功能：相对齐全
扩展：方便
使用：简单
大小：8.9K，JS Minifier处理后为7K
组成：EasyUI.js + 扩展的附加组件
官网：http://www.v-ec.com/easyui/

EasyUI Core API http://www.v-ec.com/easyui/

基于EasyUI的附加组件

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

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

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

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

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

WEB前端交互快速开发指南PPT下载

Thanks!
Dh20156(风之石)

...全文