卡卡網(wǎng)

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

效果圖

demodownload

HTML

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

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

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

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 是左側(cè)面板div，.splitter 是左右兩側(cè)面板中間的分割邊框。

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

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: jquery-resizable