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_723_A
http://codeforces.com/problemset/problem/723/A 取中间那个数就可以了,答案为最大值减最小值. #include<iostream> #incl ...
- CCF_201512-1_数位之和
水. #include<iostream> #include<cstdio> using namespace std; int main() { ; cin >> ...
- 春招必问的redis持久化(RDB AOF),你能答上来么?
春招面试模拟,如同雷同,纯属巧合!!! 面试的大体流程: 第一步:一般会有笔试题,也可能没有.有笔试题就要好好答了,因为会重视笔试结果,为了节约面试官时间,HR可能先会看,不合格直接让你走人了. 第二 ...
- c++ 中数组的引用
在C++里,数组也是可以引用的. 代码如下: char str1[] = "abcde"; ] = str1; 解读第二句代码,括号的优先级最高,'str2'首先与'&'相 ...
- CentOS 6.4安装mongo的php扩展包
最近安装mongo相关内容,因mongodb下载好解压即可使用,在这里我就不多说了,这里我分享下如何安装mongo的php扩展 首先下载扩展包https://github.com/mongodb/mo ...
- PyTorch可视化——tensorboard、visdom
一.pytorch与tensorboard结合使用 Tensorboard Tensorboard一般都是作为tf的可视化工具,与tf深度集成,它能够展现tf的网络计算图,绘制图像生成的定量指标图以及 ...
- 14-SSM整合
今日知识 1. Spring整合MyBatis 2. SSM普通整合 3. SSM整合(Spring和SpringMVC分离) 4. 纯JavaConfig的SSM Spring整合MyBatis 1 ...
- KubeSphere企业级分布式多租户容器管理平台
KubeSphere企业级分布式多租户容器管理平台 KubeSphere安装部署2.1.0DEV版本
- df du 文件空间管理 命令
df 可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du 可以查看文件及文件夹的大小. df:常用 df -h 以易读形式显示 磁盘空间 linux ...
- Axer-使用Msfvenom自动创建有效负载的工具
Axer-使用Msfvenom自动创建有效负载的工具 该axer将替换为有效的手动操作msfvenom,设置更容易和快了很多. AXER可以让您选择平台,格式,编码器,与另一个文件绑定以及许多其他功能 ...