Question

我需要在基本的jQuery对话框中添加最大化和最小化按钮（应该起作用）。请找到以下代码以供参考：

ForEach($printer in $printers){
    $payload = @{
        "name" = $printer.name
        "status" = $printer.status
        "lastPrintJobSeconds" = $printer.lastPrintJobSeconds
        "heldJobsCount" = $printer.heldJobsCount
        "physicalPrinterId" = $printer.physicalPrinterId
    }
    Invoke-RestMethod -Method Post -Uri "$endpoint" -Body (ConvertTo-Json @($payload))
}

任何帮助将不胜感激！

Answer 1

这可以在create回调中完成，以添加功能按钮。只需单击每个按钮，即可将width的{{1}}和height选项更改为特定值。

唯一要记住的是，您想在添加按钮时调用.dialog()。

widget

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "Delete all items": function() {
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    },
    create: function(e, ui) {
      var that = $(this);
      var dlg = $(this).dialog("widget");
      var min = $("<button>", {
          class: "ui-dialog-titlebar-min",
          type: "button",
          title: "Minimize"
        })
        .button({
          icon: "ui-icon-minusthick",
          showLabel: false
        });
      var max = $("<button>", {
          class: "ui-dialog-titlebar-max",
          type: "button",
          title: "Maximize"
        })
        .button({
          icon: "ui-icon-arrowthick-2-ne-sw",
          showLabel: false
        });
      var oSize = {
        width: that.dialog("option", "width"),
        height: that.dialog("option", "height"),
        position: {
          my: "center",
          at: "center",
          of: window
        }
      };
      var mSize = {
        width: $(window).width(),
        height: $(window).height(),
        position: {
          my: "left top",
          at: "left top",
          of: window
        }
      };
      min.click(function(e) {
        that.dialog("option", oSize);
      });
      max.click(function(e) {
        that.dialog("option", mSize);
      });
      $(".ui-dialog-titlebar .ui-dialog-title", dlg).after(min, max);
    }
  });
});

.ui-dialog-titlebar span.ui-dialog-title {
  width: 83%;
}

.ui-dialog-titlebar .ui-dialog-titlebar-min,
.ui-dialog-titlebar .ui-dialog-titlebar-max {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  padding: 1px;
  margin: -10px 0 0 0;
}

.ui-dialog-titlebar .ui-dialog-titlebar-max {
  right: 1.75em;
}

.ui-dialog-titlebar .ui-dialog-titlebar-min {
  right: 3.25em;
}

此示例使用所有jQuery UI元素和小部件。如您所见，这两个按钮更改了对话框的大小。如果您希望他们做其他事情，则可以轻松地更新他们的点击功能，并且可以访问所有元素。

您还可以使用Widget Factory将其内置到自己的Widget中（请参见Extending Widgets）。如果您希望许多对话框小部件具有这些功能，那将是很好的。

如何在jQuery Basic对话框中添加最大化和最小化按钮

1 个答案: