您的位置：首页 > Web前端 > JQuery
jQuery EasyUI API 中文文档 - Panel面板

2015-05-22 09:13 411 查看
<html>
<head>
<title>布局管理器--控制面板</title>
<script src="jquery-easyui/jquery.min.js"></script>
<script src="jquery-easyui/jquery.easyui.min.js"></script>
<script src="jquery-easyui/easyloader.js"></script>
<script src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<script>
$(function (){
//alert弹出框，
//第一个参数是标题
//第二个参数是内容
//$.messager.alert('Warning','The warning message');

//2. 使用脚本创建控制面板
/*$("#p1").panel({
width:100,
height:100,
title:'嘻嘻哈哈',//标题
tools:[{
iconCls:'icon-save',
handler:function (){alert('123')}
}]//自定义工具栏，每一个工具都可以包含2个属性：图标类 和句柄。
})*/
//下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。
/*$('#p1').panel({
href:'1.html',
onLoad:function(){
alert('loaded successfully');
}
});*/

$('#p1').panel({
width:100,
height:100,
title:'嘻嘻哈哈',//标题
tools:[{
iconCls:'icon-save',
handler:function (){alert('123')}
}]//自定义工具栏，每一个工具都可以包含2个属性：图标类 和句柄。
});

/*
options：返回选项属性。
panel：返回控制面板对象。
header：返回控制面板头对象。
body：返回控制面板主体对象。
setTitle：设置控制面板头部的标题文本。
open：当参数forceOpen设置为true时，控制面板将被打开，不受onBeforeOpen回调函数的约束。
close：当参数forceClose设置为true时, 控制面板将被打开，不受onBeforeClose回调函数的约束。
destroy：当参数forceDestroy设置为true时,控制面板将被打开,不受onBeforeDestroy回调函数的约束。
refresh：当href属性被设置时，刷新控制面板以载入远程数据。
resize：这是控制面板的尺寸并且进行布局。options对象包含以下2个属性:
width： 新的控制面板宽度
height： 新的控制面板高度
left： 新的控制面板左边距
top： 新的控制面板顶边距
move：移动控制面板到一个新的位置。options对象包含以下2个属性:
left： 新的控制面板左边距
top： 新的控制面板顶边距
maximize：使控制面板铺满整个容器。
minimize：最小化控制面板。
restore：使最大化的控制面板重置为其初始化时的大小和位置。
collapse：折叠控制面板主体。
expand：扩展控制面板主体。
*/
//open,close的方法使用如下：
$("#open").click(function (){
$('#p1').panel('open');
})
$("#close").click(function (){
$('#p1').panel('close');
})

});
</script>
</head>
<body>
<!--2. 使用脚本创建控制面板-->
<div id="p1"></div>
<input id="close" type="button" value="关闭">
<input id="open" type="button" value="开启">

<!--1. 使用标签创建控制面板
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"  iconCls="icon-save"  closable="true" collapsible="true" minimizable="true" maximizable=true>
<p>panel content.</p>
<p>panel content.</p>
</div>
-->

<!--
panel的属性
data-options：是放easyui自带的属性和方法的

title：控制面板的标题
<div id="p" class="easyui-panel"  title="My Panel"></div>

iconCls：控制面板的图标
<div id="p" class="easyui-panel" iconCls="icon-save"  title="My Panel"></div>

width：控制面板的宽
<div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel" data-options="width:100"></div>

height：控制面板的高
<div id="p" class="easyui-panel" iconCls="icon-save" title="My Panel" data-options="width:100,height:100"></div>

style：给控制面板加一个自定义样式
<div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" data-options="width:100,height:100"></div>

fit：设置为true时，控制面板的大小将铺满它所在的(浏览器)
<div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" data-options="width:100,height:100,fit:true"  ></div>

border：为false时不显示边框，相反是显示，默认是true
<div id="p" class="easyui-panel" style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true"  ></div>

noheader：为true时控制面板头部将不被创建，相反会被创建，默认是false
<div id="p" class="easyui-panel" noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true"  ></div>

content：显示控制面板里的内容
<div id="p" class="easyui-panel" noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"  ></div>

collapsible：为true时显示可折叠按钮，相反不显示，默认是fales
<div id="p" class="easyui-panel" collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

minimizable：为true时显示最小化按钮，相反不显示，默认是false
<div id="p" class="easyui-panel" minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

maximizable：为true时显示最大化按钮，相反不显示，默认是false
<div id="p" class="easyui-panel" maximizable=true minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

closable：为true时显示关闭按钮，相反不显示，默认是false
<div id="p" class="easyui-panel" closable=true maximizable=true minimizable=true collapsible=true noheader=true style="width:100" iconCls="icon-save" title="My Panel" border=true data-options="width:100,height:100,fit:true content:'xixihaha'"   ></div>

collapsed：为true时默认是折叠，相反不折叠，默认是false
<div id="p" class="easyui-panel" collapsed=true></div>

minimized：为true时默认是最小化的，相反是不最小化的，默认是false
<div id="p" class="easyui-panel" minimized=true></div>

maximized：为true时默认是最大化的，相反是不最大化的，默认是false
<div id="p" class="easyui-panel" maximized=true></div>

closed：为true时默认是关闭的，相反是不关闭的，默认是false
<div id="p" class="easyui-panel" closed=true></div>

href：载入远程数据的超链接，载入的数据将显示在控制面板中。
<div id="p" class="easyui-panel" href="1.html"></div>

loadingMessage：完全加载之前显示的内容
<div id="p" class="easyui-panel" data-options="loadin..."></div>

panel的事件
onLoad：在远程数据被载入时触发。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onLoad:aa" >

onBeforeOpen：在控制面板被打开之前触发，返回false将停止打开。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeOpen:aa" >

onOpen：在控制面板被打开之后触发。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onOpen:aa" >

onBeforeClose：在控制面板被关闭之前触发，返回false将取消关闭。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeClose:aa" >

onClose：在控制面板被关闭后触发。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onClose:aa" >

onBeforeCollapse：在控制面板被折叠之前触发，返回false将停止折叠。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeCollapse:aa" >

onCollapse：在控制面板被折叠之后触发。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onCollapse:aa" >

onBeforeExpand：在控制面板被扩展之前触发，返回false将停止扩展。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onBeforeExpand:aa" >

onExpand：在控制面板被扩展之后触发。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onExpand:aa" >

onMaximize：在控制面板被最大化后触发。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onMaximize:aa" >

onMinimize：在控制面板被最小化后触发。
<div id="p" class="easyui-panel"  title="My Panel" collapsible=true closable=true href="1.html" width="100" data-options="width:500,height:500,onMinimize:aa" >

-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航