卡卡網(wǎng)

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

效果圖

demodownload

示例介紹

這個(gè)簡單的示例只是使用窗口底部的大小調(diào)整夾點(diǎn)來調(diào)整單個(gè)框的大小。注意 .resizable() 不處理UI方面，它只管理實(shí)際的調(diào)整大小操作本身。你負(fù)責(zé)創(chuàng)建放置調(diào)整手柄大小，使其對(duì)用戶界面有意義。

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為可拖動(dòng)的夾點(diǎn)，不能缺少。其他的div為內(nèi)容布局，不是必須的。

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框的樣式，是個(gè)可以調(diào)整大小的div。

.win-size-grip 是div右下角的夾點(diǎn)，鼠標(biāo)放在它上面，可拖動(dòng)class為.box的外層div。

jQuery

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

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

jQuery實(shí)現(xiàn)功能的代碼如下：

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

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

請(qǐng)注意，你也可以通過重新應(yīng)用初始選擇器來使用初始容器來調(diào)整大小。使用代碼如下：

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

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: jquery-resizable