WEB前端交互快速开发指南

WEB前端交互快速开发指南

EasyUI使用介绍(dh20156风之石)

WEB页面中常见的功能形式

切换：

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



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下载

转载请注明出处！http://www.v-ec.com/dh20156/article.asp?id=240

Thanks!

Dh20156(风之石)