easyUI--panel

最新推荐文章于 2024-07-16 22:31:12 发布

Tate-Ling

最新推荐文章于 2024-07-16 22:31:12 发布

阅读量653

点赞数

文章标签： easyui panel

本文链接：https://blog.csdn.net/szzt_lingpeng/article/details/30742875

版权

未整理专栏收录该内容

5 篇文章 0 订阅

订阅专栏

a) 注意事项: 在引入easyUI包之后, 尽量少使用: open, close等系统方法, 否则可能会照成兼容性问题

b) 如不使用easyUIloader, 那么在使用easyUI中基本上导入以下几个JS和CSS就够了:

<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>

本人测试例子

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery EasyUI demo</title>

		<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>
		<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
	</head>
	<script type="text/javascript">
	$(function() {
		$("#pppp").panel({
			onBeforeOpen : function() {
				alert(1);
				return false;
			}
		});
	});

	function open1() {
		$("#pppp").panel("open");
	}

	function close1() {
		$("#pppp").panel("close");
	}

	function destroy1() {
		$("#pppp").panel("destroy");
	}
</script>
	<body>
		<div id="pppp" class="easyui-panel" title="My Panel"
			style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"
			data-options="iconCls:'icon-add',closable:true, closed:false,  
                collapsible:true,minimizable:true,maximizable:true">
			<p>
				panel content.
			</p>
			<p>
				panel content.
			</p>
		</div>
		<br />
		<input type="button" οnclick="open1();" value="open" />
		<br />
		<input type="button" οnclick="close1();" value="close" />
		<br />
		<input type="button" οnclick="destroy1();" value="destroy" />
		<br />
	</body>
</html>