EasyUI 可调整尺寸

来源：互联网发布：国密算法 java实现编辑：程序博客网时间：2024/06/05 13:23

1、用法

通过标记创建可调整尺寸（resizable）对象。

<div class="easyui-resizable" style="width:100px;height:100px;border:1px solid #ccc;"    data-options="maxWidth:800,maxHeight:600"></div>

使用 javascript 创建可调整尺寸（resizable）对象。

<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>$('#rr').resizable({    maxWidth:800,    maxHeight:600});

2、属性

名称

类型

描述

默认值

disabled

boolean

如果设置为 true，则禁止调整尺寸。

false

handles

string

指可调整尺寸（resizable）的方向，'n' 是北，'e' 是东，等等。

n, e, s, w, ne, se, sw, nw, all

minWidth

number

调整尺寸时最小宽度。

minHeight

number

调整尺寸时最小高度。

maxWidth

number

调整尺寸时最大宽度。

10000

maxHeight

number

调整尺寸时最大高度。

10000

edge

number

被调整尺寸的边框的边缘。

3、事件

名称

参数

描述

onStartResize

开始调整尺寸时触发。

onResize

调整尺寸期间触发。返回 false 时，DOM 元素将不进行实际的调整尺寸动作。

onStopResize

停止调整尺寸时触发。

4、方法

名称

参数

描述

options

none

返回可调整尺寸（resizable）选项（options）。

enable

none

启用可调整尺寸（resizable）特性。

disable

none

禁用可调整尺寸（resizable）特性。

5、示例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basic Resizable - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../css/easyui.css"><link rel="stylesheet" type="text/css" href="../css/icon.css"><link rel="stylesheet" type="text/css" href="../css/demo.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body><h2>Basic Resizable</h2><p>Click on the edge of box and move the edge to resize the box.</p><div style="margin:20px 0;"></div><div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="width:200px;height:150px;border:1px solid #ccc;"><div style="padding:20px">Resize Me</div></div><div id="dd" class="easyui-draggable easyui-resizable" data-options="handle:'#mytitle'" style="width:200px;height:150px;border:1px solid #ccc"><div id="mytitle" style="background:#ddd;padding:5px;">Title</div><div style="padding:20px">Drag and Resize Me</div></div></body></html>

0 0