EasyUI

最新推荐文章于 2022-05-04 17:50:13 发布

EstherLty

最新推荐文章于 2022-05-04 17:50:13 发布

阅读量291

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45988641/article/details/103553330

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

EasyUI

一、jQuery EasyUI概述

（一）特点

1.帮助web开发者更轻松的打造出功能丰富并且美观的UI界面

2.easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合

3.easyui为创建现代化、互动、JavaScript应用程序提供必要的功能

4.使用easyui不需要写很多代码，只需要通过编写一些简单HTML标记就可以定义用户界面

5.easyui是个完美支持HTML5网页的完整框架

6.easyui节省网页开发的时间和规模

7.easyui很简单但功能强大

8.easyui知识点由JS+HTML+CSS+jquery容易上手

9.使用方法：copy拷贝一些案例或者一些模板+edit编辑

10.属于前端框架

Layui elementui easyui bootstarp vue react Angular…

（二）学习网站

1.官网

http://www.jeasyui.com/ 英文网
http://www.jeasyui.net/ 中文网

2.菜鸟教程网

二、搭建easyui环境

1.web项目加入easyui的项目文件夹

在这里插入图片描述

子目录说明：
demo :web案例
demo-mobile:移动端案例
locale:本地化（汉化包）
plugins:easyui所有插件
src:插件的源码，如果买了商业授权就有全部源码
themes：主题（皮肤），存放css,img
changlog.txt:升级日志
easyloader.js:内部实现了一个js加载器，根据应用的需求加载js文件，而不是一次性加载所有文件；
jquery.easyui.min.js:所有插件集的压缩文件
jquery.min.js : easyui当前版本兼容的jquery库

2.引入css和js文件

<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->   
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->   
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->      
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

三、创建组件的方式

1.html的标签的形式

在标签里面添加样式

<div class="easyui-组件名"
组件配置title="xxx"
data-options="title:'xxx'"></div>

比如：class="easyui-panel"

2.js代码形式

$("#id").组件名({属性名:属性值,属性名:属性值})

比如：$("#p2").panel({title : "你的面板",iconCls : "icon-no"});

注意事项：

组件再使用的时候，就应该把属性设置好，不要等组件创建完，再去重新设置属性

$(function(){	
    $("#p1").panel({
        content : "你好吗???",
        left : "500px",
        cls : 'mypanel'
    });
    //只能作用于body
    $("#p1").width('800px');
    $("#p1").hide();
    $("#p1").attr('title','xxxxx');
})

四、html创建组件的原理

最终还是调用js的方式来创建$(“#p”).panel({json参数});
是否自动解析EasyUI组件，默认为true

<script type="text/javascript">
	$.parser.auto=true;//为true自动解析组件，false反之
</script>

五、LinkButton组件

在这里插入图片描述

<script type="text/javascript">
    $(function(){
    $("#editBtn").on("click",function(){
        console.debug("编辑");
    });

    $("#cutBtn").on("click",function(){
        //组件的disabled禁用属性,无法控制事件.
        if($(this).hasClass("l-btn-disabled")){//判断按钮是否有禁用样式.

        }else{
            alert('剪切');
        }
    });
})
</script>
<!-- 
    linkbutton组件:
        属性:
            iconCls:图标;
            disabled:是否禁用;
            plain:true时显示简洁效果,其实就是没有背景;
            iconAlign:按钮图标位置;可以选值为left,right;默认为:left;
            toggle: 是否可以选中效果.
            group : 分组,一般与toggle配合使用,达到单选效果;
-->
<body>
    <a href="#" class="easyui-linkbutton" iconCls='icon-remove' toggle="true" onclick="alert('删除');">删除</a>
<a href="#" class="easyui-linkbutton" iconCls='icon-edit' plain="true" iconAlign="right" id="editBtn">编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>
<div style="padding:5px;border:1px solid #ddd;">
    <a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 3</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 4</a>
<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 5</a>
</body>

六、Panel组件

在这里插入图片描述

<body>
    <div id="p" class="easyui-panel" title="面板1"
            style="width: 300px; height: 200px; padding: 10px;" 
            iconCls="icon-save"
            collapsible="true"
            minimizable="false"
            maximizable="true"
            closable="true"
            tools="#tt"
            fit="false"
            loadingMessage="加载中..."
            href="/panel_content.txt"
>
    <a class="easyui-linkbutton" iconCls="icon-add">添加</a>
	<a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>

<div id="tt">
    <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>
</div>
</body>

七、组件三要素

（一）属性

所有的属性都定义在jQuery.fn.{plugin}.defaults里面
属性只能在创建（初始化）组件有效，组件创建完毕后，如果对某个属性进行了修改无效

（二）方法

（三）事件

EstherLty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI

jQuery EasyUI一、jQuery EasyUI概述（一）特点1.帮助web开发者更轻松的打造出功能丰富并且美观的UI界面2.easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合3.easyui为创建现代化、互动、JavaScript应用程序提供必要的功能4.使用easyui不需要写很多代码，只需要通过编写一些简单HTML标记就可以定义...
复制链接

扫一扫