本文介紹如何使用 jquery-resizable 插件來調整div框的大小。

效果圖

demodownload

示例介紹

這個簡單的示例只是使用窗口底部的大小調整夾點來調整單個框的大小。注意 .resizable() 不處理UI方面，它只管理實際的調整大小操作本身。你負責創建放置調整手柄大小，使其對用戶界面有意義。

HTML代碼

<div class="box">
  <div class="boxheader">Header</div>
  <div class="boxbody">
    Resize me
  </div>
  <div class="win-size-grip"></div>
</div>

最外層div的class為box，里面的class為win-size-grip的div為可拖動的夾點，不能缺少。其他的div為內容布局，不是必須的。

CSS代碼

.box {
   margin: 40px;
   box-shadow: 5px 5px 10px #535353;
   border: 1px silver;
   border-radius: 4px;
   position: relative;
   width: 500px;
   height: 400px;
   overflow: hidden;
   /* limit size with min/max-width/height*/
   min-height: 100px;
   min-width: 200px;
   max-width: 999px;
   max-height: 800px;
 }
.win-size-grip {
   position: absolute;
   width: 16px;
   height: 16px;
   padding: 4px;
   bottom: 0;
   right: 0;
   cursor: nwse-resize;
   background: url(wingrip.png) no-repeat;
 }

.box為div框的樣式，是個可以調整大小的div。

.win-size-grip 是div右下角的夾點，鼠標放在它上面，可拖動class為.box的外層div。

jQuery

本示例需要使用 jquery-resizable.js 插件，因此首先要引用兩個庫文件，一個是jQuery庫文件，另一個是 jquery-resizable.js 插件：

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-resizable.js'></script>

jQuery實現功能的代碼如下：

$(".box").resizable({
  handleSelector: ".win-size-grip" });

是不是非常簡單？是的！要應用調整大小，可使用 .resizable 方法并指定可調整大小的容器和啟動調整大小的調整句柄。代碼里 .box 和 .win-size-grip 就是前面介紹的HTML代碼里的div的class屬性值。

請注意，你也可以通過重新應用初始選擇器來使用初始容器來調整大小。使用代碼如下：

$(".box").resizable({
    onDragStart: function (e, $el, opt) {
        $el.css("cursor", "nwse-resize");
    },
    onDragStop: function (e, $el, opt) {
        $el.css("cursor", "");
    }
});

總結

本文介紹了如何使用 jquery-resizable 插件輕松調整div框大小的方法。該插件簡單易用，實現代碼也十分簡單——只需要1行。

相關文章

• 使用jquery-resizable創建可調整大小的表(table)列
• 使用jquery-resizable插件調整左右/上下窗格大小

標簽: jquery-resizable