EasyUI简介

EasyUI简介

• JQuery EasyUI 是一组基于 JQuery 的 UI 插件集合
• JQuery EasyUI 的目标就是帮助 Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面
• 开发者不需要编写复杂的 JavaScript，也不需要对 Css 样式有深入的了解，开发者只有需要了解一些简单的 HTML 标签
• JQuery EasyUI 为我们提供了大多数 UI 控件的使用

第一个EasyUI程序

• 使用IDEA创建 Web 工程请参考：https://www.cnblogs.com/BNTang/articles/13376151.html
• 引入 EasyUI 样式与核心库
• 资料下载地址为：https://wws.lanzous.com/iUCnpghtr1a

• 页面中引入

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/uimaker/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/easyui-lang-zh_CN.js"></script>

• 两种不同形式的使用
• 使用css样式

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">BNTang</a>

• 使用js形式

<a href="#" id="btn">BNTang</a>

<script type="text/javascript">
    $(function () {
        $("#btn").linkbutton({
            "iconCls": "icon-search"
        });
    });
</script>

参考文章：https://files.cnblogs.com/files/BNTang/EasyUI官方API中文版.rar