0
点赞
收藏
分享

微信扫一扫

EasyUI简介

慎壹 2022-06-01 阅读 66

EasyUI简介


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


第一个EasyUI程序


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


EasyUI简介_jquery


  • 页面中引入


EasyUI简介_EasyUI_02

<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​​


举报

相关推荐

0 条评论