EasyUI

Posted 2022-11-15 xiaoruirui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI相关的知识，希望对你有一定的参考价值。

引入

技术图片

所以我们需要引入4个文件，在EasyUI官网中随便找一个文件就可以使用引入

组件的创建

创建的两种方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
        <script>
            $(function()
                //通过JS创建
                $("#btn").linkbutton(
                    "iconCls":‘icon-search‘,
                    text:‘js按钮‘
                );
            )
        </script>
    </head>
    <body>
        <a id="btn"></a>
        <!--通过class创建-->
        <a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a>  
    </body>
</html>

View Code

LinkButton

Panel

组件三要素

tree

以上是关于EasyUI的主要内容，如果未能解决你的问题，请参考以下文章

前端框架+普通项目的后台管理UI推荐

七色花基本权限系统- 利用EasyUI进行首页布局

常见的前端框架都有哪些（EasyUI/MiniUI/jQueryUI/Vue.js/）