Question

我正在尝试将jQueryUI对话框设置为窗口的高度和宽度（减去一些填充）。理想情况下，我将这些选项设置为calc(100% - 100px) 的CSS值，而不是抓取$(window).height()，然后在用户调整窗口大小时必须处理更新事务。

这适用于width，但不适用于height。

这是我的HTML：

<button>Open Dialog</button>
<div id="filters-dialog" style="display: none;">
  asdf<br/>
  asdf<br/>
  asdf<br/>
  asdf<br/>
</div>

我的jQuery：

$("button").on("click", function(){
  $("#filters-dialog").dialog().dialog("open");
})
$("#filters-dialog").dialog({
  autoOpen: false,
  modal: true,
  width: "calc(100% - 100px)",
  height: "calc(100% - 100px)",
});

我尝试使用此功能的一些方法包括设置minHeight选项，将height和minHeight设置为open:或create:上的对话框选项，尝试在.ui-dialog或height上覆盖min-height的{{1}}或top或open:的CSS（以这种方式设置CSS似乎有效）对于某些属性但不是这些属性），将body和html的CSS设置为create:，然后抛出height: 100%。

这是 a fiddle ，我的尝试被注释掉了。提前感谢您的帮助。

Answer 1

jQuery UI的Dialog小部件仅接受Number或"auto"的高度，传递"calc(100% - 100px)"只会将其默认为"auto"。它的min / maxHeight仅为数字。打开对话框后，您必须以编程方式执行此操作。请记住，当您调用.dialog()属性时，您选择的是对话框内的内容，而不是对话框的包装div，因此要设置窗口的实际高度，您需要选择.dialog()的父级：

$("button").on("click", function(){
  $("#filters-dialog").dialog().dialog("open");
});

$("#filters-dialog").dialog({
  autoOpen: false,
  modal: true,
  width: "calc(100% - 100px)",
  open: function() {
    $(this).parent().css("height", "calc(100% - 100px)");
  }
});

请注意，如果您这样做，内容部分将不会按原样正确调整大小，因此如果您的内容大于窗口，则看起来很奇怪。

Answer 2

通过样式属性在窗口小部件上设置宽度和高度。例如：

<div style="position: absolute; height: auto; width: 404px; top: 50px; left: 45.8px; z-index: 101;" tabindex="-1" role="dialog" class="ui-dialog ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="filters-dialog" aria-labelledby="ui-id-1">

此处设置宽度，高度为auto。然后计算内容的高度，而不是整个对话框div：

<div id="filters-dialog" style="width: auto; min-height: 0px; max-height: none; height: 201.6px;" class="ui-dialog-content ui-widget-content">

这全部设置为包装的一部分，可以通过widget选项访问。要调整此项，您无法使用CSS，因为元素上的样式属性将受到控制。（可以尝试将""设置为值，但我不认为它会将所有内容放在一起。）

调整宽度应该非常直接。调整高度，而不是。高度不只是100% - 100px，而是(100% - 100px) - .ui-dialog-content padding - .ui-dialog-titlebar height (with padding) - .ui-dialog padding。并非不可能，只是复杂。

此时，就个人而言，我会使用窗户的高度和宽度来完成它。您经常预期用户调整窗口大小？

那么如何前进。可以尝试这样的事情：

open: function() {
  $(this).dialog("widget").css("width", "calc(100% - 100px)");
  $(this).dialog("widget").find(".ui-dialog-content").css("height", "calc(100% - 100px)");
}

它并不漂亮，但它可以满足需要。工作：https://jsfiddle.net/Twisty/4cjm2ood/

我不知道这会产生预期的结果。 100%高度将绑定到父级，从而计算错误的高度。您可能最好剥离样式并让CSS完成工作。

首先要记住的是，我们需要有选择地删除某些样式，而不仅仅是擦除它。

工作示例：https://jsfiddle.net/Twisty/4cjm2ood/2/

<强>的JavaScript

$(function() {
  function removeStyleAttr(list, item) {
    var parts = list.split(";");
    parts = parts.slice(0, -1);
    var styles = {},
      newList = "";
    $.each(parts, function(i, s) {
      var k = s.split(":")[0].trim();
      var v = s.split(":")[1].trim();
      styles[k] = v;
    });
    if (typeof item != "string") {
      $.each(item, function(k, v) {
        delete styles[v];
      });
    } else {
      delete styles[item];
    }
    $.each(styles, function(key, val) {
      newList += key + ": " + val + "; "
    });
    return newList.slice(0, -1);
  }

  $("button").on("click", function() {
    $("#filters-dialog").dialog("open");
  });

  $("#filters-dialog").dialog({
    autoOpen: false,
    classes: {
      "ui-dialog": "ui-diag-top",
      "ui-dialog-content": "ui-diag-content"
    },
    modal: true,
    width: $(window).width() - 100,
    height: $(window).height() - 100,
    open: function() {
      var s1 = $(this).dialog("widget").attr("style");
      var s2 = removeStyleAttr(s1, ["width", "height"]);
      var s3 = $(this).dialog("widget").find(".ui-dialog-content").attr("style");
      var s4 = removeStyleAttr(s3, "height");
      $(this).dialog("widget").attr("style", s2);
      $(this).dialog("widget").find(".ui-dialog-content").attr("style", s4);
    }
  });
});

首先是一个小功能：removeStyleAttr(List, Item)

List（String） - 分配给元素的所有CSS样式的列表
Item（String，Array） - 我们要删除的特定样式
返回值是所有剩余CSS样式的新字符串。

所以现在我们有办法从一个元素中切出一个特定的样式，例如＆＃34; width＆＃34;。删除后，我们可以使用自己的CSS。为此，我建议使用classes添加您自己的类名。

使用open回调，我们剥离了包装的width和height以及内容的height。这会将控件返回给CSS。

<强> CSS

.ui-diag-top {
  width: calc(100% - 100px);
  height: calc(100% - 100px);
}

.ui-diag-content {
  height: auto;
}

包装器的大小合适，工具栏保持不变，内容为auto以填补其余内容。

现在，如果您认为自己必须做很多事情，可以考虑使用Widget Factory并构建一个Super Dialog，它允许您接受String值而不是Integer的宽度和高度。

更新1

width选项会毫无问题地接受calc(100% - 100px)。 height正在进行操作，需要进行一些覆盖。

更新2

虽然width和height存储为值calc(100% - 100px)，但还有与这些值进行比较的调整大小函数：

https://github.com/jquery/jquery-ui/blob/master/ui/widgets/dialog.js

第788行：if ( options.minWidth > options.width ) {

第789行：options.width = options.minWidth;

第790行：}

即使你认为可以，你也有可能破坏某些东西。我只想创建一个可以在调整width和height的调整大小事件期间调用的函数。

更新3

这是一个更清晰的解决方案，允许调整大小并且不依赖于CSS。

工作示例：https://jsfiddle.net/Twisty/4cjm2ood/6/

<强>的JavaScript

$(function() {
  $.widget("custom.superDialog", $.ui.dialog, {
    options: {
      useWindowOffset: false,
      windowOffset: 0
    },
    open: function(event, ui) {
      if (this.options.useWindowOffset) {
        this.applyWindowOffset();
      }
      this._super(event);
    },
    _resetWidth: function(ow, dw) {
      var nw = $(ow).width() - dw;
      this._setOption("width", nw);
    },
    _resetHeight: function(ow, dh) {
      var nh = $(ow).height() - dh;
      this._setOption("height", nh);
    },
    applyWindowOffset: function() {
      var o = this.options.windowOffset;
      if (typeof o == "object" && o.length > 1) {
        this._resetWidth(this.window, o[0]);
        this._resetHeight(this.window, o[1]);
      }
      if (typeof o == "number") {
        this._resetWidth(this.window, o);
        this._resetHeight(this.window, o);
      }
      console.log(this.options);
    },
    resizeWindowOffset: function(event) {
      this.applyWindowOffset();
      this._size();
    }
  });

  $("button").on("click", function() {
    $("#filters-dialog").superDialog("open");
  });

  $("#filters-dialog").superDialog({
    autoOpen: false,
    modal: true,
    title: "I am offset!",
    useWindowOffset: true,
    windowOffset: 100
  });

  $(window).resize(function(e) {
    $("#filters-dialog").superDialog("resizeWindowOffset", e);
  })
});

利用Widget Factory，我们可以创建自己的自定义对话框小部件。我们添加了一些选项和方法，以便我们可以根据窗口的偏移量使用大小。

useWindowOffset：布尔值，默认false
windowOffset：整数或数组，默认为0。将useWindowOffset设置为true，并设置以像素为单位的偏移值或以像素为单位的数组（[width, height]）。
applyWindowOffset()：这不接受任何争论。将新的宽度和高度值应用于对话框。在open之前执行。
resizeWindowOffset()：此接受event但目前尚未使用它。调整窗口大小以调整大小时调用。

暂无更新。希望它有所帮助。

使用calc（）获取jQuery-ui对话框的高度，根据窗口高度设置它

2 个答案: