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" />
