EasyUI简介
- JQuery EasyUI 是一组基于 JQuery 的 UI 插件集合
- JQuery EasyUI 的目标就是帮助 Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面
- 开发者不需要编写复杂的 JavaScript,也不需要对 Css 样式有深入的了解,开发者只有需要了解一些简单的 HTML 标签
- JQuery EasyUI 为我们提供了大多数 UI 控件的使用
第一个EasyUI程序
- 使用IDEA创建 Web 工程请参考
- 引入 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>
参考文章:官方API中文版.rar