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

我需要在基本的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))
}

任何帮助将不胜感激!

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

这可以在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",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)。如果您希望许多对话框小部件具有这些功能,那将是很好的。

本文链接:https://www.f2er.com/3151783.html

大家都在问