可移动且重新调整大小的div,孩子们重新调整它的尺寸?

时间:2011-03-26 22:37:46

标签: jquery css html resizable

好的,所以我真的从CSS3开始制作了一个“我的电脑”窗口。我要完成它,而我想要做的就是移动它并使窗口重新调整大小。

有些子类只想在宽度上调整大小,有些子类想要在宽度和高度上重新调整大小。这似乎是一项艰巨的任务,我实际上更关心div的移动。我已经给了它几次,我只是不能让它工作!

有人可以帮助我吗?也许它的JFiddle工作?我很感激你们!

编辑:这是网站,抱歉!:

http://projects.beauaugust.co.uk/windows98/

查看来源,它就在那里!

4 个答案:

答案 0 :(得分:2)

您是否考虑过http://jqueryui.com/demos/resizable/http://jqueryui.com/demos/draggable/?我想你可以在这两个和一些自定义代码之间获得你想要的功能。

我只是在jfiddle上看了你的代码并把它放在:

$(function() {
    $( ".window" ).draggable().resizable();
});

非常有效,可以让它变得可拖动。它也调整到一定程度。为了使调整大小更好,最好是给窗口的子元素(如100%)而不是像素大小赋予相对大小。

我希望有所帮助。如果是,请标记为答案。

答案 1 :(得分:1)

您可以考虑使用Interface Elements with JQuery

以下是demos的列表。

您可能希望查看此one

Interface插件的其他内容可以帮助你像one一样(什么时候实现滚动)

但是要玩JQuery的界面插件。在我看来这非常有用。

答案 2 :(得分:0)

我和罗伯特在一起。我不确定CSS是否有能力使事物变得动态。在这种情况下,解决方案是Javascript或建议(更简单)jquery。

我可能会弄错,但我认为为了使javascript(可能还有jquery)准确指出你想要做什么,你需要使用'id'属性。

<div class="window" id="window_main">

然后,当您使用jquery函数时,可以将拖动质量应用于“window_main”。

希望有所帮助。

祝你好运!

答案 3 :(得分:0)

检查http://jsfiddle.net/Sc2Qm/1/

处的工作示例

目前可调整大小只会调整.window的大小,因为您的html和CSS已经布局了。