jQuery UI 可调整大小也可反向调整大小
如何使 jQuery UI 可调整大小也可反向调整大小。
假设在html中有两个div标签,如果我向上调整大小意味着其他东西必须向下调整大小
<script>
$(function() {
$("#resizable").resizable({alsoResize: ".myiframe"});
});
</script>
<div id = "resizable">
This is the resizable content...
</div>
<div class="myframe">
This must resize in reverse direction...
</div>
我尝试过但没有用请指导解决这个问题
How to make the jQuery UI Resizable alsoResize reverse direction.
suppose in the html there is two div tag is there, if i resize in upward means the other thing has to resize downward
<script>
$(function() {
$("#resizable").resizable({alsoResize: ".myiframe"});
});
</script>
<div id = "resizable">
This is the resizable content...
</div>
<div class="myframe">
This must resize in reverse direction...
</div>
i tried it but of no use please guide to solve this
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
通过修改 jQuery 用于实现
alsoResize
选项的代码,我们可以制作自己的alsoResizeReverse
选项。然后我们可以简单地使用它,如下所示:原始
alsoResize
选项的结构已在 jQuery UI 的各个版本中发生变化,我的原始代码在较新的版本中不起作用。我将给出在版本 1.8.1 和 1.11.4 中添加此功能的代码。只需要更改一些内容,例如将
alsoResize
明显重命名为alsoResizeReverse
并减去delta
而不是添加它(是什么使调整大小反转)。原始的alsoResize
代码从 jQuery UI 版本 1.8.1 和 版本 1.11.4。您可以在此处查看所需的一些更改。要添加
alsoResizeReverse
功能,请将其添加到您的 javascript 中(这应该放在 document.ready() 之外):对于较新版本的 jQuery UI(示例基于 v1.11.4):
对于旧 版本版本(基于 v1.8.1——我原来的答案):
这是一个演示: http://jsfiddle.net/WpgzZ/
By modifying the code jQuery uses to implement the
alsoResize
option, we can make our ownalsoResizeReverse
option. Then we can simply use this as follows:The structure of the original
alsoResize
option has been changed over the various versions of jQuery UI and my original code does not work in the newer versions. I'll give the code for adding this functionality in version 1.8.1 and 1.11.4.Only a few things had to be changed, such as the obvious renaming
alsoResize
toalsoResizeReverse
and subtracting thedelta
instead of adding it (what makes the resize reversed). The originalalsoResize
code starts on line 2200 of version 1.8.1 of jQuery UI and line 7922 of version 1.11.4. You can see the few changes needed here.To add the
alsoResizeReverse
functionality, add this to your javascript (This should be put outside of document.ready()):For newer versions of jQuery UI (example is based on v1.11.4):
For older version (based on v1.8.1 -- my original answer):
Here's a demo: http://jsfiddle.net/WpgzZ/
我在获取“Simen Echholt”代码与 jQuery 1.9.1/jquery-ui (1.10.2) 一起使用时遇到问题,但当我交换“$(this).data("可调整大小")" 与 "$(this).data("ui-ressized")"。
I had a problem getting the "Simen Echholt"-code to work with jQuery 1.9.1/jquery-ui (1.10.2), but it worked when I exchanged "$(this).data("resizable")" with "$(this).data("ui-resizable")".
更新到 jQuery 2.1.1 和 jQuery UI 1.11.2。
[http://jsfiddle.net/WpgzZ/1136/][1]
Update to jQuery 2.1.1 and jQuery UI 1.11.2.
[http://jsfiddle.net/WpgzZ/1136/][1]
这也应该可以在相反的方向上调整另一个 div 的大小。
This should also work to resize another div in the opposite direction.
即使Simen发布的代码运行得很好,
这是我的代码,用于垂直调整两个 div 的大小(并且效果很好)
Even if the code posted by Simen works very well,
here is my code to resize two div vertically (and it works fine)
改编自玛格特和约瑟夫·贝克的想法——我认为这是一个更好的方法。此方法不需要任何 Jquery 库 hack 或插件即可将 div 分成两个窗格。只需在可调整大小的“resize”事件中添加一个函数来偏移宽度:
这是完整的 JS fiddle。
Adapted the ideas from marg t and Joseph Baker - which I think is a far better approach. This method doesn't require any Jquery library hack or plugin to split a div into two panes. Just add a function to offset width in the resizable 'resize' event:
Here's the complete JS fiddle.
更新为 jquery-ui 1.10.4
Updated for jquery-ui 1.10.4