jQuery Eazyui的学习和使用（二）

既然这么优秀，我们赶紧来学学吧~

解压得到这些文件夹：

下面开始学习使用。（根据提供的demo学习常用基础控件的使用）

基础面板

引入对应样式文件和js文件后就可以直接使用了。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--基本ui-->
		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
		<!--图标-->
		<link rel="stylesheet" type="text/css" href="../themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../demo/demo.css">
		<!-- 引入jQuery  要在easyui.min之前声明-->
		<script type="text/javascript" src="../jquery.min.js"></script>
		<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	</head>
	<body>
		<!--基础面板-->
		<div id="p" class="easyui-panel" title="基础面板" style="700px;height:300px;padding:10px;">
			<p style="font-size:14px">基础面板，常用的基本容器</p>
			
		</div>		
	</body>
</html>

带有工具的面板

右上角的按钮都是封装好的！真是方便

实现代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--基本ui-->
		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
		<!--图标-->
		<link rel="stylesheet" type="text/css" href="../themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../demo/demo.css">
		<!-- 引入jQuery -->
		<script type="text/javascript" src="../jquery.min.js"></script>
		<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	</head>

	<body>
		<!--基础面板-->
		<div id="p" class="easyui-panel" title="基础面板" style="700px;height:300px;padding:10px;">
			<p style="font-size:14px">基础面板，常用的基本容器</p>

		</div>
		<!--带有工具的面板 感觉快要可以制作桌面应用了-->
		<div class="easyui-panel" style="height:350px;padding:5px;">
			<div id="p1" class="easyui-panel" title="有工具的基础面板" style="600px;height:200px;padding:10px;" data-options="footer:'#ft',iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
				<p style="font-size:14px">基础面板，常用的基本容器</p>

				<!--脚部-->
				<div id="ft" style="padding:5px;">
					Footer Content.
				</div>
			</div>
		</div>
		
	</body>

</html>

面板嵌套

实现代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--基本ui-->
		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
		<!--图标-->
		<link rel="stylesheet" type="text/css" href="../themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../demo/demo.css">
		<!-- 引入jQuery -->
		<script type="text/javascript" src="../jquery.min.js"></script>
		<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	</head>

	<body>
		<!--面板嵌套-->
		<div style="margin:20px 0 10px 0;"></div>
		<div class="easyui-panel" title="Nested Panel" style="700px;height:200px;padding:10px;">
			<div class="easyui-layout" data-options="fit:true">
				<div data-options="region:'west',split:true" style="100px;padding:10px">
					Left Content
				</div>
				<div data-options="region:'east'" style="100px;padding:10px">
					Right Content
				</div>
				<div data-options="region:'center'" style="padding:10px">
					Right Content
				</div>
			</div>
		</div>
	</body>

</html>

相关阅读:
标准I/O的缓冲
 Linux 的文件类型
 引用和指针
 信号-总结
 实时信号
 信号的其它特性
 信号处理器函数
 信号集 / 信号掩码（阻塞信号传递）
显示信号描述
 发送信号
原文地址：https://www.cnblogs.com/wobeinianqing/p/6692826.html