1.1 Jquery EasyUI 简介
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
1.2 Jquery EasyUI 引入方式
EasyUI使用的引入方式跟我们平时在项目中引入css文件、js文件的方法是一样的，我们首先在 Jquery EasyUI的官网上面下载好架包 解压后 我们主要使用并引入这几个文件即可，如下所示：
<link rel="stylesheet" href="./themes/default/easyui.css"> <!--引入easyUI自带的css样式-->
<script src="./js/jquery.min.js"></script><!--引入easyUI自带的jquery脚本文件-->
<script src="./js/jquery.easyui.min.js"></script><!--引入easyUI自带的js脚本文件-->
<script src="./js/easyui-lang-zh_CN.js"></script><!--引入easyUI自带的中文版js脚本文件-->
以上三个文件的引入顺序不能变动。
1.3 Jquery EasyUI 的UI组件使用方法
jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 组件:
1、通过静态的HTML标签可以直接声明组件。
2、通过编写 JavaScript 代码来创建组件。
下面我们使用Jquery EasyUI提供的对话框作为演示，如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>easyui-dialog</title>
<link rel="stylesheet" href="./themes/default/easyui.css">
</head>
<body>
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true">
使用div标签创建的静态对话框(Dialog Content)
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.easyui.min.js"></script>
<script src="./js/easyui-lang-zh_CN.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>easyui-dialog</title>
<link rel="stylesheet" href="./themes/default/easyui.css">
</head>
<body>
<div id="dd">使用JavaScript创建的easyui-dialog</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.easyui.min.js"></script>
<script src="./js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true
});
$('#dd').dialog('refresh', 'new_content.php');
</script>
</body>
</html>
以上两种方法都能实现创建一个对话框的效果，具体采用哪种方案要根据项目实际情况的需要来考虑。如下所示:
image.png
网友评论