总结:
1)每个UI都是通过属性、事件和方法运作的
2)用JS加载时只需传入一个参数(用大括号{}包围),包含若干个键值对,之间用逗号隔开;
3)事件也是写在JS加载时的方法中,也是键值对形式,值是匿名函数;
4)方法写在JS加载后或事件中,用于获取或设置对象属性。
5)加载UI组件的2种方法:1.使用class方式加载;2.使用js调用加载

用JS加载,要记得加上这几个文件,少了css文件就无法渲染出效果来哦。
  1. <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
  2. <link rel="stylesheet" type="text/css" href="themes/icon.css">
  3. <script type="text/javascript" src="js/jquery.min.js"></script>
  4. <script type="text/javascript" src="js/jquery.easyui.min.js"></script>

本系列只列出一些常用的属性、事件或方法,具体完整知识请查看API文档
Base基础

1.Draggable(拖动)

通过标签创建一个可拖动的元素。
  1. <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
  2. <div id="title" style="background:#ccc;">title</div>
  3. </div>
使用Javascript创建一个可拖动的元素。
  1. <div id="dd" style="width:100px;height:100px;">
  2. <div id="title" style="background:#ccc;">title</div>
  3. </div>
  1. $('#dd').draggable({
  2. handle:'#title'
  3. });

属性

属性名 属性值类型 描述 默认值
proxy string,function

在拖动的时候使用的代理元素,当使用'clone'的时候,将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,

它将返回一个jquery对象。

下面的例子显示了如何创建一个简单的代理对象。

$('.dragitem').draggable({
proxy: function(source){
var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
p.html($(source).html()).appendTo('body');
return p;
}
});
null
revert boolean 如果设置为true,在拖动停止时元素将返回起始位置。 false
cursor string 拖动时的CSS指针样式。 move
deltaX number 被拖动的元素对应于当前光标位置x。 null
deltaY number 被拖动的元素对应于当前光标位置y。 null
handle selector 开始拖动的句柄。 null
disabled boolean 如果设置为true,则停止拖动。 false
edge number 可以在其中拖动的容器的宽度。 0
axis string 定义元素移动的轴向,可用值有:'v'或'h',当没有设置或设置为null时可同时在水平和垂直方向上拖动。 null

2.Droppable(放置)

通过标签创建一个放置区。
  1. <div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;">
  2. </div>
使用Javascript创建一个放置区。
  1. <div id="dd" style="width:100px;height:100px;"></div>
  1. $('#dd').droppable({
  2. accept:'#d1,#d3'
  3. });

属性

属性名 属性值类型 描述 默认值
accept selector 确定哪些可拖拽元素将被接受。 null
disabled boolean 如果为true,则禁止放置。 false

事件

事件名 事件参数 描述
onDragEnter e,source 在被拖拽元素到放置区内的时候触发,source参数表示被拖拽的DOM元素。
onDragOver e,source 在被拖拽元素经过放置区的时候触发,source参数表示被拖拽的DOM元素。
onDragLeave e,source 在被拖拽元素离开放置区的时候触发,source参数表示被拖拽的DOM元素。
onDrop e,source 在被拖拽元素放入到放置区的时候触发,source参数表示被拖拽的DOM元素。

3.Resizable(调整大小)

使用标签创建可变大小的窗口。
  1. <div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;">
  2. </div>
使用Javascript创建可变大小的窗口。
  1. <div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
  1. $('#rr').resizable({
  2. maxWidth:800,
  3. maxHeight:600
  4. });

属性

属性名 属性值类型 描述 默认值
disabled boolean 如果为true,则禁用大小调整。 false
handles string 声明调整方位,'n'=北,'e'=东,'s'=南等。 n, e, s, w, ne, se, sw, nw, all
minWidth number 当调整大小时候的最小宽度。 10
minHeight number 当调整大小时候的最小高度。 10
maxWidth number 当调整大小时候的最大宽度。 10000
maxHeight number 当调整大小时候的最大高度。 10000
edge number 边框边缘大小。 5

4.Tooltip(提示框)

当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。
 通过标签创建提示框,给元素添加一个"easyui-tooltip"的类名,无需任何Javascript代码。
  1. <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
通过Javascript创建提示框。
  1. <a id="dd" href="javascript:void(0)">Click here</a>
  1. $('#dd').tooltip({
  2. position: 'right',
  3. content: '<span style="color:#fff">This is the tooltip message.</span>',
  4. onShow: function(){
  5. $(this).tooltip('tip').css({
  6. backgroundColor: '#666',
  7. borderColor: '#666'
  8. });
  9. }});

属性

属性名 属性值类型 描述 默认值
position string 消息框位置。可用值有:"left","right","top","bottom" bottom
content string 消息框内容。 null
trackMouse boolean 为true时,允许提示框跟着鼠标移动。 false
deltaX number 水平方向提示框的位置。 0
deltaY number 垂直方向提示框的位置。 0
showEvent string 当激发什么事件的时候显示提示框。 mouseenter
hideEvent string 当激发什么事件的时候隐藏提示框。 mouseleave
showDelay number 延时多少秒显示提示框。 200
hideDelay number 延时多少秒隐藏提示框。 100

5.LinkButton(按钮)

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。
 
使用标签创建按钮更加简单。
  1. <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
也可以使用Javascript创建按钮。
  1. <a id="btn" href="#">easyui</a>
  2. $('#btn').linkbutton({
  3. iconCls: 'icon-search'
  4. });

属性

属性名 属性值类型 描述 默认值
id string 组件的ID属性。 null
disabled boolean 为true时禁用按钮。 false
toggle boolean 为true时允许用户切换其状态是被选中还是未选择,可实现checkbox复选效果。(该属性自1.3.3版开始可用) false
selected boolean 定义按钮初始的选择状态,true为被选中,false为未选中。(该属性自1.3.3版开始可用) false
group string 指定相同组名称的按钮同属于一个组,可实现radio单选效果。(该属性自1.3.3版开始可用) null
plain boolean 为true时显示简洁效果。 false
text string 按钮文字。 ''
iconCls string 显示在按钮文字左侧的图标(16x16)的CSS类ID。 null
iconAlign string 按钮图标位置。可用值有:'left','right'。(该属性自1.3.2版开始可用) left

6.ProgressBar(进度条)

使用HTML标签或程序创建进度条组件。从标签创建更加简单,添加'easyui-progressbar'类ID到<div/>标签。
  1. <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;">
  2. </div>
使用Javascript创建进度条。
  1. <div id="p" style="width:400px;"></div>
  1. $('#p').progressbar({
  2. value: 60
  3. });
获取当前值和设置一个新的值到进度条控件。
  1. var value = $('#p').progressbar('getValue');
  2. if (value < 100){
  3. value += Math.floor(Math.random() * 10);
  4. $('#p').progressbar('setValue', value);
  5. }

方法

方法名 方法参数 描述
options none 返回属性对象。
resize width 组件大小。

代码示例:

$('#p').progressbar('resize');           // 更改进度条到原始宽度
$('#p').progressbar('resize', 350);   // 更改进度条到新的宽度
getValue none 返回当前进度值。
setValue value 设置一个新的进度值。

实例代码下载

EasyUI笔记(一)Base基础的更多相关文章

  1. 8.python笔记之面向对象基础

    title: 8.Python笔记之面向对象基础 date: 2016-02-21 15:10:35 tags: Python categories: Python --- 面向对象思维导图 (来自1 ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. [Java入门笔记] 面向对象编程基础(二):方法详解

    什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...

  4. Java学习笔记:语言基础

    Java学习笔记:语言基础 2014-1-31   最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...

  5. 抽象鸡类 abstract(抽象) base(基础) class(类型)

    # --> ''' class interface 接口: 建立关联的桥梁, 方便管理代码 (python中没有接口语法) 接口类: 用来定义功能的类 为继承它的子类提供功能 该类的功能法方法一 ...

  6. 卷积神经网络(CNN)学习笔记1:基础入门

    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...

  7. Linux及Arm-Linux程序开发笔记(零基础入门篇)

    Linux及Arm-Linux程序开发笔记(零基础入门篇)  作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/bee ...

  8. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建基础树形网格

    jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...

  9. 【笔记】AJAX基础

    [笔记]AJAX基础 Django AJAX  知识储备:JSON 什么是 JSON JSON 是轻量级的文本数据交换格式 JSON 独立于语言和平台.JSON 解析器和 JSON 库支持许多不同的编 ...

随机推荐

  1. Codeforces_723_A

    http://codeforces.com/problemset/problem/723/A 取中间那个数就可以了,答案为最大值减最小值. #include<iostream> #incl ...

  2. CCF_201512-1_数位之和

    水. #include<iostream> #include<cstdio> using namespace std; int main() { ; cin >> ...

  3. 春招必问的redis持久化(RDB AOF),你能答上来么?

    春招面试模拟,如同雷同,纯属巧合!!! 面试的大体流程: 第一步:一般会有笔试题,也可能没有.有笔试题就要好好答了,因为会重视笔试结果,为了节约面试官时间,HR可能先会看,不合格直接让你走人了. 第二 ...

  4. c++ 中数组的引用

    在C++里,数组也是可以引用的. 代码如下: char str1[] = "abcde"; ] = str1; 解读第二句代码,括号的优先级最高,'str2'首先与'&'相 ...

  5. CentOS 6.4安装mongo的php扩展包

    最近安装mongo相关内容,因mongodb下载好解压即可使用,在这里我就不多说了,这里我分享下如何安装mongo的php扩展 首先下载扩展包https://github.com/mongodb/mo ...

  6. PyTorch可视化——tensorboard、visdom

    一.pytorch与tensorboard结合使用 Tensorboard Tensorboard一般都是作为tf的可视化工具,与tf深度集成,它能够展现tf的网络计算图,绘制图像生成的定量指标图以及 ...

  7. 14-SSM整合

    今日知识 1. Spring整合MyBatis 2. SSM普通整合 3. SSM整合(Spring和SpringMVC分离) 4. 纯JavaConfig的SSM Spring整合MyBatis 1 ...

  8. KubeSphere企业级分布式多租户容器管理平台

    KubeSphere企业级分布式多租户容器管理平台 KubeSphere安装部署2.1.0DEV版本

  9. df du 文件空间管理 命令

     df  可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du 可以查看文件及文件夹的大小.     df:常用   df -h    以易读形式显示 磁盘空间 linux ...

  10. Axer-使用Msfvenom自动创建有效负载的工具

    Axer-使用Msfvenom自动创建有效负载的工具 该axer将替换为有效的手动操作msfvenom,设置更容易和快了很多. AXER可以让您选择平台,格式,编码器,与另一个文件绑定以及许多其他功能 ...