EasyUI简介
- JQuery EasyUI 是一组基于 JQuery 的 UI 插件集合
- JQuery EasyUI 的目标就是帮助 Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面
- 开发者不需要编写复杂的 JavaScript,也不需要对 Css 样式有深入的了解,开发者只有需要了解一些简单的 HTML 标签
- JQuery EasyUI 为我们提供了大多数 UI 控件的使用
第一个EasyUI程序
- 使用IDEA创建 Web 工程请参考
- 引入 EasyUI 样式与核心库
- 页面中引入
<link rel="stylesheet" type="text/css" href="https://www.ctyun.cn/portal/link.html?target=%24%7BpageContext.request.contextPath%7D%2Feasyui%2Fuimaker%2Feasyui.css">
<link rel="stylesheet" type="text/css" href="https://www.ctyun.cn/portal/link.html?target=%24%7BpageContext.request.contextPath%7D%2Feasyui%2Fuimaker%2Ficon.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="https://www.ctyun.cn/portal/link.html?target=%23" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">BNTang</a>
- 使用
js
形式
<a href="https://www.ctyun.cn/portal/link.html?target=%23" id="btn">BNTang</a>
<script type="text/javascript">
$(function () {
$("#btn").linkbutton({
"iconCls": "icon-search"
});
});
</script>