Panel（面板）

最新推荐文章于 2026-03-28 10:27:15 发布

原创最新推荐文章于 2026-03-28 10:27:15 发布 · 2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

easyUI 专栏收录该内容

9 篇文章

订阅专栏

面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <title>Panel:通过标签创建面板</title>
	    <!-- 引入easyUI:JQuery文件支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
	  	<!-- 引入easyUI -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
	  	<!-- 引入中文支持 -->
	  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
	  	<!-- 引入easyUI主题css文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
	  	<!-- 引入easyUI 图标导航文件 -->
	  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link>
	</head>
  
	<body>
		<%
			/*
				minimizable:最小化
				maximizable:最大化
				closable:关闭
				tools:工具菜单--->数组
			*/
		 %>
		<div id="p" class="easyui-panel" title="面板"     
		        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
		        data-options="iconCls:'icon-save',closable:true,    
		                collapsible:true,minimizable:true,maximizable:true,tools:[
					{
						iconCls:'icon-add',
						handler:function(){alert('add');}
					},{
						iconCls:'icon-edit',
						handler:function(){alert('edit');}
					}
				]">   
		    <p>墨渐生微</p>   
		    <h2>欢迎关注</h2>   
		</div>
	</body> 
</html>