总结:
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_734_D

    http://codeforces.com/problemset/problem/734/D 保存最近的八个方向的点,判断即可. #include<iostream> #include&l ...

  2. DataGuard---->主库和备库都配置 db_file_name_convert和log_file_name_convert的作用

    一.参数说明 [1] db_file_name_convert db_file_name_convert 主数据库和备用数据库的数据文件转换目录对映(如果两数据库的目录结构不一样),如果有多个对映,逐 ...

  3. Spring IOC容器源码分析

    注:本文转自https://javadoop.com/post/spring-ioc Spring 最重要的概念是 IOC 和 AOP,本篇文章其实就是要带领大家来分析下 Spring 的 IOC 容 ...

  4. scala中符号的意思

    1. => 定义函数, xxx => yyy 左边是函数变量,右边是函数返回值 2. <- 遍历中的<- 将变量赋给索引 for( i <- arrs ) 3. -> ...

  5. [redis读书笔记] 第一部分 数据结构与对象 字典

    三 字典 字典是Hash对象的底层实现,比如用HSET创建一个HASH的对象,底层可能就是用一个字典实现的键值对. 字典的实现主要设计下面三个结构: /* * 哈希表节点 */ typedef str ...

  6. javascript json语句 与 js语句的互转

    //var data = "weihexin" //var data = ["weihexin", 1] var data = {name:"weih ...

  7. 杭电-------2055An Easy Problem(C语言)

    #include<stdio.h> int main() { int m; int i; scanf("%d", &m); ]; int y; int z; ; ...

  8. 小程序封装request请求

    //request.js var host = 'https://www.xxx.com';//请求域名 module.exports = function (type, params, method ...

  9. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...

  10. com.google.gson json字符串的序列化与反序列化

    经常做协议的时候用到json,个人习惯是定义协议文档,很少在这中场景中定义类,使用对象. 这里使用一个人物有名字,性别,有一个物品列表做个简单示例记录. 序列化 JsonObject jo=new J ...