卡卡網

本文介紹如何使用jquery-resizable插件調整左右/上下窗格大小。

效果圖

demodownload

HTML

<label>水平拆分窗格:</label>
<div class="panel-container">
    <div class="panel-left"> 左側面板 </div>
    <div class="splitter"> </div>
    <div class="panel-right"> 右側面板 </div>
</div>

<label>垂直拆分窗格:</label>
<div class="panel-container-vertical">
    <div class="panel-top"> 上側面板 </div>
    <div class="splitter-horizontal"> </div>
    <div class="panel-bottom"> 下側面板 </div>
</div>

panel-container 和 panel-container-vertical 是外層DIV容器，它們內部均有3個div，其中 splitter 和 splitter-horizontal 是可拖動的中間邊框，其余兩個分別是左側/右側面板，和上側/下側面板。

jQuery

需要先引用jquery庫文件，和 jquery-resizable.js 插件。

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-resizable.js'></script>
<script>
$(".panel-left").resizable({
  handleSelector: ".splitter",
  resizeHeight: false });

$(".panel-top").resizable({
  handleSelector: ".splitter-horizontal",
  resizeWidth: false });
</script>

.panel-left 是左側面板div，.splitter 是左右兩側面板中間的分割邊框。

.panel-top 是上側面板div，.splitter-horizontal 是上下兩側面板中間的分割邊框。

總結

本文介紹了如何使用 jquery-resizable 插件調整左右/上下窗格大小。實現(xiàn)方法并不復雜，HTML布局結構代碼清晰，而jQuery編寫代碼也非常簡單。如果你要在網頁實現(xiàn)這種效果，那么本文介紹的方法是值得推薦使用的。你可以下載本文示例的源代碼，或者收藏本頁備用。

相關文章

• 使用jquery-resizable創(chuàng)建可調整大小的表(table)列
• 使用jquery-resizable插件輕松調整div框大小

標簽: jquery-resizable