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

jQuery EasyUI API 中文文档 - Panel面板的更多相关文章

  1. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

  2. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

  3. jQuery EasyUI API 中文文档

    http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页  jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...

  4. jQuery EasyUI API 中文文档 - 面板(Panel)

    Panel 面板   用$.fn.panel.defaults重写defaults. 用法示例 创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel ...

  5. jQuery EasyUI API 中文文档 - 布局(Layout)

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  6. jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框(Messager) http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html

    <html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...

  7. jQuery EasyUI API 中文文档 - 分隔按钮(splitbutton)

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  8. jQuery EasyUI API 中文文档 - 菜单按钮(menubutton)

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

  9. jQuery EasyUI API 中文文档 - 链接按钮(linkbutton)

    <html> <head> <script src="jquery-easyui/jquery.min.js"></script> ...

随机推荐

  1. IIS 部署nodejs

    1.Node.js 2.IIS的URL Rewrite模块 3.iisnode

  2. bzoj 1101 莫比乌斯反演

    最裸的莫比乌斯 #include<bits/stdc++.h> #define LL long long #define fi first #define se second #defin ...

  3. Gitlab基本管理<一>

    一. 创建Gitlab中第一个项目 1. Gitlab项目的可见类型有三种级别. Private project: 该级别是只有项目拥有者或者已经得到授权的人可以访问该项目,或者这些人是该项目组的成员 ...

  4. 2017-2018-1 20179202《Linux内核原理与分析》第五周作业

    一.系统调用实验: 1.知识准备: (1)系统调用的三层皮:xyz()(API).system_call(所有系统调用的入口) . sys_xyz()(中断服务程序) (2)API是程序员在用户空间下 ...

  5. UVA12995 Farey Sequence [欧拉函数,欧拉筛]

    洛谷传送门 Farey Sequence (格式太难调,题面就不放了) 分析: 实际上求分数个数就是个幌子,观察可以得到,所求的就是$\sum^n_{i=2}\phi (i)$,所以直接欧拉筛+前缀和 ...

  6. (总结)Nginx/LVS/HAProxy负载均衡软件的优缺点详解

    Nginx/LVS/HAProxy负载均衡软件的优缺点详解 PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,参考了一些资料,结合自己的一些使用经验,总结一下. 一般对负载均 ...

  7. MySQL之varchar

    MySQL之varchar 0.前言 探究关于MySQL中varchar长度的定义 1.研究MySQL的varchar列类型的背景 1.MySQL5.x 2.InnoDB 2.varchar 对于va ...

  8. Bzoj2120/洛谷P1903 数颜色(莫队)

    题面 Bzoj 洛谷 题解 考虑对操作离线后分块处理询问操作(莫队算法),将询问操作按照编号分块后左端点第一关键字,右端点第二关键字排序(分块大小为\(n^{\frac 23}\)),对于每一个询问操 ...

  9. Am335x SD卡 启动制作

    1.网上下载DiskGenius(分区工具) 2.将4Gsd卡分区3个,boot,rootfs,user 3.boot分区大概在62M左右如图所示 将编译好的MLO.u-boot.img.uEnv.t ...

  10. Kylin的垃圾清理

    在Kylin运行一段时间之后,有很多数据因为不再使用而变成了垃圾数据,这些数据占据着大量HDFS.HBASE等资源,当积累到一定规模时会对集群性能产生影响.这些垃圾数据主要包括: Purge之后原Cu ...