複数のiframeをドラッグしてサイズを変更し、通常のウィンドウのように最小化する

私は複数のiframesが1つのWebページ（それぞれのサイトが異なるiframe）で開いている仕事のためにダッシュボードで作業しています。私はdivを持って、iframesをサイズ変更してドラッグすることができましたが、私の人生のために私は左上の画像を押すと最小限に抑えることができません。ここで私がこれまで持っているものです。複数のiframeをドラッグしてサイズを変更し、通常のウィンドウのように最小化する

// JavaScript Document 
 
$(function() {"use strict"; 
 
\t $("#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>

アイデアは、私は右側に最小化ボタンを押すことができるということです、そして、それは90pxの高さにラッパーdivの高さと幅を変更します幅は256pxである。 1つのページに複数のiframesを一度に開いて、個別に移動したり、サイズを変更したり、必要に応じて最小化したりする必要があります。どんな助けでも感謝しています。

出典

2016-07-13 Dilean Barroso

まずあなたは、いくつかのiframeを持っている必要がある場合は、IDを使用しないでください;）ちょっとジョンが、これは完全に働いた私のような独立して動作する複数のフレームを持つことができるよ –

これを複数のウィンドウで少し拡張するには、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>

出典

2016-07-13 12:50:53 JonSG

代わりにクラスを使用しますチャーム。今私がクリックしたフレームのzindexに変更する方法はありますか？ウィンドウの多くは不自然に重なっています –

複数のiframeをドラッグしてサイズを変更し、通常のウィンドウのように最小化する

答えて

関連する問題