javascript - jQuery UI 多个可调整大小的 div 不大于父 div-6ren

javascript - jQuery UI 多个可调整大小的 div 不大于父 div

转载作者：行者123 更新时间：2023-12-02 22:02:40

我有一个父 div。父 div 包含其他五个 div(彼此相邻)。我想做的是使用 jQuery UI 调整这些 div 的大小。

问题(这对我来说很困难)是所有五个 div 的可调整宽度不能大于父 div 的宽度。例如:

比方说，父级 div 的宽度为 500 像素(在我的屏幕上为 100%)。
父 div 内的每个 div 的宽度为 100px(包括边距和边框)；

当 div 1 的宽度从 100 像素调整为 200 像素时，会发生以下情况:

Div 1 现在的宽度为 200 像素。
第 2、3、4 和 5 格的宽度为 75 像素(因为每个 500 像素 - 300 像素 = 200 像素/4 = 75 像素)。

我在下面添加了代码示例和图像。我使用了在 StackOverflow 上找到的示例并对其进行了调整。为什么这个例子不能正常工作？为什么 div 移动到下一行而不是停在屏幕末尾？

感谢您的帮助。

<style>
body, html {
    margin: 0;
    padding: 0;
}
#app {
    width: 100%;
    height: 100%;
}
#resultColumns {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    padding: 10px;
}
.columnContainer {
    min-width: 100px;
    height: 100%;
    background-color: #eeeeee;
    float: left;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
}
.lastColumnContainer {
    border-right: 1px solid #333333;
}
.columnHeader {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.columnContent {
    font-size: 14px;
    text-align: left;
}
</style>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<html>
    <body>
        <div id="app">
            <div id="resultColumns">
                <!-- First Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 1</div>
                    <div class="columnContent">Content 1</div>
                </div>
                <!-- Second Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 2</div>
                    <div class="columnContent">Content 2</div>
                </div>
                <!-- Third Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 3</div>
                    <div class="columnContent">Content 3</div>
                </div>
                <!-- Fourth Column -->
                <div class="columnContainer">
                    <div class="columnHeader">Title 4</div>
                    <div class="columnContent">Content 4</div>
                </div>
                <!-- Fifth Column -->
                <div class="columnContainer lastColumnContainer">
                    <div class="columnHeader">Title 5</div>
                    <div class="columnContent">Content 5</div>
                </div>
            </div>
        </div>
    </body>
</html>

<script>
    makeResizable();
    function makeResizable() {
        $('#resultColumns .columnContainer:eq(0)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(0)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(1)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(1)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(2)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(2)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(3)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(3)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
        $('#resultColumns .columnContainer:eq(4)').resizable({
            maxWidth: getMaxWidth($('#resultColumns .columnContainer:eq(4)')),
            stop: updateMaxWidth,
            handles: 'e'
        });
    }
    function getMaxWidth(e) {
        return $('#resultColumns').width() - e.siblings().outerWidth() - 10; // 10px for the borders (2px each) - 5 divs in total
    }
    function updateMaxWidth(e, ui) {
        ui.element.siblings().resizable('option', 'maxWidth', getMaxWidth(ui.element.siblings()));
    }
</script>

最佳答案

这里的问题是您必须计算每个可调整大小的切片，包括边框。最初，您查看第一个元素并计算其他同级元素的 maxWidth。对于您的示例，这是其他 4 个元素。

如果您捕获其他元素之一，比如说第三个元素，则需要更新其他剩余的下一个兄弟元素，以便它们的 maxWidth 是剩余的部分。

$(function() {
  function getPad(o, d) {
    return parseInt(o.css("padding-" + d));
  }

  function getMaxWidth(o) {
    var mw = parseInt(o.parent().innerWidth()) - (getPad(o.parent(), "left") + getPad(o.parent(), "right"));
    var sbw = 2; // First & Last Border
    o.siblings(".columnContainer").each(function(i, el) {
      sbw += parseInt($(el).width()) + 1; // Inner Border
    });
    return mw - sbw;
  }

  function makeResizable() {
    $('#resultColumns .columnContainer').resizable({
      handles: 'e',
      maxWidth: getMaxWidth($("#resultColumns .first")),
      resize: function(e, ui) {
        console.log($(this).width(), getMaxWidth($(this)));
      },
      stop: function(e, ui) {
        $(this).siblings().each(function(i, el) {
          $(el).resizable("option", "maxWidth", getMaxWidth($(el)));
        });
      }
    });
  }

  makeResizable();
});

html,
body {
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100%;
}

#resultColumns {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
}

.columnContainer {
  min-width: 100px;
  height: 100%;
  background-color: #eeeeee;
  float: left;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
}

.last {
  border-right: 1px solid #333333;
}

.columnHeader {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.columnContent {
  font-size: 14px;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<div id="app">
  <div id="resultColumns">
    <!-- First Column -->
    <div class="columnContainer first">
      <div class="columnHeader">Title 1</div>
      <div class="columnContent">Content 1</div>
    </div>
    <!-- Second Column -->
    <div class="columnContainer">
      <div class="columnHeader">Title 2</div>
      <div class="columnContent">Content 2</div>
    </div>
    <!-- Third Column -->
    <div class="columnContainer">
      <div class="columnHeader">Title 3</div>
      <div class="columnContent">Content 3</div>
    </div>
    <!-- Fourth Column -->
    <div class="columnContainer">
      <div class="columnHeader">Title 4</div>
      <div class="columnContent">Content 4</div>
    </div>
    <!-- Fifth Column -->
    <div class="columnContainer last">
      <div class="columnHeader">Title 5</div>
      <div class="columnContent">Content 5</div>
    </div>
  </div>
</div>

关于javascript - jQuery UI 多个可调整大小的 div 不大于父 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59826778/

文章推荐： xamarin - Xamarin 的 EMDK

文章推荐： java - 带有 header 的 Hadoop MapReduce 输出

文章推荐： apache-spark - 适用于业务流程的Apache Spark？

C++ 字符串。为什么答案显示字符串 "dog"大于 "cat"，然后 "cat"大于 "dog"？
我不太确定为什么较大字符串(“cat”和“dog”)的答案不一致。我正在用链接列表和模板的使用做一些事情。我的好奇心促使我修改模板和函数重载。如果有人能解释发生了什么，我将不胜感激。谢谢你。 #inc
MySQL 大于 IN
目前我必须编写这样的查询 SELECT * FROM table WHERE value1 > 5000 OR value2 > 5000 OR value3 > 5000 OR value4 > 5
SQL 大于、等于和小于
我想创建一个如下所示的查询，但我不确定如何正确编码，我希望它在开始时间的 1 小时内返回所有预订，这是我想出的: SELECT BookingId, StartTime FROM Booking W
JavaScript:小于 + 大于
这个问题已经有答案了: How to check if a number is between two values? (12 个回答) 已关闭 6 年前。我目前正在 Codecademy 上学习
jquery - 大于/小于问题
我想验证用户输入。如果用户输入的数字大于 3，则应抛出错误“Too high”，如果小于 0.15，则应抛出“Too low”错误。如果它在 3 到 0.15 之间，那么它应该显示“好的”。我的代码
jquery 大于/小于只查看第一个数字？
我有一个拖动脚本，我在其中拖动 div.slider，我正在跟踪 div.slider 的“左”值，并在它大于 68 时让它淡出，但问题是它当它达到 6 而不是 68 时淡出。如果我将数字更改为 85
sql - 如何在数据库中存储小于/大于
是否有一种常见的模式如何在数据库(postgresql)中存储这样的条件，然后以简单的方式从数据库中获取这些数据，并在前端将其与我们在前端的值 SE 进行比较(以获得正确的“值” "): condit
java - 大于/小于在内部工作的程度
如何大于/小于内部工作如果我将 5 与 100 与 5 与 2,147,483,647 (Integer.MAX_VALUE) 进行比较，性能会受到多大影响 5 < 100 and 5 < Inte
mysql:条件语句问题，大于
当我运行此查询时它有效 SELECT sum( amount ) AS balance FROM balance WHERE amount >= 100 但是当我想过滤用户 ID 时，它返回 NULL
MySql 大于 group by
我有下表: account(id, balance, bank_branch) 我想选择账户余额大于其 bank_branch 平均余额的所有账户我试过了 Select id from accoun
java - lucene 大于
你们有没有人知道如何搜索所有大于指定数字的数字？例如:所有单据编号>65 我试过这样:documentNumber: [65 TO *] 但我收到异常，因为 lucene 期望解析一个没有 * 的数
Prolog - 大于 x 的数字
我正在使用 Prolog 算法，并且有一个生成抽象语法树的程序，例如 plus(num(1),num(2))这只是 1+2 .这是通过使用 DCG 来完成的。在这个例子中 plus(num(1),nu
trigonometry - 大于 360 度角的三角比
是否使用 Sin(720) 或 Cos(1440)(以度为单位的角度)？无论是在计算机编程中还是在任何其他情况下？一般来说，是否有任何角度的 Sin/Cosine/Tan 使用大于360？在物
bash - awk 大于 float
我发现了一些与此相关的问题，但没有一个真正回答了我的问题。我有一个像这样的表格文件: 2 10610 0 0 0 0.0105292 2 10649 0 0 0
Prolog 大于/2 成功
我是 Prolog 的新手，我正在尝试解决这个练习: Define a predicate greater_than/2 that takes two numerals in the notation
SQL COUNT* GROUP BY 大于，
我想选择具有出现次数的不同键，此查询似乎有效: SELECT ItemMetaData.KEY, ItemMetaData.VALUE, count(*) FROM ItemMetaData GROU
c - 大于 ULLONG_MAX 的数值
我需要存储和使用大于 ULLONG_MAX 的数值。我需要对这些值进行算术运算，所以我认为存储为 char** 不是一个选项。在这些情况下，有没有办法动态创建额外的 long 前缀？谢谢大家。根
Prolog 大于/2 成功
我是 Prolog 的新手，我正在尝试解决这个练习: Define a predicate greater_than/2 that takes two numerals in the notation
java - 大于 64 位的快速位掩码
处理已知大小但大于 64 位的位掩码(即执行所有位操作)的最有效的数据结构是什么？字节[]？大整数？完全是别的东西吗？需要与 Java 7 兼容，并且对于诸如此类的事情应该很快(或者至少与合理预
java - JTable 大于 JFrame
编辑:抱歉进行了许多编辑。我自己都忘记写了什么了。我使用 JPanel，将 BoxLayout 作为 JFrame 的根面板。我向此根面板添加了另外两个面板:带有 FlowLayou 的 Butto

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery UI 多个可调整大小的 div 不大于父 div