js day45 EasyUI_45 1ysui-优快云博客

本文链接：https://blog.youkuaiyun.com/opopopwqwqwq/article/details/51583709

1.介绍EasyUI15

JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的

目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者

不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解

的只有一些简单的html标签.

适用场景：

1. 如果公司里只有“美工”，没有前端人员，所以一般是程序员兼职前端，所以一

般会找一个好用且功能全的js UI框架（当然，还有免费），这样页面基本就不用

花费太多功夫了。

2.项目要求不高:需要快速开发对UI和性能要求不是特别高的的中小型应用系统。

学习EasyUI前提:JQuery的基础知识

目录结构说明：

Demo目录：示例

Locale目录：国际化文件

Plugins目录：插件

src目录：源码

Themes目录：主题

jquery.min.js文件：jQuery文件

jquery.easyui.min.js文件：EasyUI主文件

2.案例引入如何使用EasyUI Resizable

*.如何正确引入EasyUI

1. 将jquery-easyui-1.4.1.zip解压后的文件全部复制到项目下的easyui目录下

2. 在02_resizable下的01.html中粘贴进入以下语句:

	<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
	<!--demo.css文件是对easyui下的demo中的所有案例的样式起作用-->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

页面加载完毕之后,easyui的主程序去扫面页面上所有的html标签,看那些标签的class的值是以
easyui-开头,找到这些class值以"easyui-"开头的标签之后,截取到"easyui-"之后的部分,
"resizable",EasyUI主程序会将这些标签(节点)处理为对应的效果,鼠标拖动可以改变大小,
处理的过程我们术语也叫做"渲染".

3. 在body中增加

    div{width:300px;height:300px;background:red;}
    <div class="easyui-resizable"></div>

1.js+html

页面加载完毕之后,获取id为rr的节点(标签),调用easyui主程序提供的一个函数resizable这个函数,

将id为rr的节点渲染为鼠标拖动可以改变大小这个效果,渲染为resizable这个组件

2.easyui中几乎大部分的组件都提供了2种实现方式

* html

*html+Jquery代码

*.HTML方式实现Resizable

<body>
<div id="rr" class="easyui-resizable" data-options="maxWidth:400,maxHeight:400" 
	style="width:100px;height:100px;border:1px solid red;">
</div>

html实现的组件中,为组件增加属性是放在data-options这个属性中.属性是以键值对的形式存在,

多个属性之间以逗号隔开,属性值的类型一定要注意: 1.数字类型不要加引号,不要加单位

2.字符串类型引号不可少 3.布尔类型不加引号.

*.JS+HTML实现Resizable

<script>
  //window.onload = function(){}  //jS的加载时机问题
  $(function(){
  	//必须保证下列代码在页面加载完毕之后执行
     //$('#rr').resizable({maxWidth:400,maxHeight:400});
	 $('#rr').resizable(); 
  })	
</script>
</head>
<body>
<div id="rr" style="width:100px;height:100px;border:1px solid red;"></div>
</body>

1.JS的形式为组件增加属性:为resizable函数中传递一个对象,

属性以键值对的形式存在在这个对象中.

多个属性之间以逗号隔开,

属性值的类型遵循同样的规律

最后一个属性之后不可加逗号

*EasyUI的实现原理

Html方式:

页面加载完毕之后,EASYUI的文件在页面上寻找那些标签的class名字为easyui

开头,找到之后,将eayui-”name”,name拿到,拿到之后将这些标签处理为(渲染为)可以

拖动改变大小的效果.

JS方式:

页面加载完毕之后,获取页面上id为rr的元素,easyui的resizable函数将

其处理为(渲染为)可以拖动改变大小的效果

PS:其中的参数是一个json格式的对象,代表resizable这个组件的属性

*Resizable属性

最大高度/宽度最小高度/宽度是否不可用调整方位边缘大小

n, e, s, w, ne, se, sw, nw, all

n:north 北部 e:east 东部 w:west 西部 s:south 南部

*Resizable事件

onStartResize onResize onStopResize

*Resizable方法

options enable disable

总结:

组件:component cmpt

*几乎EasyUI的每个组件都提供了2种实现方式 HTML JS+HTML

*HTML形式实现EasyUI组件的规律

<html标签名 class=”easyui-cmptName”></html标签名>

*JS形式实现EasyUI组件的规律

$(function(){

$(“#myId”).cmptName( {属性列表});

});

<html标签 id=”myId”></html标签>

*如何调用EasyUI组件的属性

Html形式调用组件的属性:

<html标签名 class=”easyui-cmptName”

data-options=”pname1:vname1,pname2:vname2,pname3:vname3”>

</html标签名>

1.data-options=””

2.各个属性之间以”,”分开

3.各个属性以”属性名:属性值”来调用

JS形式如何调用组件的属性

$(function(){

$(“#rr”).resizable({

pname1:vname1,

pname2:vname2,

pname3:vname3

});

})

1.必须将渲染代码放置在$(functon(){ }); 区域中

2.获取到对应的节点之后,调用cmptName这个方法可以将组件标签为对应的组件

$(“#id”).cmptName();

3.JS调用组件属性,是通过一个对象传递进去的

$(“#id”).cmptName({});

4.属性以键值对的形式提供,各个属性之间用逗号隔开

$(“#id”).cmptName({

p1:v1,

p2:v2

});

5.注意组件的属性值的类型问题:如果类型要求为number,不要加任何单位,

只提供数字即可,如果为字符串,用引号括起来,如果为布尔类型,不

要加引号

eg: $(“#rr”).resizable({maxHeight:50px,minHeight:’40’,disable:’true’});//ERROR

*如何调用EasyUI组件的事件

$(“#myId”).comptName({

//属性列表p1:v1,p2:v2,p3:v3

on事件名1:function(){

on事件名2:function(){

}

});

<script>
  //window.onload = function(){}  //jS的加载时机问题
  $(function(){
  	//必须保证下列代码在页面加载完毕之后执行
     $('#rr').resizable({
	 	 maxWidth:400,
		 maxHeight:400,
		 minWidth:40,
		 minHeight:40,
		 edge:30,
		 handles:'all',
		 disabled:false,
		 onStartResize:function(){$("#dv1").html("我是开始拖动的时候触发的事件") },
		 onResize:function(){$("#dv2").html("我是开始拖动期间触发的事件") },
		 onStopResize:function(){$("#dv3").html("我是拖动结束的时候触发的事件") }
     });
	  
  })	
</script>

组件的事件调用:

1.事件是组件特有的.

2.在属性之后事件名:function(){}

3.多个事件以逗号隔开

*如何调用EasyUI组件的方法

$(“#myId”).comptName(“方法名”);

Eg: var ops=$(“rr”).resizable(“options”); //调用无参数的方法

$(“rr”).resizable(“fnName”,参数1,参数2,参数3....); //调用有参数的方法

组件的通用属性:

为组件增加图标: iconCls:’icon-add’ edit/help/ok/cancel/remove/cut...

enable: disabled: text:

组件的通用方法:

options enable disable

Easyui目录文件含义:

Locale:国际化文件

Pulgins:各个组件的实现

Demo:各个组件的案例使用

src:源文件

Themes:主题文件

3. LinkButton 组件

* 用html形式创建一个支持图标的LinkButton

* 用js形式创建一个支持图标的LinkButton

* 常用属性研究

按钮是否可用按钮上的文字按钮上的图标按钮上图标的位置

* 常用方法

options disable enable

* 案例:

1.点击按钮跳转到其他页面

2.用JQuery的形式为按钮绑定点击事件,点击按钮弹出一个警告框

	<script>
		$(function(){
			$("#rr").linkbutton({
				iconCls:'icon-add',
				text:'我是按钮的文字',
				iconAlign:'right',
				disabled:false
			});
			
			$("#cc").click(function(){
				 alert("AAAAAAAAA");
				 return false;
			});
		});
		
	</script>
</head>
<body>
<a id="rr" href="http://www.baidu.com"></a>
<a id="cc" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">我是按钮</a>

4.Panel组件

面板作为承载其它内容的容器.这是构建其他组件的基础(比如：layout,tabs,accordion等).

它还提供了折叠,关闭,最大化,最小化和自定义行为.面板可以很容易地嵌入到web页面的任

何位置。

*html形式创建Panel

*JS形式创建Panel

*Panel组件重要的属性

标题图标宽高左边距离和顶部距离

是否显示4个按钮以及初始化时4个按钮状态

自适应是否显示边框面板内容加载远程数据的时候提示信息 href

结合tools实现自定义工具栏:2种实现方式

	<script>
		$(function(){
			$("#rr").panel({
				title:'标题',
				width:300,
				height:150,
				iconCls:'icon-save',
				left:100,
				top:200, //left属性和top属性要想起作用,必须保证组件的定位方式为绝对定位
				collapsible:true,
				minimizable:true,
				maximizable:true,
				closable:true,
				collapsed:false,
				minimized:false,
				maximized:false,
				closed:false,
				border:true,
				//content:'我是内容'
				href:'test.jsp',
				loadingMessage:'正在加载远程数据,请耐心等待'
				
			});
			
			//我们调用panel组件提供的方法,这个方法的名字是panel,
			//这个方法返回了组件本身,代表当前的panel
			//var obj=$("#rr").panel("panel");
			$("#rr").panel("panel").css("position","absolute");
			
		})
	</script>
</head>
<body>
<div id="rr"></div>
</body>

*Panel组件重要的事件

加载远程数据时被处触发

打开面板时被触发

*Panel组件重要的方法

测试面板属性,移动面板,为面板设置标题,重置面板,打开,关闭

*案例.

1. 利用Panel实现通过AJax远程加载,

	<script>
		$(function(){
			$("#rr").panel("panel").css("position","absolute");
			$("#rr").panel({
				onOpen:function(){alert("面板打开");},
				onLoad:function(){alert("加载远程数据");}
			});
		});
		function fn1(){
			alert("TTT");
			$("#rr").panel("move",{left:300,top:300});
		}
		function fn2(){
			$("#rr").panel("setTitle","ZZZZ");
		}
		function fn3(){
			$("#rr").panel("resize",{width:300,height:300});
		}
		function fn4(){
			$("#rr").panel("open");
		}
		function fn5(){
			$("#rr").panel("close");
		}
		function fn6(){
			$("#rr").panel({href:"test.jsp"});
		}
	</script>
</head>
<body>
	
	<button οnclick="fn1()">AA</button>
	<button οnclick="fn2()">AA</button>
	<button οnclick="fn3()">AA</button>
	<button οnclick="fn4()">AA</button>
	<button οnclick="fn5()">AA</button>
	<button οnclick="fn6()">AA</button><br/><br/><br/><br/>
	<div id="rr" class="easyui-panel" style="width:300px;height:150px;" data-options="title:'标题'"></div>
</body>

5. Messager组件

*使用messager实现传统的alert,comfirm,prompt对话框的调用

	<script>
		function fn1(){
			alert("TTTT");
			$.messager.alert('我的消息','这是一个提示信息！','error',function(){
				alert("TTTTTT");
			});

 
		}
		function fn2(){
			$.messager.confirm('确认对话框', '您想要退出该系统吗？', function(r){
				//alert(r);
				if (r){
		    		// 退出操作;
				}
			});
		}
		function fn3(){
			$.messager.prompt('提示信息', '请输入你的姓名：', function(r){
				if (r){
					alert('你的姓名是：' + r);
				}
			});
		}
	</script>
</head>
<body>
<button οnclick="fn1()">AAAAA</button>
<button οnclick="fn2()">BBBBB</button>
<button οnclick="fn3()">CCCCC</button>
</body>

*案例:页面右下角的广告弹窗制作

	<script>
		$(function(){
			$.messager.show({
				title:'我的消息',
				msg:'<a href="http://www.baidu.com"><img src="../images/11.jpg"/></a>',
				timeout:3000,
				showType:'slide'
			});

		});
	</script>

6.Window窗口

*Html形式实现窗口

*JS形式实现窗口

* 重要属性

1.窗口标题 2.是否显示4个按钮(最大化,最小化,关闭,折叠) 3.窗口是否可以关闭

4.窗口是否可以拖动 5.窗口是否可以改变大小 6.是否将窗口定位为模式化

* 事件完全继承自panel

* 方法

window hcenter vcenter center

var obj= $(“#rr”).window(“window”);

* 案例:

在页面上放置3个按钮,分别可以打开/关闭/刷新窗口内容

Window和Panel的区别:

1.Panel初始状态没有4个按钮,而Window支持

2.Panel不支持模态窗口,Window支持

3.Panel 不支持拖动,而Window支持

	<script>
		$(function(){
			$("#rr").window({
				title:'标题',
				width:300,
				height:150,
				draggable:false,
				resizable:false,
				modal:true
			});
		});
	</script>
</head>
<body>
	<input type="text"/>
<div id="rr"></div>

7. Dialog组件

*html实现Dialog组件

*js实现Dialog组件

*Dialog组件重要属性

1.窗口标题,

2.是否显示4个按钮(最大化/最小化/折叠/关闭),

3.是否可以改变该表对话框大小

4.结合toolbar显示顶部工具栏:2种实现方式

5.结合buttons显示底部工具栏:2中实现方式

*Dialog事件完全继承自window窗口

*Dialog方法

$(“#cc”).dialog(“dialog”); 返回外部窗口对象

* 案例:实现一个通过dialog保存学生的请求和响应案例.

总结:1. dialog组件初始状态只有关闭按钮

2. Dialog支持模态窗口

3.Dialog支持自定义窗口顶部工具栏和窗口底部按钮组

4.Dialog可以用来在弹窗中增加一条信息,或者修改一条信息,开发常用.

	<script>
		$(function(){
			$("#rr").dialog({
				title:'标题',
				width:300,
				height:150,
				toolbar:[{
					iconCls:'icon-add',
					handler:function(){
						$("<lable>用户名</lable>").appendTo($("#fm"));
						$("<input id='um' type='text' name='username'/>").appendTo($("#fm"));
					}
				},{
					iconCls:'icon-remove',
					handler:function(){
						$("#fm").children().remove();
					}
				}],
				buttons:[{
					iconCls:'icon-save',
					handler:function(){
						$.post("aa.jsp",{username:$("#um").val()},function(data){
							//alert(data);
							if(data=="ok"){
								//alert("TTT");
								$("#fm").children().remove();
							}
						});
					}
				},{
					iconCls:'icon-no',
					handler:function(){
						//通过调用dialog组件的关闭方法来关闭当前窗口
						//$("#rr").dialog("close");
						//通过更改组件的closed属性来实现关闭窗口
						$("#rr").dialog({closed:true});
					}
				}]
				
			});
		});
	</script>
</head>
<body>
<div id="rr">
	<form id="fm" method="post">
		
	</form>
</div>
</body>

8.ProgressBar组件

*html形式创建ProgressBar

*js形式创建ProgressBar

*ProgressBar需要掌握的属性:

height width value text

*ProgressBar 需要了解的事件

onChange

*ProgressBar 需要掌握的方法

options resize getValue setValue

	<script>
		$(function(){
			$("#rr").progressbar({
				height:30,
				width:400,
				text:'文字',
				value:50
			});
		});
		function fn1(){
			var v=$("#rr").progressbar("getValue");
			alert(v);
		}
		function fn2(){
			$("#rr").progressbar("setValue","80");
		}
		function fn3(){
			$("#rr").progressbar("resize",350);
		}
	</script>
</head>
<body>
	<button οnclick="fn1()">AA</button>
	<button οnclick="fn2()">BB</button>
	<button οnclick="fn3()">CC</button>
<div id="rr"></div>
</body>

* 案例

结合Ajax实现动态变化的进度条,增强用户体验性.在加载视频等较大资源文件时适用.

window.setInterval(getForm,1000);

Web:

心跳程序:

http协议:请求-->响应

统计当前在线人数登录时候:

下线.

9.Tabs组件

*html形式实现Tabs组件

* JS形式实现Tabs组件

* Tab组件重要属性

宽高自适应是否显示边框

结合tools实现自定义工具菜单

工具栏位置 toolPosition:left/right 选项卡位置 tabPosition:top bottom leftright

标签条的高度/宽度 tabHeight tabWidth

*Tab组件事件

载入Tab时触发 onLoad

选中Tab时触发 onSelect

增加选项卡时触发 onAdd

*Tab组件方法

exists表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。

add 添加选项卡

select 选中已经存在的某个选项卡

getTab 获取指定的选项卡上的面板组件

* 案例

1.页面上放置3个按钮

2.点击第一个按钮加载远程数据

3 .点击第2个按钮和第3个按钮时,为Tabs组件增加选项卡.并且仅仅各自

增加一次,再次点击按钮2和按钮3时,选中对应的选项卡

	<script>
		$(function(){
			$("#rr").tabs({
				width:500,
				height:150
			});
		});
		function fn1(){
			//选中对应的面板,去访问test.jsp中的数据
			$("#rr").tabs("select",0).panel('refresh','test.jsp');;
		}
		function fn2(){
			if($("#rr").tabs("exists",1))
			{
			    $("#rr").tabs("select",1);	
			}else{
				$("#rr").tabs("add",{
					title:'第二个选项卡的标题',
					content:'内容',
					closable:true
				})
			}
		}
		function fn3(){
           if($("#rr").tabs("exists",2))
			{
			    $("#rr").tabs("select",2);	
			}else{
				$("#rr").tabs("add",{
					title:'第三个选项卡的标题',
					content:'内容222222222',
					closable:true
				})
			}
		}
	</script>
</head>
<body>
	<button οnclick="fn1()">为第一个选项页(卡)加载远程数据</button>
	<button οnclick="fn2()">增加选项卡2</button>
	<button οnclick="fn3()">增加选项卡3</button>
<div id="rr">
  <div title="首页" data-options="href:'test.jsp'">首页的内容</div>
</div>
</body>

10.Form表单

* 属性 url

* 表单的事件 onSubmit,success

测试onSubmit和success事件

* 表单的方法 submit load clear

3button 载入数据,清除数据,提交数据

* 案例:

1.点击按钮使表单成为Ajax提交方式提交数据,并且处理回调数据,

调用成功之后,可以清除表单数据

$(“#fm”).form(‘submit’,{

url:’’,

onSubmit:function(){},

success:function(data){

var dt=eval(data);

}

});

	<script>
		function fn1(){
			var obj={username:'tom',userpass:'123'};
			$("#fm").form('load',obj);
		}
		
		function fn2(){
			$("#fm").form('clear');
		}
		
		function fn3(){
			$('#fm').form('submit', {    
		    url:'test.jsp',    
		    onSubmit: function(){    
		        // do some check    
		        // return false to prevent submit;
				//return false;
		    },    
		    success:function(data){    
		        //alert(data);
				var dt=eval("("+data+")");
				if(dt.success){
					alert(dt.message);
					$("#fm").form("clear");
				}else{
					alert(dt.message);
				}
		    }    
		});  
		}
	</script>
</head>
<body>
	<button οnclick="fn1()">载入数据</button>
	<button οnclick="fn2()">清除数据</button>
	<button οnclick="fn3()">提交数据</button>
	<form id="fm" method="post">
		用户名<input type="text" name="username"/><br/>
		密  码<input type="text" name="userpass"/><br/>
	</form>
</body>

11.Datagrid组件

* HTML形式实现,数据在HTML中

* HTML形式实现,数据在JSON文件中

*JS形式实现,数据在JSON文件中,加分页

* 常用属性

URL: 一个URL从远程站点请求数据

fitColumns:真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。

toolbar: 顶部工具栏的DataGrid面板。可能的值：

1) 一个数组，每个工具属性都和linkbutton一样。

2) 选择器指定的工具栏。

singleSelect 只能选中一行

pagination 如果为true，则在DataGrid控件底部显示分页工具栏。

* 常用方法

getSelected

返回第一个被选中的行或如果没有选中的行则返回null。

reload 重新载入

Easyui中对表单进行了包装,我们可以用包装后的方法来提交数据,本质上是对底层的ajax的包装,必须告诉EasyUI提交数据的方式是get/post

总结:排错的方式: Server:

页面端的调试: 数据的交互: FireFox -->FireBug -->网络

打印Javascript中的所有对象,alert(obj); //object

console.log(obj);

	<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
	<script>
		
		
		var url="";
		
		function addStu(){
			$("#fm").form("clear");
			$("#dlg").dialog("open");
			url="../stu?flag=addStu";
		}
		function editStu(){
			var row=$("#dg").datagrid("getSelected");
						if(row){
							$("#dlg").dialog("open");
							$("#fm").form("load",row);
							url="../stu?flag=uptStu&&id="+row.stuId;	
						}
		}
		function delStu(){
			var row=$("#dg").datagrid("getSelected");
						
						//alert(row); js中打印所有的对象都是object
						//在火狐的firebug下的控制台打印对象
						console.log(row);
						if(row){
							$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
							    if (r){    
							       $.post("../stu?flag=delStu&&id="+row.stuId,{},function(dt){
								   	   //alert(dt);
									   if(dt.result){
											alert(dt.msg);
											$("#dg").datagrid("reload")									   	
									   }
								   },"json");   
							    }    
							});
						}
		}
		
		function closeStu(){
			$("#dlg").dialog("close");
		}
		
		function saveStu(){
			//alert(url);
			$('#fm').form('submit', {    
			    url:url,    
			    onSubmit: function(){    
			    },    
			    success:function(data){    
			        //alert(data)
					var dt=eval("("+data+")");
					if(dt.result){
						//alert(dt.msg);
						$("#dg").datagrid("reload");
						$("#dlg").dialog("close");;
						
					}    
			    }    
			});  
			

		}
	</script>
</head>
<body>
	<table id="dg" class="easyui-datagrid" data-options="url:'../stu?flag=getAllStu',pagination:true,width:700,height:300,singleSelect:true,toolbar:'#tt',fitColumns:true">   
	    <thead>   
	        <tr>   
	            <th data-options="field:'stuNum',width:100">学号</th>   
	            <th data-options="field:'stuName',width:100">姓名</th>   
	            <th data-options="field:'stuSex',width:100">性别</th>   
	            <th data-options="field:'stuAge',width:100">年龄</th>   
	            <th data-options="field:'stuQQ',width:100">QQ</th>   
	        </tr>   
	    </thead>
    </table>
	<div id="tt">
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" οnclick="addStu()">新增</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" οnclick="editStu()">编辑</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" οnclick="delStu()">删除</a>
    </div>
	<div id="dlg" class="easyui-dialog" style="width:220px;height:auto" data-options="buttons:'#btns',closed:true">
		<form id="fm" method="post">
			学号:<input type="text" name="stuNum"/><br/>
			姓名:<input type="text" name="stuName"/><br/>
			性别:<input type="text" name="stuSex"/><br/>
			年龄:<input type="text" name="stuAge"/><br/>
			扣扣:<input type="text" name="stuQQ"/><br/>
		</form>
	</div>
	<div id="btns">
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" οnclick="saveStu()">保存</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" οnclick="closeStu()">取消</a>
	</div>  
</body>

12.Layout组件和 Accordion组件

*html形式实现普通Layout组件效果

*html形式实现页面整体Layout 组件效果

*html形式实现Accordion组件效果

13.案例开发

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
       
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

</head>
<body>   
   <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
    <div title="标题1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
       content1   
    </div>   
    <div title="标题2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
        content2    
    </div>   
    <div title="标题3">   
        content3    
    </div>   
</div>  
</body>

	<script>
		$(function(){
			$("a[name=nm]").click(function(){
				//alert("TTTTT");
				
				//获得当前链接的文本内容
				var title=$(this).html();
				
				//获得当前组件的href属性
				var url=$(this).attr("href");
				
				addTab(title,url);
				return false;
			})
		})
		function addTab(title,url){
			if($("#tt").tabs("exists",title)){
				 $('#tabs').tabs('select', title);
			}else{
				$("#tt").tabs("add",{
					title:title,
					content:createFrame(url)
				});
			}
		}
		function createFrame(url){
			var s='<iframe src="'+url+'" height="100%" width="100%" scrolling="auto"  style="height:100%;width:100%" frameborder="0"></iframe>';
			return s;
		}
	</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'',split:false" style="height:30px;">
	    <span style="float:right;margin-right:30px">欢迎**** |<a class="easyui-linkbutton" data-options="iconCls:'icon-no'" href="#">退出</a></span>
	</div>   
    <div data-options="region:'south',title:'',split:true" style="height:50px;">
	   <div style="text-align:center;line-height:45px">******@qq.com</div>
	</div>   
       
    <div data-options="region:'west',title:'导航管理',split:false" style="width:190px;">
		<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="fit:true">   
		    <div title="Title1" data-options="" style="overflow:auto;padding:10px;">   
		      <a name="nm" href="../03_linkbutton/01_hml_linkbutton.html">漂亮的按钮</a>   
		      <a name="nm" href="../11_datagrid/anli.html">人员的管理</a>   
		    </div>   
		    <div title="Title2" data-options="" style="padding:10px;">   
		      <a name="nm" href="../08_progressbar/04anli.html">漂亮的进度条</a>   
		      <a name="nm" href="../05_messager/02anli.html">谈广告窗口</a>
		    </div>   
		    <div title="Title3">   
		      <a name="nm" href="../09_tabs/03anli.html">tab组件</a>   
		      <a name="nm" href="../11_datagrid/anli.html">对话框</a>
		    </div>   
		</div>  
	

	</div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
			<div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">   
			    <div title="首页">   
			        首页的内容
			    </div>   
			</div> 
	
	</div>   
</body>