easyUI使用参考03-分页,窗口,面板,标签

最新推荐文章于 2018-12-13 15:41:36 发布

lzun007

最新推荐文章于 2018-12-13 15:41:36 发布

阅读量153

点赞数

分类专栏：参考文章标签： javascript easyui ViewUI

本文链接：https://blog.youkuaiyun.com/lzun007/article/details/84177517

版权

参考专栏收录该内容

4 篇文章

订阅专栏

8.... Pagination（分页）... 20

9.... Window（窗口）... 23

10... Panel（面板）... 26

11... Tabs（标签）... 30

1 Pagination（分页）

1.1 实例

1.1.1 代码

<html>

<head>

<title>jQuery EasyUI</title>

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

$(function(){

$('#pp').pagination({

total:114,

pageSize:15,

pageNumber:2,

pageList:[10,15,20,30,50,100],

loading:false,

showPageList:true,

showRefresh:true,

beforePageText:'第',

afterPageText:'页，共{pages}页',

displayMsg:'{from}-{to}/{total}',

buttons:[{

iconCls:'icon-add',

handler:function(){

alert('add');

}

},{

iconCls:'icon-cut',

handler:function(){

alert('cut');

}

},{

iconCls:'icon-save',

handler:function(){

alert('save');

}

}],

onSelectPage:function(pageNumber, pageSize){

$(this).pagination('loading');

alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);

$(this).pagination('loaded');

}

});

</script>

</head>

<body>

<h1>Pagination</h1>

<div style="margin: 10px 0;"><a href="#"

onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a

href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>

</div>

<div id="pp"

style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>

</body>

</html>

1.1.2 效果图

1.2 参数

属性名	类型	描述	默认值
total	数字	当分页建立时设置记录的总数量	1
pageSize	数字	每一页显示的数量	10
pageNumber	数字	当分页建立时，显示的页数	1
pageList	数组	用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.	[10,20,30,50]
loading	布尔	定义数据是否正在加载	false
buttons	数组	定义自定义按钮，每个按钮包含两个属性：iconCls: 显示背景图像的CSS类 handler: 当一个按钮被点击时的处理函数	null
showPageList	布尔	定义是否显示页面列表	true
showRefresh	布尔	定义是否显示刷新按钮	true
beforePageText	字符串	在输入框组件前显示的标签	Page
afterPageText	字符串	在输入框组件后显示的标签	Of {pages}
displayMsg	字符串	显示一个页面的信息。	Displaying {from} {to} of {total} items

1.3 事件

事件名	参数	描述
onSelectPage	pageNumber, pageSize	当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的大小
onBeforeRefresh	ageNumber, pageSize	刷新按钮被点击之前触发，如果返回false则取消刷新操作
onRefresh	ageNumber, pageSize	刷新以后触发
onChangePageSize	ageSize	改变页面大小时触发

2 Window（窗口）

窗口的主要用法和面板（panel）用法差不多

2.1 实例

2.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Insert title here</title>

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

function resize(){

$('#w').window({

title: 'yewen2',

width: 600,

collapsible:false,

minimizable:false,

maximizable:false,

closable:false,

closed: false,

height: 300,

draggable:false,

resizable:false,

shadow:false,

modal:true

});

}

function open1(){

$('#w').window('open');

}

function close1(){

$('#w').window('close');

}

function test(){

$('#test').window('open');

}

</script>

</head>

<h1>Window</h1>

<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a

href="javascript:void(0)" onclick="open1()">open</a> <a

href="javascript:void(0)" onclick="close1()">close</a></div>

<div id="w" class="easyui-window" title="My Window" icon="icon-save"

style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">

<div region="center" border="false"

style="padding: 10px; background: #fff; border: 1px solid #ccc;">

jQuery EasyUI framework help you build your web page easily. <br />

<br />

click <a href="#" onclick="test()">here</a> to popup another window.</div>

<div region="south" border="false"

style="text- align: right; height: 30px; line-height: 30px;"><a

class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"

onclick="resize()">Ok</a> <a class="easyui-linkbutton"

icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>

</div>

<div id="test" class="easyui-window" closed="true" modal="true"

title="Test Window" style="width: 300px; height: 100px;"></div>

</body>

</html>

2.1.2 效果图

2.2 参数

大多数的属性和面板(panel)的属性是相同的，下面列出一些Window私有的属性：

属性名	类型	描述	默认值
zIndex	数字	窗口的z-index属性，可以通过这个属性来增加	9000
draggable	布尔	定义窗口是否可被拖动	true
resizable	布尔	定义窗口是否可以被改变大小	true
shadow	布尔	如果设置为true，窗口的阴影也将显示。	true
modal	布尔	定义窗口是否是一个模式窗口。	false

Window也重写了Panel里的一些属性

属性名	类型	描述	默认值
title	字符串	窗口的标题文本	New Window
collapsible	布尔	定义是否显示可折叠定义按钮	true
minimizable	布尔	定义是否显示最小化按钮	true
maximizable	布尔	定义是否显示最大化按钮	true
closable	布尔	定义是否显示关闭按钮	true

2.3 事件

Window的事件和面板(panel)的事件相同

2.4 方法

除了”header”和”body”以外，Window的函数方法和面板(panel)的相同

3 Panel（面板）

3.1 实例

3.1.1 代码

<html>

<head>

<title>jQuery EasyUI</title>

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

function open1(){

$('#p').panel('open');

}

function close1(){

$('#p').panel('close');

}

function load1(){

$('#p').panel({

href:'tabs_href_test.html'

});

$('#p').panel('open');

}

</script>

</head>

<h1>Panel</h1>

<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>

</div>

<div

style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">

<div id="p" class="easyui-panel" title="My Title" icon="icon-save"

collapsible="true" minimizable="true" maximizable=true closable="true"

style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">

<p>panel</p>

</div>

</body>

</html>

3.1.2 效果图

3.2 参数

名字	类型	描述	默认值
title	字符串	在面板头部显示的标题文本	null
iconCls	字符串	一个CSS类来显示在面板中的16x16图标	null
width	数字	设置面板的宽度	auto
height	数字	设置面板的高度	auto
left	数字	设置面板左侧位置	null
top	数字	设置面板的顶部位置	null
cls	字符串	给面板添加一个CSS类	null
headerCls	字符串	给面板头部添加一个CSS类	null
bodyCls	字符串	给面板主体添加一个CSS类	null
style	对象	给面板自定义样式	{}
fit	布尔	当设置为true，面板尺寸将适合它的父容器。	false
border	布尔	定义面板的边框	true
doSize	布尔	当设置为true，面板载创建的时候将被调整和重新布局	true
collapsible	布尔	定义是否显示可折叠定义按钮	false
minimizable	布尔	定义是否显示最小化按钮	false
maximizable	布尔	定义是否显示最大化按钮	false
closable	布尔	定义是否显示关闭按钮	false
tools	数组	自定义工具，每个工具可以包含两个属性：iconCls and handler	[]
collapsed	布尔	定义在初始化的时候折叠面板	false
minimized	布尔	定义在初始化的时候最小化面板	false
maximized	布尔	定义在初始化的时候最大化面板	false
closed	布尔	定义在初始化的时候关闭面板	false
href	字符串	一个远程的URL加载数据，然后显示在面板中	null
loadingMessage	字符串	当加载远程数据时，在面板中显示的信息	Loading…

3.3 事件

名字	参数	描述
onLoad	none	当远程数据加载时触发
onBeforeOpen	none	当面板打开之前触发
onOpen	none	当面板打开之后触发
onBeforeClose	none	当面板关闭之前触发
onClose	none	当面板关闭之后触发
onBeforeDestroy	none	当面板销毁之前触发
onDestroy	none	当面板关闭之后触发
onBeforeCollpase	none	当面板折叠之前触发
onCollapse	none	当面板折叠之后触发
onBeforeExpand	none	当面板展开之前触发
onExpand	none	当面板展开之后触发
onResize	width, height	当面板调整大小之后触发width: 新的宽度;height: 新的高度
onMove	left,top	当面板移动之后触发left: 新的左侧位置top: 新的顶部位置
onMaximize	none	当窗口最大化的时候被触发
onRestore	none	当窗口恢复到原来的大小时被触发
onMinimize	none	当窗口最小化的时候被触发

3.4 方法

名字	参数	描述
options	none	返回设置的属性值
panel	none	返回面板对象
header	none	返回面板头部对象
body	none	返回面板主体对象
setTitle	title	设置面板头部标题
open	forceOpen	当forceOpen设置为true，面板被打开的时候忽略onBeforeOpen回调函数
close	forceClose	当forceClose设置为true，面板被关闭的时候忽略onBeforeClose回调函数
destroy	forceDestroy	当forceDestroy设置为true，面板被销毁的时候忽略onBeforeDestroy回调函数
refresh	none	当设置了href值时，刷新面板来加载远程数据
resize	options	设置面板的大小和布局，这些选项包含以下的属性：width: 新面板的宽度; height: 新面板的高度; left: 新面板的左侧位置; top: 新面板的顶部位置
move	options	移动面板到一个新的位置，这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置

4 Tabs（标签）

4.1 实例

4.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>

var index = 0;

function addTab(){

index++;

$('#tt').tabs('add',{

title:'New Tab ' + index,

content:'Tab Body ' + index,

closable:true

});

}

</script>

</head>

<body>

<div>

</div>

<br/>

</div>

<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close

button.</div>

<thead>

<tr>

<th field="f1" width="60">field1</th>

<th field="f2" width="60">field2</th>

<th field="f3" width="60">field3</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</div>

<div title="Title1">Content 1</div>

<div title="Title2">Content 2</div>

<div title="Title3">Content 3</div>

</div>

</body>

</html>

4.1.2 效果图

4.2 参数

参数名	参数	描述	默认值
width	数字	标签容器的宽度	auto
height	数字	标签容器的高度	auto
idSeed	数字	The base id seed to generate tab panel’s DOM id attribute.	0
plain	布尔	如果为ture标签没有背景图片	false
fit	布尔	如果为ture则设置标签的大小以适应它的容器的父容器	false
border	布尔	如果为true则显示标签容器的边框	true
scrollIncrement	数字	滚动按钮每次被按下时滚动的像素值	100
scrollDuration	数字	每次滚动持续的毫秒数	400

4.3 事件

事件名	参数	描述
onLoad	arguments	当一个AJAX标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同
onSelect	title	当用户选择一个标签面板时被触发
onClose	title	当用户关闭一个标签面板时被触发

4.4 方法

方法名	参数	描述
resize	none	调整标签容器的大小和布局
add	options	添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性
close	title	关闭一个标签面板，标题参数表明被关闭的面板
select	title	选择一个标签面板
exists	title	指示特定的标签是否存在

4.5 标签面板属性

属性名	类型	描述	默认值
id	字符串	标签面板的ID属性	null
title	字符串	标签面板的文本标题
content	字符串	标签面板的主体内容
href	字符串	填充标签内容的远程URL地址	null
cache	布尔	如果为true，当设置href时，对标签面板进行缓存	true
icon	字符串	标签面板上标题的图标CSS类	null
closable	布尔	如果为true，标签面板会显示出关闭按钮，点击可以关闭选项卡面板。	false
selected	布尔	如果为true，标签标签面板将被选中	false
width	数字	标签面板的宽度	auto
height	数字	标签面板的高度	auto