EasyUI 学习笔记

最新推荐文章于 2024-06-21 23:54:00 发布

noisy_wind

最新推荐文章于 2024-06-21 23:54:00 发布

阅读量694

点赞数

分类专栏：前端文章标签： easyui

本文链接：https://blog.csdn.net/noisy_wind/article/details/104107379

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、EasyUI 简介

1. 概念

EasyUI ：（简单用户界面）简单的界面设计框架，作用主要是用来设计网站的后台管理系统，帮助程序员快速的构建网站界面。

2. 特点

基于 jQuery 的一个插件

3. 使用目录介绍

demo：EasyUI 的效果示例
locale：EasyUI 的语言文件
plugins：EasyUI 的案例切割的 js 文件
src：源码
themes： EasyUI 提供的 css 样式
jquery.easyui.min.js：EasyUI 的插件
jquery.min.js：EasyUI 依赖的 jQuery 文件

二、EasyUI 使用

步骤1.

将EasyUI提供的js文件和主题（themes）样式存放到项目的指定位置
在这里插入图片描述

步骤2.

在Html文档中引入EasyUI的插件

<!--引入主题样式-->
<link rel="stylesheet" type="text/css" v  href="themes/default/easyui.css" />
<!--引入图标样式-->
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<!--引入jQuery文件-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入EasyUi的js文件-->
<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>

步骤3.

在 HTML 文档标签上遵循 EasyUI 的文档规则使用 EasyUI 完成页面的开发

三、面板使用(panel)

1. 创建面板

创建一个 div 标签，并将 class 属性值改为 “easyui-panel”

<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>panel content.</p>   
    <p>panel content.</p>   
</div>

2. 面板属性

title ：面板的标题
data-options ：给面板添加常用的操作。具体参照 API

3. 创建按钮

<a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

4. 信息提示

// 写在 window.alert 的地方
$.messager.alert("我是一个警告框");

5. 示例

// 在icon.css 中添加 ：
/*自定义登录图标*/
.icon-mlogin{
	background:url('icons/tux.png') no-repeat center center;
}


<html>
	<head>
		<title>登录</title>
		<meta charset="UTF-8" />
		<!--引入主题样式-->
		<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
		<!--引入图标样式-->
		<link rel="stylesheet" type="text/css" href="themes/icon.css" />
		<!--引入jQuery文件-->
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--引入EasyUi的js文件-->
		<script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<!--声明css代码域-->
		<style type="text/css">
			table{
				margin: auto;
				margin-top: 20px;
			}
			tr{
				height: 40px;
				text-align: center;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			/*校验登录信息*/
				$(function(){
					
					//登录校验
					$("#btnCon").click(function(){
						//校验用户信息
						if($(":text").val()==""){
							//使用EasyUI的信息框进行提示
							$.messager.alert('登录提示',"用户名不能为空！","warning");
						}else if($(":password").val()==""){
							//使用EasyUI的信息框进行提示
							$.messager.alert('登录提示',"密码不能为空！","warning");
						}else{
							$("form").submit();
						}
					})
					//重置
					$("#btnCan").click(function(){
						$("form").get(0).reset();
					})
				})
		</script>
	</head>

	<body>
		<div id="panel_login" style="margin: auto;width: 500px;margin-top: 100px;">
			<!--创建登录面板-->
			<div id="login" class="easyui-panel" title="登录" data-options="iconCls:'icon-mlogin',minimizable:true,maximizable:true
				,collapsible:true,closable:true" style="width: 500px;height: 200px;">
				<form action="02_main.html" method="get">
					<table>
						<tr>
							<td>用户名:</td>
							<td>
								<input type="text" name="uname"/>
							</td>
						</tr>
						<tr>
							<td>密&nbsp;&nbsp;&nbsp;码:</td>
							<td>
								<input type="password" name="pwd" />
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">登录</a>&nbsp; &nbsp;&nbsp;
								<a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">重置</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</body>

</html>