没有合适的资源?快使用搜索试试~ 我知道了~
首页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
missingMessag
e
字符串 当输入框为空时提示的文本 必填
formatter functio
n
格式化日期的函数,这个函数以’date’为参数,并且
返回一个字符串
——
parser functio
n
分析字符串的函数,这个函数以’date’为参数并返回
一个日期
——
2.3 事件
事件名 参数 描述
onSelect date
当选择一个日期时触发
2.4 方法
方法名 参数 描述
destroy none
销毁组件
disable none
禁用输入框.
enable none
启用输入框
剩余47页未读,继续阅读
赤壁怀贾
- 粉丝: 0
- 资源: 7
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论3