javascript - 如何拖动带有标题的 iframe 以及最小化和最大化选项
问题描述
我有一个带有标题“聊天”的 iframe 如何拖动带有标题的 iframe 以及最小化和最大化选项,或者如何拖动整个 iframe 而不是边框。
解决方案
resizable()
和draggable()
jquery 将帮助您这样做。
希望这篇文章可以帮助你。
$(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: #121101;
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;
cursor: pointer;
}
.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>Chat</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>
推荐阅读
- spring - Swagger + spring boot + jwt + 如何禁用特定 API 的授权按钮
- html - 如何将 div 颜色更改为备用颜色?
- ios - 在选项卡视图之一中切换 TabView 中的选项卡“重置”matchedGeometryEffect()
- c++ - 如何使用 struct 读取带逗号的文件?
- spring-boot - 执行器如何渲染其端点?
- lucene - Blazegraph - 全文搜索分析器配置
- firebase - Iterate through all users - firestore
- ruby-on-rails - Rails 查询使用对象的属性
- f# - 使用 MapHub 返回的 UseEnpoints 需要单位,但类型为 HubEndpointConversationBuilder
- amazon-web-services - 使用 AWS CLI lambda 调用时,有没有办法传递环境变量?