标签：rip 状态 res 效果 显示 tool 大括号 set code
<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>
<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({
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 |
<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元素。 |
<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 |
<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 |
<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 |
<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‘); // 更改进度条到原始宽度 $(‘#p‘).progressbar(‘resize‘, 350); // 更改进度条到新的宽度 |
| getValue | none | 返回当前进度值。 |
| setValue | value | 设置一个新的进度值。 |
标签：rip 状态 res 效果 显示 tool 大括号 set code
原文地址：http://www.cnblogs.com/iwsx/p/7123013.html
