jQuery 如何制作可调整大小的面板？

How to make Resizable Panels?

提问by TheExit

I need to build a page that looks like Mac Mail or an Outlook Inbox. where the one page has a top panel and a bottom panel, and there is a divider in between that you can use to re-size, to either make a panel higher or shorter.

我需要构建一个看起来像 Mac 邮件或 Outlook 收件箱的页面。其中一页有一个顶部面板和一个底部面板，中间有一个分隔线，您可以使用它来调整大小，使面板更高或更短。

What's the standard jQuery/CSS technique for accomplishing this? I've never done this before so I am interested in your suggestions or any surprises that you might have encountered before.

实现此目的的标准 jQuery/CSS 技术是什么？我以前从未这样做过，所以我对您的建议或您以前可能遇到的任何惊喜感兴趣。

采纳答案by tucaz

jQuery UI offers this as a plugin. Very simple and it really works well. I always use it. Here is the link with instructions:

jQuery UI 将此作为插件提供。非常简单，而且效果很好。我总是使用它。这是带有说明的链接：

http://docs.jquery.com/UI/Resizable

http://docs.jquery.com/UI/Resizable

回答by Brandon

There are a few jQuery plugins that can do something like this. I think this jQuery Splitterplugin is what you are looking for though.

有一些 jQuery 插件可以做这样的事情。我认为这个jQuery Splitter插件是你正在寻找的。

回答by clifgriffin

I believe something like this will serve your needs: http://w-shadow.com/blog/2008/10/23/javascript-splitters-and-resizable-panels/

我相信这样的事情会满足您的需求：http: //w-shadow.com/blog/2008/10/23/javascript-splitters-and-resizable-panels/

There are several plugins referenced that mimic that UI.

引用了几个模仿该 UI 的插件。