如何使用可调整大小的jQuery在iFrame中调整元素的大小？
|
我目前参与的一个项目有问题。这是我的情况。我正在动态构建网页并将其呈现到iframe，并且希望向用户提供在iframe中调整该呈现页面内的div元素大小的功能。要设置上下文，请考虑以下片段：
主机页面：
<html>
<head></head>
<body>
<div id=\"container\">
<iframe id=\"site\" src=\"proxy.php\" style=\"width:100%;height:100%;\"></iframe>
</div>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js\"></script>
<script src=\"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js\"></script>
<script src=\"http://jqueryui.com/ui/jquery.ui.resizable.js\"></script>
<script>
$(\"#site\").load(function() {
$(\"#site\").contents().find(\"#test-resize\").resizable({
create: function(event, ui) {
console.log(\"Create\");
},
start: function(event, ui) {
console.log(\"Start\");
},
resize: function(event, ui) {
console.log(\"Resize\");
}
});
});
</script>
</body>
</html>
<html>
<head>
<style>
body { margin: 0; padding: 0; }
#container { width: 960px;margin: auto;border: 1px solid #999; }
header { display: block;background: #dedede;padding: 5px; }
footer { display: block;padding: 10px;background: #555;color: #eee; }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
</style>
</head>
<body>
<div id=\"container\">
<div id=\"main\">
<header>
<div><h1>Header</h1></div>
</header>
</div>
<div id=\"body\">
<h2>Body</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Mauris et sapien ligula, sit amet tincidunt ligula.</p>
</div>
<footer>
<!-- I want the user to be able to resize this div -->
<div id=\"test-resize\">Footer Div</div>
</footer>
</div>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js\"></script>
<script src=\"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js\"></script>
<script src=\"http://jqueryui.com/ui/jquery.ui.resizable.js\"></script>
</body>
</html>
没有找到相关结果
已邀请:
2 个回复
靛新比比催
$(document) .bind(\'mousemove.\'+this.widgetName, this._mouseMoveDelegate) .bind(\'mouseup.\'+this.widgetName, this._mouseUpDelegate);$($(this.element).get(0).ownerDocument) .bind(\'mousemove.\'+this.widgetName, this._mouseMoveDelegate) .bind(\'mouseup.\'+this.widgetName, this._mouseUpDelegate);$(document) .unbind(\'mousemove.\'+this.widgetName, this._mouseMoveDelegate) .unbind(\'mouseup.\'+this.widgetName, this._mouseUpDelegate);$($(this.element).get(0).ownerDocument) .unbind(\'mousemove.\'+this.widgetName, this._mouseMoveDelegate) .unbind(\'mouseup.\'+this.widgetName, this._mouseUpDelegate);// don\'t let more than one widget handle mouseStart if(mouseHandled) {return};徘廷