easyui

最新推荐文章于 2022-05-13 10:39:08 发布
原创 最新推荐文章于 2022-05-13 10:39:08 发布 · 483 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

目录

官方文档地址

布局组件：layout

选项卡组件：tabs

可折叠组件：Accordion

树组件：ztree（不是EasyUI的组件，独立使用）

官方文档地址

布局组件：layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;"></div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:100px;"></div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"></div>
</body>
</html>

选项卡组件：tabs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <!--easyui中文国际化-->
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">

</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">

        <div title="Title1"  style="overflow:auto;padding:10px;">


        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>


</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" class="easyui-tabs">

    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>
</body>
</html>

可折叠组件：Accordion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <!--easyui中文国际化-->
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">

</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">

        <div title="Title1"  style="overflow:auto;padding:10px;">


        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>


</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" >

</div>
</body>
</html>

树组件：ztree（不是EasyUI的组件，独立使用）

下载地址

链接：https://pan.baidu.com/s/179tKganBirBxgARgHHK2zQ 
提取码：43u6

引入js

 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.all.js"></script>

 
引入css

<link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

步骤使用:

在需要的地方添加zTree标签

 <!--树节点-->
 <ul id="treeDemo" class="ztree"></ul>

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <!--easyui中文国际化-->
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!--zTree-->
    <link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../js/ztree/jquery.ztree.all.js"></script>

</head>
<body class="easyui-layout">
<script type="text/javascript">
    $(function () {
        //设置
        var setting = {
            data: {
                //开启简单数据格式
                simpleData: {
                    enable: true
                },
            },
            //事件回调
            callback: {
                //点击事件
                onClick: onClick
            }
        };

        //数据 根据PId来体现父子关系,如果没有pId是普通的节点,注意I大写
        var zNodes = [
            {id: 1, pId: 0, name: "搜索引擎"},
            // 父节点搜索引擎id为1 百度为子节点pId=1.是搜索引擎的id page: 可以给节点添加其他自定义属性
            {id:101,pId:1,name:"百度",page:"https://www.baidu.com"},
            // 父节点百度id为101 百度百科为子节点pId=101.是百度的id
            {id:1001,pId:101,name:"百度百科"},
            // 父节点百度百科id为1001 谷歌为子节点pId=1001.是百度百科的id
            {id:102,pId:1001,name:"谷歌",page:"https://www.baidu.com"},
        ]
        //初始化
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        //菜单点击事件
        function onClick(event, treeId, treeNode, clickFlag) {
            // 判断树菜单节点是否含有 page属性
            if (treeNode.page!=undefined && treeNode.page!= "") {
                alert(treeNode.page)
                if ($("#tabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
                    $('#tabs').tabs('select', treeNode.name); // 切换tab
                } else {
                    // 开启一个新的tab页面
                    var content = '<div style="width:100%;height:100%;overflow:hidden;">'
                        + '<iframe src="'
                        + treeNode.page
                        + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';

                    $('#tabs').tabs('add', {
                        title : treeNode.name,
                        content : content,
                        closable : true,
                        tools:[{
                            iconCls:'icon-reload', // 刷新按钮
                            handler : function(){
                                var tab = $('#tabs').tabs('getTab',treeNode.name);
                                $("iframe[src='"+treeNode.page+"']").get(0).contentWindow.location.reload(true);
                            }
                        }]
                    });
                }
            }


        }

    })



</script>
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">

</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">

    <div title="Title1" style="overflow:auto;padding:10px;">
        <!--树节点-->
        <ul id="treeDemo" class="ztree"></ul>

    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>


</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" class="easyui-tabs">

    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>
</body>
</html>

 

easyui开发手册chm
04-20
easyui开发手册chm,包含easyui开发中，常见的api,中文版
spring boot+JPA+easyUI 实现基于浏览器语言的国际化配置
03-09
spring boot+JPA+easyUI 实现基于浏览器语言的国际化配置
实战：vue3.0 ant-design table表头国际化i18n问题
qingzhen的博客
12-28 2602
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading" :scroll="{ x: 1100, y: 300 }" > // 表头国际化设置 <template #headerCell="{ column }"> <template v-for="(item, index) in columns" :
Jquery EasyUi国际化
今天最成功
08-15 1031
直接引用 &lt;script type="text/javascript" src="locale/easyui-lang-zh_CN.js"&gt;&lt;/script&gt;   就OK   当然还有不可缺少的引入部分   &lt;link rel="stylesheet" type="text/css" href="themes/default/easyu
easyui 格式化日期以及国际化的引用
cainiao35的博客
04-05 917
easyui默认的语言是英文模式，但同时引入了国际化，也就是说我们在使用easyui时需要多引用一个国际化的JS。 Custom Calendar - jQuery EasyUI Demo Custom Calendar 这个样例主要关于格式化easyui的日历。 //获取随机数 var d
JSP中集成easyui前端ui框架
guoyp2126的博客
04-22 4436
前言 EasyUI是一款优秀的前段UI框架，我们无需花费太大的精力，使得我们的页面具有专业标准，使用起来也很简单。 EasyUI下载与配置 使用EasyUI，必须下载其js包，下载官网地址：https://www.jeasyui.cn/ ...
EasyUI总结
私信可回答各种问题~
03-21 1332
EasyUI总结
easyui中图片显示总结
killmanback的博客
04-09 8708
一、easyui-datagrid中单元格显示图片jsp中代码：&lt;table id="dg" title="" class="easyui-datagrid" fit="true" url="FdPeople_query.do" toolbar="#toolbar" pagination="true" rownumbers="true&quo
easyui结合iframe的使用
qq_37069064的博客
05-29 2670
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title ...
【EasyUI】EasyUI学习笔记
热门推荐
寒泉
09-27 2万+
一.EasyUI 简介 1.EasyUI 是前端框架. 2.前端框架 2.1 封装大量css 2.2 封装大量JS 3.使用前端框架 3.1 给标签设置easyui提供的 class 属性即可，id属性可以随便起名。 4.easyui 中需要注意的地方 4.1 data-options 属性定义easyui 属性的. 4.2 如果easyui 提供的属性和html 标签属性相同,可以把这个属性 不...
jquery-easyui 1.5.2API
09-06
######################################## jQuery EasyUI 1.5.2 版中文版开发工具包 EasyUI Development Toolkit Build 1 说明文档 Version 1.2 ######################################## 注意：本开发包欢迎转载，但是请完整保留该文档及开发包目录结构，谢谢！ 【一.开发包组成】 jquery-easyui-1.5.2 │ ├demo：easyui普通网页演示页面代码库（可以从中参考很多组件的用法，是个非常好用的demo库。） │ ├demo-mobile：easyui手机端网页演示页面代码库（可以从中参考很多组件的用法，是个非常好用的demo库。） │ ├docs：easyui中文API文档【PDF、EXE和CHM版】（该文档系本人原创翻译制作。） │ ├extension：easyui第三方插件库（里面会收录官方提供以及第三方提供的各类优秀插件，每个插件的用法最终都会体现到API文档当中。） │ ├locale：easyui国际化资源文件库（需要用到国际化的时候就需要在页面中引用该包路径下的文件。） │ ├plugins：easyui核心功能组件分解后的独立插件库（需要配合easyloader.js一起使用。） │ ├src：easyui部分非核心组件的源代码库（核心大组件的源代码并未公布，比如datagrid、combo和tree等。） │ ├themes：easyui的皮肤库（皮肤库中会收录所有网上能找得到的皮肤，所以大家不用再去自己乱搜了。） │ ├changelog.txt：easyui版本官方更新日志文件[英文版]（该文件内容可以参考API当中的更新说明。） │ ├easyloader.js：easyui组件加载器（easyui提供了2种组件加载方式，这就是其中一种，当使用该方式的时候可以不必引入jquery.easyui.min.js文件，具体用法请参看api文档。） │ ├jquery.easyui.min.js：easyui的完整组件包文件（当使用了该文件的时候就可以不必引入easyloader.js文件，具体用法请参考官方demo或api文档。） │ ├jquery.min.js：jQuery框架库文件，该版本的jQuery库提供的是最新的1.11.1版，能够支持IE6、7、8。 │ ├licence_gpl.txt：GNU开源协议文档。 │ └readme.txt：官方的说明，主要告诉你你可以购买商业版来获得完整源代码以及官方的支持。 【二.开发包说明】 　　本开发包是为了方便大家日常开发使用的，特别是在离线或断网环境下可以以最快、最便捷的方式找到自己需要的东西。由于本包是发布的第一个版本，所以东西固然会不全面，在后续版本中会逐步加入并完善，以解决大家的后顾之忧。如果你也有什么好的扩展可以推荐给大家的话，大家可以用邮件的形式将扩展以及相关的API说明发送给我，我会在测试确认之后打包到下一个版本的扩展库中。我的邮箱是：richie696@163.com 【三.版本说明】 　　本开发包的大版本更新将会同步EasyUI版本更新，当在同一个easyui版本中间有2次或者更多更新版本的时候，会更改开发包的build版本，比如首个版本是jquery-easyui-EDT-1.5.2-build1，那第二个版本就是jquery-easyui-EDT-1.5.2-build2，以此类推。每次更新都会附上详细的更新说明。 【四.其它杂谈】 　　另外，建议Javascript基础不是太好的同学去找些书籍看看，书籍有很多，不过我只看过Javascript高级编程，现在应该已经出到第三版了，个人感觉挺好的，有需要的同学可以度娘一下！
EasyUI学习
Yuncoco的博客
06-18 900
一、
easyUI简介、不足之处、学easyUI的好处以及它的特点
qq_47906421的博客
06-20 4367
easyUI入门前言一、easyUI的简介二、easyUI的不足之处三、学easyUI的好处四、easyUI的特点1.下载easyui版本2.打开软件创建动态web项目3.导入easyui的css文件和JavaScript文件4.引入相对应的js跟css5.主体代码6.结果 前言 今天分享的是叫easyUI的前端框架，下面我们来看看吧！ 一、easyUI的简介 easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。 二、easyUI的不足之处 现在据了解到有三种U
Vue 集成easyUI
weixin_30387799的博客
06-19 617
原 Vue 集成easyUI https://blog.csdn.net/m0_37948170/article/details/84960320 参考vue官网用cli创建了Vue项目之后： npm install vx-easyui --save 安装 推荐使用 cnpm install vx-easyui --save 淘宝的cnpm ...
EasyUI切换主题风格
缘如风的博客
11-17 1442
实现EasyUI切换主题。 参考文档如下： https://www.jeasyui.net/extension/209.html https://www.runoob.com/jeasyui/ext-themes.html 以上各主题下载地址：jquery easyui themes 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换主题&.
easyui了解
qq_64001795的博客
05-13 3578
目录 一、框架概述 1、什么是Easyui？ 2、EasyUI的常用组件 3、EasyUI的特点 缺点 使用： 4、EasyUI的目录说明 4.1下载路径 4.2 必须的基础支持库 4.3 目录说明 二、WEB项目搭建EasyUI环境 1.EasyUI入门示例 1.1标准开发步骤 1.2 代码模板 1.3 EasyUI的三大基础概念 1.3.1 属性设置 1.3.2 事件触发设置 1.3.3 方法调用设置 2.注意事项 5.关于组件之间的依赖关系 6.控件使...
easyUI学习记录
John的专栏
09-27 1275
1.引入文件顺序 最基本的使用就是引入easyui.min.js文件，以及其对应的jquery.min.js文件。注意的是jquery-easyui是基于jquery的,因此jquery.min.js文件最好先于easyui.min.js先引入           2.改变panel的位置 step1：引入文件 step2：data-options的style step3：js
easyui,Bootstrap以及Layui的对比，EasyUi的入门
m0_46699799的博客
06-20 2236
easyuiui框架easyuiBootStrapLayUiesayui Layout布局示例结果总结 ui框架 ui框架主流有三种： easyui 由jQuery和html4组成，一般用来做后台的管理界面 特点/优势： easyui的学习资料比较饱和。（在他们官网里可看） 代码比较简洁 easyui简化了代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。 有强大的数据交互功能 比较稳定 组件比较丰富 easyui节省很多网页开发的时间和规模。 easyui很简单但功能强大的 免费 缺点是不
EasyUI
HYN205的博客
05-25 376
什么是EasyUI？ jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 EasyUI的使用 引入EasyUI的开发JS和CSS EasyUI的使用有两种方...
EasyUi入门
weixin_52639224的博客
09-09 615
一、ui框架 1.easyui=jquery+html4（用来做后台的管理界面） 2.bootstrap=jQuery+html5 3.layui 二、为什么选择使用easyui 从效果来看，easyui比不上bootstrap那样美观 与layui相比，界面效果也更差 在这种情况下，我们为什么要使用相对较差的easyui呢，首先，使用bootstrap要钱，easyui比layui更加稳定，所以使用easyui，如果你有钱，那当我没说 当然最终还是从公司的角度考虑用哪个框架 考虑方面：成
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值