html 如何使用Javascript为Chrome的最小化、最大化和关闭按钮添加ID?[关闭]

lstz6jyr  于 2023-03-06  发布在  Java
关注(0)|答案(1)|浏览(176)

4天前关闭。
此帖子已于4天前编辑并提交审核,未能重新打开帖子:
原始关闭原因未解决
Improve this question
我有要求添加ID为最小化,最大化和关闭按钮,为新打开的标签(window.open)在 chrome 使用javascript。

qnzebej0

qnzebej01#

我做了如下假设:
使用jQuery/jQuery UI向对话框标题栏添加2个按钮**最小化按钮将具有2个功能:第一次单击时应隐藏内容,第二次单击时应恢复内容和位置最大化按钮将具有2个功能:**应将对话框扩展到窗口宽度(减去滚动条)和高度,第一次单击时应恢复对话框的原始位置和大小,第二次单击时关闭按钮不受影响这里是一个基本的、稍微冗长的方法。

$(function() {
  function addButtons(dlg) {
    // Define Buttons
    var $close = dlg.find(".ui-dialog-titlebar-close");
    var $min = $("<button>", {
      class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-minimize",
      type: "button",
      title: "Minimize"
    }).insertBefore($close);
    $min.data("isMin", false);
    $("<span>", {
      class: "ui-button-icon ui-icon ui-icon-minusthick"
    }).appendTo($min);
    $("<span>", {
      class: "ui-button-icon-space"
    }).html(" ").appendTo($min);
    var $max = $("<button>", {
      class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-maximize",
      type: "button",
      title: "Maximize"
    }).insertBefore($close);
    $max.data("isMax", false);
    $("<span>", {
      class: "ui-button-icon ui-icon ui-icon-plusthick"
    }).appendTo($max);
    $("<span>", {
      class: "ui-button-icon-space"
    }).html(" ").appendTo($max);
    // Define Function
    $min.click(function(e) {
      if ($min.data("isMin") === false) {
        console.log("Minimize Window");
        $min.data("original-pos", dlg.position());
        $min.data("original-size", {
          width: dlg.width(),
          height: dlg.height()
        });
        $min.data("isMin", true);
        dlg.animate({
          height: '40px',
          top: $(window).height() - 50
        }, 200);
        dlg.find(".ui-dialog-content").hide();
      } else {
        console.log("Restore Window");
        $min.data("isMin", false);
        dlg.find(".ui-dialog-content").show();
        dlg.animate({
          height: $min.data("original-size").height + "px",
          top: $min.data("original-pos").top + "px"
        }, 200);
      }
    });
    $max.click(function(e) {
      if ($max.data("isMax") === false) {
        console.log("Maximize Window");
        $max.data("original-pos", dlg.position());
        $max.data("original-size", {
          width: dlg.width(),
          height: dlg.height()
        });
        $max.data("isMax", true);
        dlg.animate({
          height: $(window).height() + "px",
          width: $(window).width() - 20 + "px",
          top: 0,
          left: 0
        }, 200);
      } else {
        console.log("Restore Window");
        $max.data("isMax", false);
        dlg.animate({
          height: $max.data("original-size").height + "px",
          width: $max.data("original-size").width + "px",
          top: $max.data("original-pos").top + "px",
          left: $max.data("original-pos").top + "px"
        }, 200);
      }
    });
  }

  $('#window').dialog({
    draggable: true,
    autoOpen: true,
    classes: {
      "ui-dialog": "ui-window-options",
      "ui-dialog-titlebar": "ui-window-bar"
    },
    modal: true,
    responsive: true,
  });

  addButtons($(".ui-window-options"));

  $("#winOpener").click(function() {
    $("#window").dialog("open");
  })
});


.ui-window-bar .ui-button {
  position: absolute;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-window-bar .ui-window-minimize {
  right: calc(.3em + 40px);
}

.ui-window-bar .ui-window-maximize {
  right: calc(.3em + 20px);
}

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<a href="#" id="winOpener">Open Window</a>

<div id="window" title="Test Window">window</div>

相关问题