EasyUI 第一个demo

最新推荐文章于 2025-06-19 14:19:06 发布

JamesZYW

最新推荐文章于 2025-06-19 14:19:06 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUI 文章标签： EasyUI 第一个demo

本文链接：https://blog.youkuaiyun.com/zhanyouwen/article/details/51613425

EasyUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用EasyUI创建第一个前端界面。EasyUI是一个轻量级的前端框架，以其简洁大气的设计和浏览器自适应性而受到广泛应用。通过下载jquery-easyui-1.2.6.zip，解压并将其文件放入Web项目的WebRoot目录，然后在新的jsp页面中引入必要的js和css资源，即可开始使用EasyUI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EasyUI作为一个轻量级的前端框架，目前用在很多方面，它所呈现出来的页面简洁大方，可以自适应浏览器的大小。本文用一个简单的例子来入门EasyUI，所用版本为jquery-easyui-1.2.6。

步骤：

1.下载jquery-easyui-1.2.6.zip，并解压，将解压后的文件直接复制到Web项目的WebRoot目录下

2.新建一个jsp页面，导入jquery-1.7.2.min.js、esayui.css、icon.css、jquery.easyui.min.js、easyui-lang-zh_CN.js。

具体代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- 导入jquery-1.7.2.min.js   依赖库-->
	<script type="text/javascript" src="jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
	<!-- 导入esayui.css   全局样式-->
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.6/themes/default/easyui.css">
	<!-- 导入icon.css  图片样式-->
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.2.6/themes/icon.css">
	<!-- 导入jquery.easyui.min.js  核心库-->
	<script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<!-- 导入easyui-lang-zh_CN.js  国际化-->
	<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
  	<script type="text/javascript">
  		$(function(){
  	  		// 询问是否删除对话框 
			$.messager.confirm('提示','确定删除这条记录么?',function(result){
				if(result){
					alert('确定');
				}else{
					alert('取消');
				}
			});
  	  	});
  	
  	</script>
  </head>
  <body>
    
  </body>
</html>