卡卡网

本文介绍如何使用 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