jquery ui.resizable 使い方

解決済

質問者：rqg2010
質問日時：2010/12/12 06:11
回答数：2件

jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズしたいのですができません。
<div id="out">
<div id="inner">
</div>
</div>
で、
http://stacktrace.jp/jquery/ui/interaction/resiz …を参考にして、
$('#out').resizable({proportionallyResize:["#inner"]});
としてみたのですが、#outは、リサイズできますが、#innerを同時にリサイズできません。

組み込んだjs、cssは、
http://jqueryui.com/download
よりDLした、jquery-jquery-ui-1.8.7-0-g12bea93.zipに納められていた
jquery.dimensions.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.resizable.js
jquery.ui.draggable.js
及び
jquery.ui.resizable.css
を、記載の順に組み込みました。

行いたいことは、divをリサイズしたとき、その内部のdivも同時にリサイズすることです。
proportionallyResizeを使う方法でなくても構いません。
方法のわかる方なにとぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： my--
回答日時：2010/12/12 11:06

>>No.1お礼

む～ん、ダメですか。同じファイル構成のはずなんですが。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Synchronous resize</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#out { width: 150px; height: 150px; padding: 0.5em; border:3px dotted black; }
#inner { height: 150px; border:1px dotted black; }
</style>
<script>
$(function() {
$('#out').resizable({ alsoResize: '#inner' });
});
</script>
</head>
<body>
<div id="out">
<div id="inner">inner</div>
</div>
</div>
</body>
</html>

こちらで検証に使ったソースです。一度試して下さい。

- 0
- 件

通報する

この回答へのお礼

my--さん、早速ご解答ありがとうございます。
ご丁寧にスクリプトまでありがとうございます。

動きました。
UIのファイルは、私が動かないと言った物をそのまま使って
my--さんより教えていただいたスクリプトでばっちり動きました。

私の基のスクリプトが何故動かないのか、これから調べてみます。
jquery.ui.resizable.js
の他に
jquery.ui.draggable.js
も組み込んでいますし、
動かないと言って申し出たスクリプトは、他にもgoogoleMapを組み込んでいたり。
その他かなり色々と操作しています。
動くことは確認できたので、一つずつ切り出ししていきます。

どうもありがとうございました。

通報する

お礼日時：2010/12/12 11:45

No.1

回答者： my--
回答日時：2010/12/12 09:32

demo(synchronous-resize.html)にalsoResizeを使った例があります。

$('#out').resizable({ alsoResize: '#inner' });

proportionallyResizeはドキュメントに載ってないですね。旧バージョンでしょうか？

- 0
- 件

通報する

この回答へのお礼

my--さん、レスありがとうございます。
＞$('#out').resizable({ alsoResize: '#inner' });
早速やってみましたが、ダメでした。
＞proportionallyResizeはドキュメントに載ってないですね。
http://stacktrace.jp/jquery/ui/interaction/resiz …
で、調べたオプションです。
「jQuery UI API 1.8.4 日本語リファレンス」ということですので新しいものと思いますが。

そして、jquery.uiは、
http://jqueryui.com/download
から
jquery-ui-1.8.7.custom.zip
をDLして
development-bundle\uiにある
jquery.ui.resizable.js
を使用しました。
古いものではないと思うのですが。

どうも貴重なアドバイスをありがとうございました。