<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官网上下载、学习。

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-07 11:54:23 更:2021-08-07 12:00:36

360图书馆购物三丰科技阅读网日历万年历 2024年12日历

-2024/12/26 4:19:16-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码

数据统计