博客

EasyUI入门（panel）

  • Post author:
  • Post category:其他


今天我简单的了解了一下EasyUI，easyui是一种基于jQuery的用户界面插件集合，用来编写用户界面。下面我们来简单的使用一下。

所谓的简单使用，就是我们按照文档上的Demo写一下，看看各个属性，方法和事件的作用。




一.所需要的文件和文档



要想使用EasyUI，我们首先要下载这个框架，我们只需要去官网下载，然后将解压后的文件放到WebContent文件夹下。

除了下载easyui框架，我们肯定也需要下载帮助文档，用来帮助我们使用easyui框架来编写用户界面。




二.引入必要的js和css文件



easyui为我们提供了css样式，js函数。我们只需要在jsp页面中引入这些js和css就能够编写出优美的用户界面。 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
 
</script>	
</head>
<body>
 
</body>
</html>

1.由于easyui框架是基于jquery编写的，所以我们要引入jquery.min.js文件。

2.引入jquery.easyui.min.js文件，我们可以使用easyui框架的各种功能。

3.引入easyui-lang-zh_CN.js文件，让easyui支持中文。

4.引入easyui.css文件，我们可以使用easyui提供的各种样式。

5.引入easyui.css文件，我们可以使用easyui提供的标签库。




三.Hello easyui



下面我们就来写一下帮助文档中的Demo，看看有什么效果。

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


1.通过标签创建面板

通过标签创建面板更简单。添加’easyui-panel’类ID到<div/>标签。 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
 
</script>	
</head>
<body>
   <div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true">   
    <p>这是一首简单的小情歌</p>   
    <p>This is panel content.</p>   
  </div>  
</body>
</html>

页面效果图：


2.创建面板程序

让我们创建面板右上角的的工具栏。 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
   $(function(){
	   $('#p').panel({    
		   width:500,    
		   height:150,    
		   title: 'My Panel',    
		   tools: [{    
		     iconCls:'icon-add',    
		     handler:function(){
		    	 alert('new')
		    	 }    
		   },{    
		     iconCls:'icon-save',    
		     handler:function(){
		    	 alert('save')
		    	 }    
		   }]    
		 }); 
   });
</script>	
</head>
<body>
   <div id="p" style="padding:10px;">    
    <p>这是一首简单的小情歌</p>   
    <p>This is panel content.</p>   
  </div>  
</body>
</html>

页面效果图：


3.移动面板

我们可以通过面板panel对象提供的move方法来移动面板的 位置。这里需要注意一下，我们在移动面板位置的时候我们首先要初始化面板的位置（如果没有定义则会出现在左上角）和面板是按什么方式进行移动的（这里使用的是绝对定位）。 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
   $(function(){
	   $('#p').panel({    
		   width:500,    
		   height:150,    
		   title: 'My Panel',    
		   tools: [{    
		     iconCls:'icon-add',    
		     handler:function(){
		    	 alert('new')
		    	 }    
		   },{    
		     iconCls:'icon-save',    
		     handler:function(){
		    	 $('#p').panel('move',{    
		    		  left:100,    
		    		  top:100    
		    		}); 
		      }
		   }]    
		 }); 
   });
</script>	
</head>
<body>
   <div id="p" style="padding:10px;" data-options="iconCls:'icon-login',style:{position:'absolute',left:200,top:200}">    
    <p>这是一首简单的小情歌</p>   
    <p>This is panel content.</p>   
  </div>  
</body>
</html>

页面效果描述：

jsp加载的时候，面板会出现在距离上200px，距离左200px的位置，当我们点击保存按钮后，面板的位置会移动到距离上100px，距离左100px的位置。


4.读取内容

当加载成功的时候让我们通过ajax加载面板内容并显示一些消息。从URL读取远程数据并且显示到面板，注意：内容将不会被载入，直到面板打开或扩大，在创建延迟加载面板时是非常有用的。 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门</title>
<!-- 在head中引入必要的js文件和css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/default/easyui.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.6.6/themes/icon.css"/>

<script type="text/javascript">
   $(function(){
	   $('#p').panel({    
		   width:500,    
		   height:150,    
		   title: 'My Panel', 
		   collapsed:true,
		   collapsible:true,
		   tools: [{    
		     iconCls:'icon-add',    
		     handler:function(){
		    	 alert('new')
		    	 }    
		   },{    
		     iconCls:'icon-save',    
		     handler:function(){
		    	
		      }
		   }]    
		 }); 
	   
	   $('#p').panel({    
		    href:'1.jsp',    
		    onLoad:function(){    
		        alert('loaded successfully');    
		    }    
		}); 
   });
</script>	
</head>
<body>
   <div id="p" style="padding:10px;">    
    <p>这是一首简单的小情歌</p>   
    <p>This is panel content.</p>   
  </div>  
</body>
</html>

页面效果图：

当打开面板时，会加载信息，触发onload函数。

在点击确定后，加载1.jsp中的body体中的文本内容。




四.总结



其他的一些属性，方法，事件可以自己试验一下，这篇文章只是演示了一下panel面板中的Demo示例。


版权声明：本文为qq_41160264原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。