1.什么是easyUI?
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
简单地说,easyUI就是一种基于jQuery的用户界面插件集合。使用easyUI你不需要写很多代码了,只需要通过编写一些简单的HTML标记,就可以定义用户界面。而且,easyUI是个完美支持HTML5网页的完整框架,它可以节省您网页开发的时间和规模。
2.下载easyUI
接着,再点击Download按钮,正式进入到easyUI的下载界面。
紧接着,点击Download按钮即可下载easyUI了
3.easyUI的快速入门
3.1.创建项目,并在项目中导入easyUI所需的样式和js
新建一个动态web工程,例如easyui,把解压后的jquery-easyui-1.8.8目录中的如下东东添加到项目中去
将以上这些目录和文件拷贝到项目之后,就变成下面这个样子
3.2.以linkbutton(按钮)组件为例快速入门easyUI
3.2.1.在页面中导入easyUI所需的js和css样式文件
新建一个01-easyui.html页面。引入必要的js和css样式文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>easyUI的简单入门</title>
<!-- 引入easyUI的css样式文件和js文件 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
注意:因为easyUI基于jQuery的,所以在引入js文件的时候必须先引入query.min.js再引入jqery.easyui.min.js。
3.2.2.easyUI使用的两种方式
easyUI的使用主要有两种方式,一种是在HTML标签中声明class来使用easyUI样式,一种是编写js代码。
- 第一种方式:在HTML标签中声明class来使用easyUI样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>easyUI的简单入门</title> <!-- 引入easyUI的css样式文件和js文件 --> <link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="./js/themes/icon.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.easyui.min.js"></script> </head> <body> <!-- easyUI的简单入门(方式一:使用css的方式)--> <!-- iconCls(属性): 小图标样式 --> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a> </body> </html>
可以看到超链接变成了一个还算好看的按钮,而且按钮前面还有一个加号的图标,这是由于将iconCls属性的值设置为了’icon-add’,
当然了,可以设置成其他的值,比如’icon-search’、'icon-remove’等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>easyUI的简单入门</title>
<!-- 引入easyUI的css样式文件和js文件 -->
<link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
<!-- easyUI的简单入门(方式一:使用css的方式)-->
<!-- iconCls(属性): 小图标样式 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超链接</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超链接</a>
</body>
</html>
- 第二种方式:编写js代码的方式
首先,在01-easyui.html页面中创建一个超链接,并编写如下的一段js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>easyUI的简单入门</title>
<!-- 引入easyUI的css样式文件和js文件 -->
<link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").linkbutton({
iconCls: 'icon-search'
})
})
</script>
</head>
<body>
<!-- easyUI的简单入门(方式一:使用css的方式)-->
<!-- iconCls(属性): 小图标样式 -->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超链接</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超链接</a>
<!-- 方式二:编写js代码的方式 -->
<a href="#" id="btn">超链接</a>
</body>
</html>