easyui(基础布局）

第五天537

已于 2022-05-14 20:31:04 修改

阅读量311

点赞数

文章标签： easyui jquery 前端

于 2022-05-14 20:29:16 首次发布

本文链接：https://blog.csdn.net/weixin_64549900/article/details/124773358

版权

本文介绍了EasyUI的概念，它是一个基于jQuery的富客户端UI框架，主要用于后台管理系统的页面排版。内容包括EasyUI的目录结构，如demo、locale、plugins等，并提供了按钮示例和弹窗实现。此外，还详细讲解了如何引入EasyUI的主题样式、图标库和JavaScript类库。

摘要由CSDN通过智能技术生成

1.概念

jQuery EasyUI简介：封装大量的jQuery插件(简化ajax，jquery，css样式，布局)

1.1什么是easyui?

JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架

1.2easyui的作用

既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。

1.3easyui 的目录说明

下载路径：EasyUI的官网地址为：EasyUI - helps you build your web pages easily

框出来的是必须要导入的基础文件

目录说明：

demo：例示，非常重要，以后做开发，记不起来代码，可以直接复制例示。

demo-moblie：手机端的例示，因为手机端已经有很多优秀UI框架，所以EasyUI在手机端基本没有人用的（忽略）。

locale：编码支持库

plugins：没有压缩过的插件源码

src：没有压缩过的核心源码

themes：主题样式，有个可以选择

easyloader.js：源码加载器

jquery.easyui.min.js：PC使用类库。

jquery.easyui.moblie.js：手机端使用类库

jquery.min.js：Jquery框架

2.示列

可以写一个界面用来引入

<!-- 1.导入主题样式   默认  default/easyui.css -->
<link rel="stylesheet" type="text/css"
	href="start/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" />
<!-- 2.导入easyui提供的图标样式库 -->
<link rel="stylesheet" type="text/css"
	href="start/js/jquery-easyui-1.5.5.2/themes/icon.css" />
<!-- 3.导入jQuery类库 -->
<script
	src="start/js/jquery-easyui-1.5.5.2/jquery.min.js"
	type="text/javascript" charset="utf-8"></script>
<!-- 4.导入easyui.js类库 -->
<script
	src="start/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"
	type="text/javascript" charset="utf-8"></script>
<!-- 5.导入汉化js类库 -->
<script
	src="start/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"
	type="text/javascript" charset="utf-8"></script>

<!-- 通过脚本的方式来将当前项目的绝对路径用全局js变量存储  -->
<script type="text/javascript" charset="utf-8">
	//定义一个全局属性
	var xPath = "${pageContext.request.servletContext.contextPath }";
</script>

按钮示例：

<%@ 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>Insert title here</title>
<!--通过include 指令引入common文件夹的easyui公共资源  -->
<%@ include file="start/common/easyui-link.jsp"%>
</head>
<body>

	<h3>原生态按钮</h3>
	<button>原生态按钮</button>
	<input type ="button" value = "原生态按钮"/>
	<a href = "#">原生态按钮</a>
	
	
	<!-- easyui按钮  通过超链接标签实现-->
	<h3>EasyUI按钮</h3>
	 <a href = "#" class = "easyui-linkbutton">easyui按钮</a>
	
	
</body>
</html>

实现弹窗

<!--通过include 指令引入common文件夹的easyui公共资源  -->
<%@ include file="start/common/easyui-link.jsp"%>
</head>
<body>
<h4>（1）HTML+CSS 实现easyui按钮</h4>
	<a  onclick="javascript:alert('easyui')" href="#" class="easyui-linkbutton" data-options = "width:'200px',iconCls:'icon-search',iconAlign:'left'">按钮</a>


<h4>（2）HTML+JavaScript(jQuery) 实现easyui按钮</h4>
	<a id = "oBtn" href="#">按钮</a>
	<script type="text/javascript">
		$(function(){
			$("#oBtn").linkbutton({
				width:'200px',
				//事件
				onClick:function(){
					//alert('呵呵 我出现了')
					//调用提供的方法_   禁用按钮
					$(this).linkbutton('disable');
				}
			});
		});
	
	</script>