[TOC] ## 可調整尺寸小部件 demo ``` //style .ui-resizable-helper { border: 1px dotted gray; } //給拖動的部件添加虛線 $(".demo").resizable({ animate: true, aspectRatio: 16 / 9 , //保持縱橫比 containment: "#container", //限制縮放區域 helper: "ui-resizable-helper", //默認 ui-resizable-helper 拖動時自動添加的類 ghost: true,//一個半透明視覺框 }) ``` 選項 ``` alsoResize:Selector 同步調整其他 部件 animate:Boolean 設置動畫 aspectRatio:Boolean,Number 限制長寬比 autoHide:Boolean 當用戶鼠標沒有懸浮在元素上時是否隱藏手柄 delay:Number 鼠標按下調整按鈕的生效時間 disabled:Boolean 禁用拖拽 ghost:Boolean 為調整尺寸顯示一個半透明的輔助元素 grid:Array 可調整尺寸元素對齊到網格，每個 x 和 y 像素。數組形式必須是 [ x, y ] minHeight-maxHeight 設置元素的高界限 minWidth-maxWidth 設置元素的高界限 ``` 事件 ``` create( event, ui ) 當 resizable 被創建時觸發。 resize( event, ui ) 在調整尺寸期間當調整手柄拖拽時觸發。 start( event, ui ) 當調整尺寸操作開始時觸發。 stop( event, ui ) 當調整尺寸操作停止時觸發。 ```