JQuery Easyui

最新推荐文章于 2024-02-26 10:27:44 发布

ylnzzl

最新推荐文章于 2024-02-26 10:27:44 发布

阅读量205

点赞数

分类专栏：前端开发网站开发文章标签： easyui

本文链接：https://blog.csdn.net/ylnzzl/article/details/119463975

版权

网站开发同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

前端开发

30 篇文章 0 订阅

订阅专栏

简介

easyui的每个组件都有属性、方法和事件，能在plugins文件夹里看到很多组件js文件里定义的属性、方法和事件，可以去重写它们或者扩展它们为己所用。

有以下两种方式可引入组件:

给标签名加上 class="easyui-组件名" data-options="属性列表字符串"。
对指定元素进行javascript【如通过JQuery方法】设置组件及其属性。

属性

属性在jQuery.fn.{plugin}.defaults中定义。

示例：对话框的属性是在jquery.fn.dialog.defaults中定义的。

当从标记创建组件时，“data-options”属性可以用于支持HTML5兼容的属性名(从1.3版开始)。

代码示例：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;" title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
	面板内容
</div>

事件

事件(回调函数)也是在jQuery.fn.{plugin}.default中定义的。

方法

方法是在jQuery.fn.{plugin}.methods中定义的。

调用方法语法:

$('selector').插件("方法",参数);

参数说明：

selector 是jquery对象选择器。

每种方法都有两个参数:jq和param。第一个参数“jq”是必需的，它指的是jQuery对象。第二个参数“param”是指通过该方法的真正参数。

实例：为对话框组件扩展一个名为“mymove”的方法。

代码示例

$.extend($.fn.dialog.methods, {
        mymove: function(jq, newposition){
            return jq.each(function(){
                $(this).dialog('move', newposition);
            });
        }
    });
//调用“mymove”方法将对话框移动到指定位置
 $('#dd').dialog('mymove', {
      left: 200,
      top: 100
 });

文件引入

下载jQuery EasyUI库，并在页面上包含EasyUI CSS和JavaScript文件：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Easyui</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </body>
</html>

Base(基础组件)

parser(解析器)

parser会获取指定范围内所有定义为easyui组件的class名称，然后根据名称将当前节点解析渲染成特定的组件。

属性

$.parser.auto //boolean 定义是否自动解析EasyUI组件。

事件

$.parser.onComplete //在解析器完成解析操作的时候触发。

方法

$.parser.parse(selector) //解析EasyUI组件。

代码示例：

$.parser.parse();       // 解析页面所有被定义为easyui组件的节点

$.parser.parse('#cc');  // 解析匹配到范围内定义为easyui组件的节点

解析器一般会在DOM加载完后默认被调用，渲染整个页面。解析目标是指定DOM节点的所有子孙元素，不包括该DOM元素本身，所以要注意$.parser.parser($('#cc').parent());这种写法的运用。

由于easyui不会一直监听页面，所以在DOM加载完后，通过js添加的DOM节点里，如果有节点需要解析渲染成特定的easyui组件，这时就需要手动调用解析。

注意：

尽量不要多次解析同一个DOM元素（ID），因为再次手动解析时该DOM节点已经被parser重构了。

easyloader(简单加载)

通过jquery.easyui.min.js【444kb】，可以一次引入很多easyui组件到项目里。但如果只是用到easyui里少量的组件，则可以改为通过easyloader.js【8kb】按需引入一些组件，这样可以避免项目里引入了很多用不到的文件。

easyloader可用来实现自动加载所需的脚本文件和样式文件，在页面中引用jQuery脚本和easyloader脚本，easyloader就可以帮助分析模块的依赖关系，先加载依赖项，模块加载完后就调用parser模块来解析页面，把class是easyui开头的标签都转成easyui的控件。

属性(摘要)

modules 【object】预定义模块。

base 【string】easyui基础目录，必须用'/'结束。参照easyload.js所在文件目录设置。

timeout 【number】超时的值以毫秒为单位，载入如果超时则重载。默认值为2000。

事件

onProgress 当一个模块加载成功的时候触发。

onLoad 当一个模块以及他的依赖加载成功的时候触发。

方法

load(module, callback) 加载指定模块。当加载成功的回调函数被调用。

参数:

module(模块)参数有效的类型包括：

(1). 一个单一的模块名称。

(2). 模块数组。

(3). ".css"后缀结尾的CSS文件。

(4). ".js"后缀结尾的JS文件。

代码示例一：

<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> -->
<script type="text/javascript" src="easyui/easyloader.js"></script>
<script type="text/javascript">
  $(function(){
    easyloader.base = './easyui/'; // 设置 easyui 基础目录
    easyloader.load(['messager','progressbar'], function(){ // 加载指定模块
      $.messager.alert('Title', 'messager load ok');
      var r1 = $('#p').progressbar({
        'width':'400',
        'height':'20',
        'value':0,
        'text':'{value}%'
        });
        var value=$('#p').progressbar('getValue');
        if (value < 100){
            value +=10;
            if(value>100){
              value=100;
            }
            $('#p').progressbar('setValue', value);
        }
    });
  });
</script>

代码示例二：

//加载来自指定路径【相对路径、绝对路径都可以】的脚本
using('./myscript.js', function(){
    // ...
});

注意：

用easyloader加载组件时，注意调用组件生效的作用域。例如可能得把对一个组件的操作代码写在加载这个组件成功后的回调函数里才会生效，否则可能会报错说这个组件方法未定义。

尾语

以后用不用得上easyui框架还不确定，以后如果用得上再对此篇文档进行组件引用内容的丰富，否则把easyui官网上那些组件的属性、事件、方法都复制粘贴一份下来也没什么意义。

jQuery EasyUI组件演示

jQuery EasyUI中文文档

easyui除了JQuery版本，还有Angular版本、Vue版本、React版本，具体的可到easyui官网上下载、学习。

ylnzzl

关注

0
点赞
踩
0

收藏

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

目录简介属性事件方法文件引入Base(基础组件)parser(解析器)easyloader(简单加载)尾语简介easyui的每个组件都有属性、方法和事件，能在plugins文件夹里看到很多组件js文件里定义的属性、方法和事件，可以去重写它们或者扩展它们为己所用。有以下两种方式可引入组件:给标签名加上 class="easyui-组件名" data-options="属性列表字符串"。对指定元素进行javascript【如通过JQuery方法】设置组件及
复制链接

扫一扫