使多个iframe像常规窗口一样拖动，调整大小并最小化 [英] Make multiple iframes drag, resize and minimize like a regular window
问题描述
我正在一个Dashboard上工作，在一个网页上有多个iframes打开，每个iframe都有一个不同的站点.我已经能够握住iframes来调整其大小并拖动它，但是当我按下左上角的图像时，我无法使它最小化.这是我到目前为止的内容:
I'm working on a Dashboard for work where I have multiple iframes open on one web page, each iframe having a different site. I have been able to get the div's holding the iframes to resize and drag, but I cant for the life of me get it to minimize when I press the top left image. Here's what I have so far:
// JavaScript Document
$(function () {"use strict";
$("#framewrap") .resizable() .draggable();
});
.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;
}
<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>
这个想法是，我可以按右边的最小化按钮，它将包装器div的高度和宽度更改为90px的高度和256px的宽度.我需要在一个页面中一次打开多个iframes，以便可以根据需要分别移动，调整大小和最小化.任何帮助表示赞赏，谢谢！！！
The idea is that I can press the minimize button on the right, and it changes the height and width of the wrapper div to a height of 90px and a width of 256px. I'd need to have multiple iframes open at once in one page that can individually move, resize, and minimize as needed. Any help is appreciated Thanks!!
推荐答案
为了将其扩展到多个窗口，我将一些基于ID的元素切换为基于类的元素.您还让jQuery包含了几次，我对此做了简化.
To extend this a bit for multiple windows, I switched a few of your ID based elements to class based elements. You also had jQuery included a few times and I simplified that.
我认为这应该可以帮助您前进.基本上，这是在容器上最小化类的简单切换.
I think this should get you going. It is basically a simple toggle of a minimize class on your container.
// 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像常规窗口一样拖动，调整大小并最小化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
