- ベストアンサー
jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズする方法
- jquery ui.resizable を使用してdivをリサイズする際、内部のdivも同時にリサイズする方法がわかりません。
- proportionallyResizeを使用してみましたが、うまくいきませんでした。
- 他の方法でも構いませんので、divのリサイズと同時に内部のdivもリサイズする方法を教えてください。
- rqg2010
- お礼率77% (283/364)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>>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> こちらで検証に使ったソースです。一度試して下さい。
その他の回答 (1)
- my--
- ベストアンサー率89% (91/102)
demo(synchronous-resize.html)にalsoResizeを使った例があります。 $('#out').resizable({ alsoResize: '#inner' }); proportionallyResizeはドキュメントに載ってないですね。旧バージョンでしょうか？
お礼
my--さん、レスありがとうございます。 ＞$('#out').resizable({ alsoResize: '#inner' }); 早速やってみましたが、ダメでした。 ＞proportionallyResizeはドキュメントに載ってないですね。 http://stacktrace.jp/jquery/ui/interaction/resizable.html で、調べたオプションです。 「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 を使用しました。 古いものではないと思うのですが。 どうも貴重なアドバイスをありがとうございました。
お礼
my--さん、早速ご解答ありがとうございます。 ご丁寧にスクリプトまでありがとうございます。 動きました。 UIのファイルは、私が動かないと言った物をそのまま使って my--さんより教えていただいたスクリプトでばっちり動きました。 私の基のスクリプトが何故動かないのか、これから調べてみます。 jquery.ui.resizable.js の他に jquery.ui.draggable.js も組み込んでいますし、 動かないと言って申し出たスクリプトは、他にもgoogoleMapを組み込んでいたり。 その他かなり色々と操作しています。 動くことは確認できたので、一つずつ切り出ししていきます。 どうもありがとうございました。