jquery_EasyUI的学习
1 Accordion（可折叠标签）
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">
，并且将js代码全部去掉，效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小，当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板（panel）,许多属性定义在<div />标签里，下面的属性就是如此：
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox（日期框）
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回 ''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数，这个函数以’date’为参数，并且返回一个字符串
——
parser
function
分析字符串的函数，这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
