03-EasyUI_panel

最新推荐文章于 2019-03-30 14:42:10 发布

forwardNow

最新推荐文章于 2019-03-30 14:42:10 发布

阅读量1k

点赞数

分类专栏：前端文章标签： EasyUI panel

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/13422413

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

panel的使用

- panel属性的设置

- panel方法的调用

- 属性iconCls的设置

- open/close/destroy方法

1. 官方对panel的解释

The panel is used as a container for other contents.
It is the base component for building other components such as layout, tabs, accordion, etc.
It also provides built-in collapsible, closable, maximizable and minimizable behavior and other customized behavior.
Panels can be easily embedded into any position of web page.

2. 设置panel的属性

2.1 设置方式(二种)

(1) 以给dom结点设置属性的方式

<div id="p" 
    class="easyui-panel" 
    title="My Panel by class"
    style="width:500px;height:150px;padding:10px;background:#fafafa;"
    collapsible="true"
    minimizable="true"
    maximizable="true"
    closable="true"
    iconCls="icon-save"
>

(2) $("#p").panel({属性名1:属性值1, ...})

		// 设置panel的属性 $("#p").panel({....})
		$('#p').panel({
			width : 500,
			height : 150,
			title : 'My Panel',
			tools : [ {
				iconCls : 'icon-add',
				handler : function() {
					alert('new')
				}
			}, {
				iconCls : 'icon-save',
				handler : function() {
					alert('save')
				}
			} ]
		});

2.2 常用属性

collapsible : 折叠按钮 , 默认没有
minimizable : 最小化按钮, 默认没有
maximizable : 最小化按钮
closable : 关闭按钮
fit : to set the panel size fit it's parent container.

iconCls : 图标, 请参考 themes/icon.css 中的图标

3. 调用panel的方法

3.1 方式

$('#p').panel('methodName')

3.2 常用方法

open, close, destroy

4. 完整程序

<html>
<head>
<title>01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- js: jQuery -->
<script type="text/javascript"
	src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>

<!-- js: EasyUI -->
<script type="text/javascript"
	src="js/jquery-easyui-1.2.6/jquery.easyui.min.js" charset="UTF-8"></script>

<!-- js: I18N -->
<script type="text/javascript"
	src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>

<!-- css: theme -->
<link rel="stylesheet"
	href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link>

<!-- css: icon -->
<link rel="stylesheet" href="js/jquery-easyui-1.2.6/themes/icon.css">
<link>
<!--  
The panel is used as a container for other contents. 
It is the base component for building other components such as layout, tabs, accordion, etc. 
It also provides built-in collapsible, closable, maximizable and minimizable behavior and other customized behavior. 
Panels can be easily embedded into any position of web page.   
  -->
<script type="text/javascript">
	$(function() {
	/*	
		// 设置panel的属性 $("#p").panel({....})
		$('#p').panel({
			width : 500,
			height : 150,
			title : 'My Panel',
			tools : [ {
				iconCls : 'icon-add',
				handler : function() {
					alert('new')
				}
			}, {
				iconCls : 'icon-save',
				handler : function() {
					alert('save')
				}
			} ]
		});

	*/
	});
</script>
</head>

<body>
	<!--  
		collapsible : 折叠 按钮	, 默认没有
		minimizable : 最小化 按钮, 默认没有
		maximizable : 最小化按钮
		closable	: 关闭按钮
		
		iconCls		: 图标, 请参考 themes/icon.css 中的图标
	-->
	<div id="p" 
		class="easyui-panel" 
		title="My Panel by class"
		style="width:500px;height:150px;padding:10px;background:#fafafa;"
		collapsible="true"
		minimizable="true"
		maximizable="true"
		closable="true"
		iconCls="icon-save"
	>
		<p>panel content.</p>
		<p>panel content.</p>
	</div>
	
	<!-- 
		调用panel的方法  $('#p').panel('methodName')
		隐藏后, 可以看见 dom结点灰显(Firebug中查看 display:none)	
	-->
	<!-- open -->
	<button id="openBtn" value="open">open</button>
	<script type="text/javascript">
		$("#openBtn").click(function(){
			$("#p").panel('open');
		});
	</script>
	<!-- close -->
	<button id="openBtn" value="close" οnclick="$('#p').panel('close')">close/hide</button>
	<!-- destroy -->
	<button id="openBtn" value="close" οnclick="$('#p').panel('destroy')">destroy</button>
	
	
	<!--  
  	<div id="p" style="padding:10px;">    
  		<p>panel content.</p>    
  		<p>panel content.</p>
  	</div> 
  -->




</body>
</html>