我有这个代码,它工作正常:
@H_301_17@解决方法
头
<script> $(document).ready(function() { $("#test").resizable({minHeight: 50,minWidth: 50}); }); </script>
身体
<div id="test" style="border: .1em solid black;"> </div>
但是,当我将“div”改为“iframe”时,我无法调整大小.
身体
<iframe id="test" style="border: .1em solid black;"> </iframe>
发现redsquare的演示有点犹豫不决,一次移动鼠标超过几个像素.我已经应用了一些修改,帮助调整大小更加顺利:
<html> <head> <style type="text/css"> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } .ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; } </style> <script type="text/javascript"> $(function() { $("#resizable").resizable({ helper: "ui-resizable-helper" }); }); </script> </head> <body> <div class="demo"> <div id="resizable" class="ui-widget-content"> <iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" /> </div> <div> </body> </html>
调整大小的奇怪性似乎发生了,因为mousemove事件不会从iframe中冒出来.只要浏览器可以跟上mousemove事件,在处理程序中使用调整大小的处理程序和大的边框,最小化iframe引起的影响.