首页 > 代码库 > EasyUI笔记（一）Base基础

EasyUI笔记（一）Base基础

2024-10-17 07:27:02   212人阅读

总结：
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. });

属性

属性名属性值类型描述默认值
proxystring,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
revertboolean如果设置为true，在拖动停止时元素将返回起始位置。false
cursorstring拖动时的CSS指针样式。move
deltaXnumber被拖动的元素对应于当前光标位置x。null
deltaYnumber被拖动的元素对应于当前光标位置y。null
handleselector开始拖动的句柄。null
disabledboolean如果设置为true，则停止拖动。false
edgenumber可以在其中拖动的容器的宽度。0
axisstring定义元素移动的轴向，可用值有：‘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. });

属性

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

事件

事件名事件参数描述
onDragEntere,source在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素。
onDragOvere,source在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素。
onDragLeavee,source在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素。
onDrope,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. });

属性

属性名属性值类型描述默认值
disabledboolean如果为true，则禁用大小调整。false
handlesstring声明调整方位,‘n‘=北,‘e‘=东,‘s‘=南等。n, e, s, w, ne, se, sw, nw, all
minWidthnumber当调整大小时候的最小宽度。10
minHeightnumber当调整大小时候的最小高度。10
maxWidthnumber当调整大小时候的最大宽度。10000
maxHeightnumber当调整大小时候的最大高度。10000
edgenumber边框边缘大小。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.  }});

属性

属性名属性值类型描述默认值
positionstring消息框位置。可用值有："left","right","top","bottom"bottom
contentstring消息框内容。null
trackMouseboolean为true时，允许提示框跟着鼠标移动。false
deltaXnumber水平方向提示框的位置。0
deltaYnumber垂直方向提示框的位置。0
showEventstring当激发什么事件的时候显示提示框。mouseenter
hideEventstring当激发什么事件的时候隐藏提示框。mouseleave
showDelaynumber延时多少秒显示提示框。200
hideDelaynumber延时多少秒隐藏提示框。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. });

属性

属性名属性值类型描述默认值
idstring组件的ID属性。null
disabledboolean为true时禁用按钮。false
toggleboolean为true时允许用户切换其状态是被选中还是未选择，可实现checkbox复选效果。（该属性自1.3.3版开始可用）false
selectedboolean定义按钮初始的选择状态，true为被选中，false为未选中。（该属性自1.3.3版开始可用）false
groupstring指定相同组名称的按钮同属于一个组，可实现radio单选效果。（该属性自1.3.3版开始可用）null
plainboolean为true时显示简洁效果。false
textstring按钮文字。‘‘
iconClsstring显示在按钮文字左侧的图标(16x16)的CSS类ID。null
iconAlignstring按钮图标位置。可用值有：‘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. }

方法

方法名方法参数描述
optionsnone返回属性对象。
resizewidth组件大小。 

代码示例：

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

实例代码下载

EasyUI笔记（一）Base基础


联系
我们