JQ UI集中有個對窗口大小調(diào)整的控件:Resizable,可以按照一定條件拖拉調(diào)整窗口尺寸。
包括限制最大/最小尺寸,等比調(diào)整,柵格調(diào)整,同比窗口。現(xiàn)在來看看如何對其進行調(diào)用: JQ 的UI包里面的示例中有個叫splitpane的實例,演示的就是如何使用這個UI。 $('div ').resizable({ alsoResize: false, //2個窗口同比縮放,例如: ‘#id’ animate: false, //設(shè)置動畫效果 animateDuration: “slow”, //動畫頻率 animateEasing: “swing”, aspectRatio: false, //設(shè)置縮放比例,本窗口比例 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可配置的參數(shù)還是很多的,可以根據(jù)實際需求進行調(diào)整,但并非所有的參數(shù)都是必須的。 值得說明的是:在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; }
!評論內(nèi)容需包含中文