02-EasyUI尚硅谷-panel+window+dialog

1.引入easyui组件

Panel

2.纯html方式

	<!-- 实现方式：1.html	2.html+js -->
	<div id="myPanel" class="easyui-panel" 
		style="width:500px;height:200px;padding:10px;background:#fafafa;"
		title="My Panel"
		iconCls="icon-save"
		closable="true"
		collapsible="true"
		minimizable="true"
		maximizable="true">
		<p>XXX公司春节放假通知事宜</p>
	</div>

 效果：

3.html+js方式

	<div id="myPanel" style="background: #fafafa;">
		<p>XXX公司春节放假通知事宜</p>
	</div>

<script type="text/javascript">
	$(function() {
		$("#myPanel").panel({
			title: 'My Panel',
			width: 500,
			height: 200,
			padding: 10,
			iconCls: 'icon-save',
			closable: true,
			collapsible: true,
			minimizable: true,
			maximizable: true
		});
	});
</script>

 效果：

window

html:

	<div id="myWindow" class="easyui-window" title="我的窗口"
		style="width:500px;height:200px;">
		<p>初次见面，请多多指教！</p>
	</div>

 html+js:

	<div id="myWindow" class="easyui-window">
	</div>

	$(function() {
		$("#myWindow").window({
			// 这是属性
			title: '我的窗口',
			width: 500,
			height: 200,
			modal: true,
			content: '你好！初次见面，请多多指教！',
			left: 400,
			top: 150,
			// 这是事件
			onOpen: function() {
				alert("窗口打开了");
			}
		});
       });

 效果：

需求：点击按钮打开窗口，点击按钮关闭窗口

	<a id="openWin" class="easyui-linkbutton">点击我打开窗口</a>
	<a id="closeWin" class="easyui-linkbutton">点击我关闭窗口</a>
	<div id="myWindow" class="easyui-window">
	</div>

	$(function() {
		// 点击按钮就打开window
		$("#openWin").click(function() {
			//调用方法，一般第一个参数是方法名
			$("#myWindow").window('open');
		});
		// 点击按钮就关闭window
		$("#closeWin").click(function() {
			//调用方法，一般第一个参数是方法名
			$("#myWindow").window('close');
		});
		$("#myWindow").window({
			// 这是属性
			title: '我的窗口',
			width: 500,
			height: 200,
			//modal: true,
			content: '你好！初次见面，请多多指教！',
			left: 400,
			top: 150,
			closed: true,
			// 这是事件
			onOpen: function() {
				//alert("窗口打开了");
			}
		});
        });

效果：

dialog

	<div id="myDialog" class="easyui-dialog" 
		style="width:500px;height:200px;"
		title="我的对话框">
		<p>我的内容</p>
	</div>

html+js:

<div id="myDialog"></div>

	$(function() {
		$("#myDialog").dialog({
			title: '来自星星的朋友',
			content: '<h3 style="color: blue;text-align: center;margin-top: 40px;">你好！地球的朋友！</h3>',
			height: 200,
			width: 400,
			iconCls: 'icon-ok',
			toolbar: [
				{
					text: "新增",	
					iconCls: 'icon-add',
					handler: function() {
						alert("新增了");
					}
				},
				{
					text: "删除",
					iconCls: 'icon-remove',
					handler: function() {
						alert("删除了");
					}
				},          
				{
					text: "修改",
					iconCls: 'icon-edit',
					handler: function() {
						alert("修改了");
					}
				},         
				{
					text: "搜索",
					iconCls: 'icon-search',
					handler: function() {
						alert("搜索了");
					}
				}          
			],
			buttons: [
				{
					text: "确定",
					iconCls: 'icon-ok',
					handler: function() {
						alert("确定了");
					}
				},
				{
					text: "取消",
					iconCls: 'icon-cancel',
					handler: function() {
						alert("取消了");
					}
				}
			]
		});
        });

效果：