jQuery EasyUI系列 1:jQuery EasyUI的简介和使用

1.什么是jQuery EasyUI

jQuery EasyUI是一组基于jQuery的UI插件集合，jQuery EasyUI的目标就是帮助Web前端开发人员能够很轻松的打造丰富且美观的前端界面。

官方网站：http://jeasyui.com

2.jQuery EasyUI的特点

1.基于jQuery用户界面的插件集合
2.为一些当前用于交互的js应用提供必要的功能
3.使用简单，不需要开发者写很多JavaScript代码，通常只需要写HTML标记来定义用户界面即可，功能很强大
4.支持HTML5
5.开发产品时可节省时间和资源
6.支持扩展，开发者可根据自己的需求扩展控件
7.有开源免费版本，可自己使用

3.学习jQuery EasyUI的条件

jQuery EasyUI是基于jQuery的UI库，所以开发者必须需要jQuery的基础。

4.jQuery EasyUI的使用

步骤：

1.到官网下载最新版的jQuery EasyUI版本：jquery-easyui-1.5.5.4.zip
2.解压后复制到需要使用到jQuery EasyUI的组件的项目中
3.在html代码里引入jQuery EasyUI的js文件和css文件就可以了

例子：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI示例</title>
<meta charset="UTF-8" />
// 引入jQuery，可以使用jQuery EasyUI里自带的jQuery,也可以使用自己下载的jQuery核心库
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
// 引入jQuery EasyUI的核心库，这里使用的版本是1.5.5
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
// 引入jQuery EasyUI的中文显示文件，
<script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js" ></script>
// 引入自己开发的js文件
<script type="text/javascript" src="js/index.js"></script>
// 引入jQuery EasyUI中自带的的核心CSS
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css" />
// 引入jQuery EasyUI的图标文件
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css" />
</head>
<body>

</body>
</html>

5.加载jQuery EasyUI的组件方式

5.1 使用class方式加载

使用class加载，把标签的class设置为：easyui-组件名

5.2 使用JS方式加载

为需要渲染的标签设置一个id属性，然后使用jQuery的语法取出标签，对标签进行调用加载

在js文件对标签进行处理：

$("#div1").组件名()

5.3 实例:使用jQuery EasyUI加载出一个dialog对话框组件

如图

3
各文件说明：

index.html为HTML代码存放文件
jquery-easyui文件夹用来存放jQuery EasyUI解压后的所有文件
js文件夹用来存放自己定义的js文件

在这里使用的jQuery是jQuery EasyUI自带的

5.3.1 使用class方式加载

修改index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>jQuery Easy UI</title>
    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"/>
</head>
<body>
<div class="easyui-dialog" style="width:400px;height:250px;">
    jQuery EasyUI对话框实例
</div>
</body>
</html>

使用浏览器打开index.html文件，如图所示

４

5.3.2 使用js方式加载

修改index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>jQuery Easy UI</title>
    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
    jQuery EasyUI对话框实例
</div>
</body>
</html>

index.js文件(dialog未使用任何装饰代码)

$(function () {
    $('#box').dialog({
        
    });
});

使用浏览器打开index.html文件，如图所示

一般推荐使用第二种js调用方式加载，因为一个UI组件有很多属性和方法，
使用class的用法将很不灵活，并且根据js和html分离的原则，js调用方式加载使用很灵活，且提高了代码的可读性

本文链接：https://www.cnblogs.com/renpingsheng/p/9283921.html