easyUI使用参考01-可折叠标签,日期框,组合框博客分类：参考 javascripteasyui

程序员文章站 2024-02-13 17:44:46

...

1.... Accordion（可折叠标签）... 2

2.... DateBox（日期框）... 4

3.... ComboBox(组合框) 7

1 Accordion（可折叠标签）

1.1.1 代码

<html>

<head>

<title>jQuery EasyUI</title>

$( function() {

$('#aa').accordion( {

width : 400,

height : 200,

fit : false

});

</script>

</head>

<body>

<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.3 扩展

实例html代码中

此行也可写成

，并且将js代码全部去掉，效果图是一样的。

1.2.1 容器参数

参数名称	参数类型	描述	默认值
width	数字	可折叠标签的宽度。	auto
height	数字	可折叠标签的高度。	auto
fit	布尔	是否使可折叠标签自动缩放以适应父容器的大小，当为true时width和height参数将失效。	false
border	布尔	是否显示边界线。	true

1.2.2 面板参数

可折叠标签面板继承自面板（panel）,许多属性定义在<div />标签里，下面的属性就是如此：

参数名称	参数类型	描述	默认值
selected	布尔	设置可折叠标签中默认展开的标签页	false

1 DateBox（日期框）

1.1 实例

1.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

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>

</body>

</html>

1.2 参数

属性名	类型	描述	默认值
currentText	字符串	为当前日期按钮显示的文本	Today
closeText	字符串	关闭按钮显示的文本	Close
disabled	布尔	如果为true则禁用输入框	false
required	布尔	定义输入框是否为必添	false
missingMessage	字符串	当输入框为空时提示的文本	必填
formatter	function	格式化日期的函数，这个函数以’date’为参数，并且返回一个字符串	——
parser	function	分析字符串的函数，这个函数以’date’为参数并返回一个日期	——

1.3 事件

事件名	参数	描述
onSelect	date	当选择一个日期时触发

1.4 方法

方法名	参数	描述
destroy	none	销毁组件
disable	none	禁用输入框.
enable	none	启用输入框

2 ComboBox(组合框)

2.1 实例

2.1.1 代码

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

function loadData(){

$('#cc').combobox({

url:'combobox_data.json',//该文件内容在下面

valueField:'id',

textField:'text'

});

}

function setValue(){

$('#cc').combobox('setValue','2');

}

function getValue(){

var val = $('#cc').combobox('getValue');

alert(val);

}

function disable(){

$('#cc').combobox('disable');

}

function enable(){

$('#cc').combobox('enable');

}

$( function() {

$('#cc').combobox( {

width:150,

listWidth:150,

listHeight:100,

//valuefield:'value',

//textField:'text',

//url:'combobox_data.json',

editable:false

});

</script>

</head>

<body>

<h1>ComboBox</h1>

<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>

<a href="#" onclick="setValue()">setValue</a> <a href="#"

onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>

<a href="#" onclick="enable()">enable</a></div>

<span>Options: </span>

</select>

</body>

</html>

combobox_data.json内容：

[{

"id":1,

"text":"text1"

},{

"id":2,

"text":"text2"

},{

"id":3,

"text":"text3",

"selected":true

},{

"id":4,

"text":"text4"

},{

"id":5,

"text":"text5"

}]

2.2 参数

属性名	类型	描述	默认值
width	数字	组件的宽度	auto
listWidth	数字	下拉列表的宽度	null
listHeight	数字	下拉列表的高度	null
valueField	字符串	基础数据值名称绑定到这个组合框	value
textField	字符串	基础数据的字段的名称绑定到这个组合框	text
editable	布尔	定义是否可以直接到文本域中键入文本	true
url	字符串	加载列表数据的远程URL	null

2.3 事件

事件名	参数	描述
onLoadSuccess	none	当远程数据成功加载时触发
onLoadError	none	当远程数据加载失败时触发
onSelect	record	当用户选择了一个列表项时触发
onChange	newValue, oldValue	当文本域字段的值改变时触发

2.4 方法

方法名	参数	描述
select	value	选择下拉列表中的一项
setValue	param	设定指定值到文本域，参数可以是一个字符串，也可以是一个Javascript对象，如果是对象，必须包含两个属性各对应valueField和TextField属性。
getValue	none	获取字段值
reload	url	请求远程列表数据.

easyUI使用参考01-可折叠标签,日期框,组合框 博客分类： 参考 javascripteasyui

1 Accordion（可折叠标签）

1 DateBox（日期框）

2 ComboBox(组合框)