Question

我正在使用信息中心工作，我在一个网页上打开了多个iframes，每个iframe都有一个不同的网站。我已经能够让div按住iframes来调整大小和拖动，但是当我按下左上角图像时，我无法让它最小化。这就是我到目前为止所拥有的：

＆＃13;

// JavaScript Document
$(function () {"use strict"; 
	$("#framewrap") .resizable() .draggable();
});

＆＃13;

.body_padding {
    padding: 16px;
}
#framewrap {
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 28px;
    background-color: #277099;
    width: 512px;
    height: 90px;
    -webkit-box-shadow: 2px 2px 16px -2px;
    box-shadow: 2px 2px 16px -2px;
    border-radius: 12px;
    position: absolute;
}
#frame {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>
    <div id="framewrap">
          <span style="color: #FFFFFF; font-size: small; font-style: normal; font-weight: 100;">Window 1</span>
          <img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/minimize_window.png" alt="" width="18" height="18" align="right"/>
          <iframe id="frame" src=""></iframe>
        </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> 
<script src="js/main.js"></script
</body>

＆＃13;

我的想法是我可以按下右侧的最小化按钮，它会将包装div的高度和宽度更改为90px的高度和256px的宽度。我需要在一个页面中同时打开多个iframes，可以根据需要单独移动，调整大小和最小化。任何帮助表示赞赏谢谢!!

Answer 1

为了对多个窗口进行扩展，我将一些基于ID的元素切换为基于类的元素。你还有几次jQuery，我简化了。

我认为这应该让你去。它基本上是容器上最小化类的简单切换。

// JavaScript Document
$(function() {
  "use strict";
  $(".framewrap").resizable().draggable();
  $(".framewrap .actionIcon").on("click", function() {
    $(this).closest(".framewrap").toggleClass("min");
  });
});

.body_padding {
  padding: 16px;
}

.framewrap {
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 28px;
  background-color: #277099;
  width: 512px;
  height: 90px;
  -webkit-box-shadow: 2px 2px 16px -2px;
  box-shadow: 2px 2px 16px -2px;
  border-radius: 12px;
  position: absolute;
}

.framewrap span {
  color: #FFFFFF;
  font-size: small;
  font-style: normal;
  font-weight: 100;
}

.framewrap .actionIcon {
  display: inline-block;
  float: right;
  height: 18px;
  width: 18px;
  background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/minimize_window.png);
  background-size: cover;
  background-position: center center;
}

.framewrap.min {
  height: 90px !important;
  width: 256px !important;
}

.framewrap.min .actionIcon {
  background-image: url(http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/maximize_window.png);
}

.frame {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<div>
  <div class="framewrap">
    <span>Window 1</span>
    <span class="actionIcon"></span>
    <iframe class="frame" src=""></iframe>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

使多个iframe像常规窗口一样拖动，调整大小和最小化

1 个答案: