EasyUI动画效果

1.jQuery动画效果

a)基本效果

>show(speed),显示

>hide(speed),隐藏

>toggle(speed),切换

b)滑动的效果

>slideUp(speed),上滑隐藏

>slideDown(speed),下滑显示

>slideToggle(speed),滑动切换

c)淡入淡出

>fadeIn(speed)淡入

>fadeUp(speed)淡出

>fadeToggle(speed)切换

>fadeTo(speed,opacity),将显示的元素半透明化

$(function() {

// [1] 基本效果

$("div").show(2000);

$("div").hide(2000);

$("div").toggle(2000);

// [2] 滑动效果

$("div").slideUp(2000);

$("div").slideDown(2000);

$("div").slideToggle(2000);

// [3] 淡入淡出

$("div").fadeIn(2000);

$("div").fadeOut(2000);

$("div").fadeToggle(2000);

$("div").fadeTo(2000, 0.25)

});

2.EasyUI简介

a)EasyUI是一个jQuery的插件集合（框架），用于快捷搭建用户界面；

b)页面分为 前段页面 和 后台页面，EasyUI适合做后台页面；

c) 官网: http://www.jeasyui.com/

d) 中文网站: http://www.jeasyui.net

e)目录结构

>demo,官方提供的一些实例代码；

>locale,国际化支持，各种语言环境下使用的js文件；

>plugins,各种插件js文件；

>src,各个插件的源文件；

>themes,主题 css样式

---icons,所有EasyUI的图标；

3.EasyUI的使用

a)需要在项目中拷贝如下内容:

>jquery.min.js

>jquery.easyui.min.js

>themes(主题)文件夹

b)在需要使用EasyUI的界面，引入需要的css和js

<!-- [1] 引入两个css文件 -->

<!-- 选择一个EasyUI的主题 -->

<link rel="stylesheet" href="themes/default/easyui.css" />

<!-- 引入EasyUI的图标样式 -->

<link rel="stylesheet" href="themes/icon.css" />

<!-- [2] 引入两个js文件 -->

<!-- jquery文件, 先引入 -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- easyui文件, 后引入 -->

<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

<!-- 引入汉化文件, 不是必须的 -->

<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

c)EasyUI使用时，是通过指定class的方式使用样式的；

d)可以通过data-options属性来指定EasyUI中的一些样式效果；例如:小图标；

4.EasyUI常用的组件

4.1-Panel(面板)

通过class=easyui-panel可以定义Easyui面板，常用的属性：

a)title:定义面板的标题

b)iconCls:定义面板 的图标样式；

c)collapsible布尔值，表示面板是否可折叠

d)minimiazable:布尔值，表示面板是否可最小化；

e)maxmizable:布尔值，表示面板是否可最大化

f)closable:布尔值，表示面板是否可关闭；

<div class="easyui-panel" title="登录" style="text-align: center;"

height="200px" data-options="iconCls:'icon-login'"></div>

4.2Linkbutton（按钮）

使用a标签实现，class=easyui-linkbutton

<a id="btnSubmit" href="javascript:void(0)" class="easyui-linkbutton" data-options="width:'80px', iconCls:'icon-ok'">提交</a>

4.3 -textbox 和 passwordbox

文本框（1.4后使用）和密码框（1.5后可用）；required属性表示必填；

<input class="easyui-textbox" name="uname" data-options="required:true" />

<input class="easyui-passwordbox" name="pwd" data-options="required:true" />