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; }
!评论内容需包含中文