EasyUI笔记(一)Base基础
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
1.Draggable(拖动)
<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>
$('#dd').draggable({
handle:'#title'
});
属性
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
proxy | string,function |
在拖动的时候使用的代理元素,当使用'clone'的时候,将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。 下面的例子显示了如何创建一个简单的代理对象。 $('.dragitem').draggable({ |
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(放置)
<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;">
</div>
<div id="dd" style="width:100px;height:100px;"></div>
$('#dd').droppable({
accept:'#d1,#d3'
});
属性
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
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(调整大小)
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;">
</div>
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
$('#rr').resizable({
maxWidth:800,
maxHeight:600
});
属性
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
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(提示框)
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({
position: 'right',
content: '<span style="color:#fff">This is the tooltip message.</span>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}});
属性
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
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 id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
<a id="btn" href="#">easyui</a>
$('#btn').linkbutton({
iconCls: 'icon-search'
});
属性
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
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(进度条)
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;">
</div>
<div id="p" style="width:400px;"></div>
$('#p').progressbar({
value: 60
});
var value = $('#p').progressbar('getValue');
if (value < 100){
value += Math.floor(Math.random() * 10);
$('#p').progressbar('setValue', value);
}
方法
方法名 | 方法参数 | 描述 |
---|---|---|
options | none | 返回属性对象。 |
resize | width | 组件大小。
代码示例: $('#p').progressbar('resize'); // 更改进度条到原始宽度 |
getValue | none | 返回当前进度值。 |
setValue | value | 设置一个新的进度值。 |
实例代码下载
EasyUI笔记(一)Base基础的更多相关文章
- 8.python笔记之面向对象基础
title: 8.Python笔记之面向对象基础 date: 2016-02-21 15:10:35 tags: Python categories: Python --- 面向对象思维导图 (来自1 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- [Java入门笔记] 面向对象编程基础(二):方法详解
什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...
- Java学习笔记:语言基础
Java学习笔记:语言基础 2014-1-31 最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...
- 抽象鸡类 abstract(抽象) base(基础) class(类型)
# --> ''' class interface 接口: 建立关联的桥梁, 方便管理代码 (python中没有接口语法) 接口类: 用来定义功能的类 为继承它的子类提供功能 该类的功能法方法一 ...
- 卷积神经网络(CNN)学习笔记1:基础入门
卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01 | In Machine Learning | 9 Comments | 14935 Vie ...
- Linux及Arm-Linux程序开发笔记(零基础入门篇)
Linux及Arm-Linux程序开发笔记(零基础入门篇) 作者:一点一滴的Beer http://beer.cnblogs.com/ 本文地址:http://www.cnblogs.com/bee ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建基础树形网格
jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...
- 【笔记】AJAX基础
[笔记]AJAX基础 Django AJAX 知识储备:JSON 什么是 JSON JSON 是轻量级的文本数据交换格式 JSON 独立于语言和平台.JSON 解析器和 JSON 库支持许多不同的编 ...
随机推荐
- Codeforces_734_D
http://codeforces.com/problemset/problem/734/D 保存最近的八个方向的点,判断即可. #include<iostream> #include&l ...
- DataGuard---->主库和备库都配置 db_file_name_convert和log_file_name_convert的作用
一.参数说明 [1] db_file_name_convert db_file_name_convert 主数据库和备用数据库的数据文件转换目录对映(如果两数据库的目录结构不一样),如果有多个对映,逐 ...
- Spring IOC容器源码分析
注:本文转自https://javadoop.com/post/spring-ioc Spring 最重要的概念是 IOC 和 AOP,本篇文章其实就是要带领大家来分析下 Spring 的 IOC 容 ...
- scala中符号的意思
1. => 定义函数, xxx => yyy 左边是函数变量,右边是函数返回值 2. <- 遍历中的<- 将变量赋给索引 for( i <- arrs ) 3. -> ...
- [redis读书笔记] 第一部分 数据结构与对象 字典
三 字典 字典是Hash对象的底层实现,比如用HSET创建一个HASH的对象,底层可能就是用一个字典实现的键值对. 字典的实现主要设计下面三个结构: /* * 哈希表节点 */ typedef str ...
- javascript json语句 与 js语句的互转
//var data = "weihexin" //var data = ["weihexin", 1] var data = {name:"weih ...
- 杭电-------2055An Easy Problem(C语言)
#include<stdio.h> int main() { int m; int i; scanf("%d", &m); ]; int y; int z; ; ...
- 小程序封装request请求
//request.js var host = 'https://www.xxx.com';//请求域名 module.exports = function (type, params, method ...
- .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...
- com.google.gson json字符串的序列化与反序列化
经常做协议的时候用到json,个人习惯是定义协议文档,很少在这中场景中定义类,使用对象. 这里使用一个人物有名字,性别,有一个物品列表做个简单示例记录. 序列化 JsonObject jo=new J ...