jQuery之尺寸調整組件的深入解析_jquery

1：尺寸調整組件(Resizable)組件可以使選取的DOM元素變成可調整尺寸的物件，即可以透過拖曳調整手柄來改變其尺寸大小。
$(".selector").resizeable(options);
簡單實例：

複製🎜>

複製代碼

代碼如下:

效果圖：

其實，在呼叫resizable()方法之後，將會在目標物件的右邊框、下邊框和右下角分別加入div元素，並對div元素依序加入ui-resizable-e, ui-resizable-s, ui-resizable-se類，從而形成拖曳手柄

2：延遲調整

複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製碼>

body {
 字體大小：14px;
}
#wrap {
 邊距：10px 20px 10px auto;
 內邊距：10px;
 寬度：350px;
# 高度：1🎜> 寬度：350px;
# 高度：150ppo; 🎜> 邊框：5px 實心#000;
 浮動：右；
 溢位：自動；
}
.message_box {
 寬度：220px;
filter:dropshadow(color=#666666, offx=3, offy=3, Positive=2);
 浮動：左;
 右邊距:10px;
}
#mask {
位置:絕對;
 頂部:0;
 左:0;
寬度:表達式(body .clientWidth);
高度:表達式(body.clientHeight);
 背景:# 666;
 過濾器:ALPHA(opacity=60);
 z-index:1;
 可見性:隱藏
}
.message {
 邊框:
}
.message {
 邊框: 邊框寬度:1 1 3 1;
 寬度:95%;
 高度:95%;
 顏色:#036;
 字體大小:12px;
 行：1🎜> 字體大小:12px;
 
}
.header {
 背景:#036;
 高度:22px;
 字體系列：Verdana、Arial、Helvetica、sans-serif；
 字體大小：12pp； 🎜> 內邊距：3px 5px 0px 10px;
 顏色：#fff;
 遊標：移動；
}
ul {
 margin-right:25px; >.header div {
 display:inline;
 寬度:150px;
}
.header span {
 float:right; 顯示:inline;
 float:right; 顯示:inline;
 float:right;}
字段集{
 margin-bottom:5px;
}
.area {
 寬度：120px;
 邊框：2pxx 實體#D6D6D6;邊距：10px;
 背景：#FFF;
 高度：80px;
 內邊距：5px;
}

 

   

    /div>
      × span>

   

拖曳參數最外相似查看效果，如下

    時間延遲：500

     距離延遲：20

 

3：動態調整效果
需要藉助調整組件的一下屬性來實現：
*為helper屬性設定一個CSS樣式類，此樣式類別會在調整過程中顯示元素大小的大小，操作結束後才會調整原始元素的大小
*設定ghost屬性為true，在調整過程中顯示一個半透明的輔助元素 *將animate屬性設為true，為元素的調整過程加入動畫效果
*為animateDuration屬性指定一個值，設定動畫過程持續的時間



複製程式碼

程式碼如下：

@charset "utf-8";
/* CSS 文件*/
body {
 margin:0;
 padding:0;
 字體大小:14px
}
.content {
 margin-left:10px;
 margin-left:10px;
 行高:24px;
}
#wrap {
 邊距: 20px自動10 像素自動；
 寬度：390 像素；
 .ff距：10 像素；
 邊框：5 像素實線#000；
 文字對齊：左；
}
h1 {
 顏色:#006;
 >h1 {
 顏色:#006;
 字體大小大小：24px;
 字體粗細:粗體;
 文字對齊:中心;
 邊距底部:0px;
}
h2 {
 字體大小:12px;
 文字對齊:居中;
 字體粗細:正常;
 邊框頂部:#ccc 1px 虛線;
 顏色:#666;
 高度:24px;
 邊距:3px 5px}
p {
 文字縮排: 20px;
}
.ui-ressized-helper {
 邊框：2px 虛線>.ui-ressized-helper {
 邊框：2px 虛線#600;#600; 🎜>

4：調整組件的方法
尺寸調整組件有4個方法，尺寸調整組件有4個方法，它們都是拖曳組件和投放組件所共有的，即disable方法、enable方法、destroy方法和option方法

複製程式碼
程式碼如下：

   // 禁止調整尺寸功能  $(".selector").ressized('disable');  //重新啟動物件的可調整尺寸功能  $( ".selector").resized('enable'); //刪除調整尺寸功能

 $('.selector').ressized('destroy');

 / /初始化後maxHeight 屬性的值設定為480
  $('.selector').ressized('option', 'maxHeight', 480);
 //初始化後取得maxHeight 屬性的值
  $(' .selector').ressized('option', "maxHeight");




5:調整事件回呼函數


start:事件類型resizestart，開始拖曳拖曳大小時觸發

resize：事件類型resize，拖曳過程中，滑鼠每個移動一像素就觸發一次
stop：事件類型resizestop，停止拖曳時觸發
複製程式碼


程式碼如下：

  $("#droppable").droppable(      eventName: function (event, ui) {        //特定處理程式碼，且表示可調整尺寸的物件    }});ui則是一個包含附加資訊的jQuery對象，該jQuery對象具有一下屬性：
helper: 一個jQuery對象，表示可拖曳助手元素
originalPosition: 一個包含top屬性和left屬性的對象，表示開始調整前元素相對於原始對象的位置
originalSize: 一個包含width和height屬性的對象，表示開始調整前元素的尺寸大小
position : 一個包含top屬性和left屬性的對象，表示當前元素相對於原始對象的位置
size: 一個包含width屬性和height屬性的對象，表示當前元素的尺寸大小
簡單示例：

複製代碼 代碼如下:

//W3C/1. Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

   

 🎜>   

菲貓

      ×