当前位置:主页 > JavsScript库 > 布局 >

JavaScript中可调整大小的拆分布局 - Resizable.js
栏目分类:布局   发布日期:2021-08-18   浏览次数:

Resizable.js 是一个纯 JavaScript 库,用于创建可调整大小的拆分布局,您可以通过拖放或触摸事件调整每个“窗口”的大小。

使用:

1. 首先,在网页上包含 Resizable.js 库。

<link rel="stylesheet" href="resizable-style.css" />
<script src="resizable.js"></script>

2. 将您的布局拆分为多个“窗口”,如下所示:

<div id="main">
  <div class="resizable-left" id="win1">
    <div class="resizable-top" id="win3">
      <div class="resizable-left" id="win5"></div>
      <div class="resizable-right" id="win6"></div>
    </div>
    <div class="resizable-bottom" id="win4"></div>
  </div>
  <div class="resizable-right" id="win2">
    <div class="resizable-top" win="win7">
      <div class="resizable-left" id="win9"></div>
      <div class="resizable-right" id="win10">
        <div class="resizable-top" id="win11">
          <div class="resizable-left" id="win13"></div>
          <div class="resizable-right" id="win14"></div>
        </div>
        <div class="resizable-bottom" id="win12"></div>
      </div>
    </div>
    <div class="resizable-bottom" id="win8"></div>
  </div>
</div>

3. 在父级上初始化库并完成。

Resizable.initialise("main");

4. 使拆分布局完全响应。

window.addEventListener("resize", () => {
  Resizable.activeContentWindows[0].changeSize(window.innerWidth, window.innerHeight);
  Resizable.activeContentWindows[0].childrenResize();
});

5. 设置每个窗口的大小(百分比)如下:

var sizes = {
    "win1" : 0.5,
    "win3" : 0.75,
    "win4" : 0.5,
    "win6" : 0.4,
    "win11" : 0.8,
    "win9" : 0.5,
    "win13" : 0.4 
};


官方网站:https://github.com/Tom-Rawlings/Resizable.js

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库