如何設置jQuery的可調整大小的小部件來調整圍繞中心

jQuery resizable widget使用左上角的座標，因爲它是調整中心。但我希望我的元素在使用鼠標調整大小時圍繞它的中心進行重新調整。如何設置jQuery的可調整大小的小部件來調整圍繞中心

它會是不錯的，如果提供的jQuery這樣一個選項：

$(".selector").resizable({ origin: 'center' });

但不幸的是，這是still an open issue超過兩年了。

是否有可能實現使用jQuery的電流API上述功能？

來源

2014-03-07 Owaeis N.

難道是一個選項，你可以考慮使用CSS3轉換？如果是這樣，您可以使用CSS3縮放div並將transform-origin設置爲中心。 – athms

這是一個很好的替代方案，我想在使用拖動條調整元素的大小時最好。我想使用帶右下角的調整大小控件的鼠標指針調整元素的大小。 –

您可以在.selector div的右下角插入一個小格子，並通過單擊/拖動進行響應，並相應地更新比例屬性。至少在理論上！ – athms

我希望這將幫助你：

考慮這個HTML

<div class="demo"> 
      <div id="temp_resize" style="display: none;width: 350px;"></div> 
      <div id="resizable" class="ui-widget-content"> 
       There are 2 method in css where you can make a div invisible. Its important to 
know how to hide a div or any given container dynamically, to improve the user interactions in 
modern web sites. 

    blah blah blah 

      </div>

的CSS

#resizable { 
      text-align:center; 
      width: 350px; 
      height: 150px; 
      padding: 5px; 
      overflow: hidden 
     } 
     #resize_msg { 
      background-color: #3084DD; 
      color: #fff; 
      width: 350px; 
      padding: 5px; 
      font-size: 14px; 
      font-weight: bold; 
     }

那麼jQuery的將是：

$(function() { 


      $("#temp_resize").html($("#resizable").html()); 
      var actual_height = $("#temp_resize").height() + 30; 

      $("#resizable").resizable({ 
       minWidth:350,maxWidth: 350,maxHeight:actual_height 
      }); 

      $("#resizable").resize(function() { 
       if($('#resizable').height() > (actual_height - 30)){ 
        $("#resize_msg").html("No More Content"); 
       }else{ 
        $("#resize_msg").html("Resize For More Content"); 
       } 
      }); 

     });

來源

2014-03-07 14:58:43

如何設置jQuery的可調整大小的小部件來調整圍繞中心

回答

相關問題