JQ UI集中有个对窗口大小调整的控件：Resizable，可以按照一定条件拖拉调整窗口尺寸。包括限制最大/最小尺寸，等比调整，栅格调整，同比窗口。现在来看看如何对其进行调用：
JQ 的UI包里面的示例中有个叫splitpane的实例，演示的就是如何使用这个UI。
参数设置说明：
- $('div ').resizable({
- alsoResize: false, //2个窗口同比缩放，例如: ‘#id’
- animate: false, //设置动画效果
- animateDuration: “slow”, //动画频率
- animateEasing: “swing”,
- aspectRatio: false, //设置缩放比例，本窗口比例
- autoHide: false,
- cancel: “:input,option”,
- containment: false, //以父系元素高宽为缩放范围，这个尺寸为父系元素宽(高)-margin值
- delay: 0, //延时缩放效果 移动多少毫秒后开始缩放 单位毫秒
- distance: 1, //延时缩放效果，移动多少px开始缩放 单位px
- ghost: false, //复制显示缩放效果
- grid: false, //栅格缩放，单位px
- handles: “e,s,se”,//横向拖动，或竖向拖动
- helper: false,
- maxHeight: null, //最大高度
- maxWidth: null, //最大宽度
- minHeight: 10, //最小高度
- minWidth: 10, //最小宽度
- zIndex: 1000
- });
可以从中看到JQ的Resizable这个UI可配置的参数还是很多的，可以根据实际需求进行调整，但并非所有的参数都是必须的。
值得说明的是：在CSS里面有二个样式比较重要,缺少这二个IE6下就无法移动。
- .ui-resizable-e {
- width: 10px; height: 475px;
- background:#e1e7f2 url(../images/splitpane_handle-ew.gif) no-repeat scroll 75% 50% !important;
- cursor:col-resize !important;
- border-left: #bbb 1px solid;
- padding: 3px;
- }
- .ui-resizable-n {
- height: 10px;
- background:#e1e7f2 url(../images/splitpane_handle-sn.gif) no-repeat scroll 50% 55% !important;
- border-top: #bbb 1px solid;
- padding: 3px;
- }
参数中的handles是指定移动方向，e为横向，s为竖向，se即是宽高等比例缩放。
