Изменение размера не работает, можно считать ошибкой. ( Подсказка может быть файл один?). Но это, конечно, спорно.
Для элементов, которые не поддерживают дочерние узлы, в плагине есть специальная проверка
if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {
если это совпадает, плагин автоматически генерирует div для вас.
Если вы добавите iframe в этот список
if(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img|iframe/i)) {
Образец будет работать так, как вы его предоставили.
Но если iframe принимает детей, проблема в том, что вы выглядите ими только тогда, когда ваш браузер не поддерживает встроенные фреймы. Вы можете проверить следующее, если ваш браузер позволяет отключить поддержку iframe (например, Opera )
например. когда ваш браузер не понимает фреймы, вы увидите изменяемый размер элемента, который говорит "привет"
#iframeid { background-color:green; height:200px; width:400px}
$("#helloiframe").resizable();
<iframe id="iframeid" src="http://google.com" ><p>hello</p></iframe>
Но, как большинство браузеров понимают iframe, вы не видите детей iframe. Дескрипторы, используемые jquery resizable, - это div, который добавляется к элементу, поэтому вы не видите дескрипторы.
В конце я делаю вывод, что плагин изменяемого размера в особом случае iframe ведет себя правильно, и вам просто нужно заключить свой iframe в div.
Надеюсь, я был чист.
Див показал мне изменяемые размеры элементов управления. Только iframe не показывал элементы управления.
У меня работает следующее:
- завернутый iframe в div
- сделал div изменяемого размера
- div-обертка и начальный кадр iframe одинаковой ширины и высоты
- передать идентификатор iframe в качестве опции на
resizable() {alsoResize: '#iframeid'}
Выезд http://jsbin.com/arato/ или следующий.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
#test { background-color: red; height: 200px; width: 400px; }
#hello { background-color: blue; height: 200px; width: 400px; }
#helloiframe { height: 200px; width: 400px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#test").resizable();
$("#hello").resizable({ alsoResize: '#helloiframe' });
});
</script>
</head>
<body>
<div id="test">Hello from JS Bin</div>
<div id="hello">
<iframe id="helloiframe" src="http://google.com"></iframe>
</div>
</body>
</html>