Я пытаюсь создать общий макет webapp. Приложение полноэкранное и имеет фиксированный заголовок и три столбца/панели. Центральная панель состоит из двух строк:
Панели должны быть масштабируемы путем перетаскивания краев панели с помощью мыши (см. стрелки на изображении выше).
Отдельные панели должны иметь вертикальные полосы прокрутки в случае переполнения содержимого, то есть глобальной полосы прокрутки окна браузера.
Используя jQuery и jQuery UI Resizable, я создал этот (частично работает) JSFiddle.
HTML:
<div class="header">
Fixed header
</div>
<div class="wrapper">
<div class="inner-wrapper">
<div class="left pane">Left</div>
<div class="center pane">
<div class="inner">
<div class="top">Center top</div>
<div class="bottom">Center bottom</div>
</div>
</div>
<div class="right pane">Right</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
background-color: moccasin;
}
.wrapper {
position:absolute;
top: 21px;
right: 0;
bottom: 0;
left: 0;
background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner {
display: table;
width: 100%;
height: 100%;
}
.pane {
display: table-cell;
}
.left.pane {
background-color: olivedrab;
}
.center.pane {
background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
display: table-row;
}
.center.pane .inner .top {
background-color: lightcoral;
}
.center.pane .inner .bottom {
background-color: orange;
height: 100%;
width: 100%;
}
.right.pane {
background-color: #999;
}
JavaScript:
$(function () {
$(".left.pane").resizable({
handles: "e, w"
});
$(".right.pane").resizable({
handles: "e, w"
});
$(".center.pane .inner .bottom").resizable({
handles: "n, s"
});
});
У него есть несколько вопросов, в том числе:
- При изменении размера влево, правая также изменяется (что не должно)
- При изменении размера влево до полной ширины содержимое центра скрыто в правой части
- При изменении размера справа обертка (фуксия) частично видима
- Центральное дно изменяется в верхней части верхней части центра, а не поверх него.
Я знаю плагин jQuery Layout, но, насколько я могу судить, он не предлагает полностью макет, который мне нужен. Кроме того, я хочу сохранить его максимально простым.
Кроме того, я попробовал плагин Split Split, но не смог заставить его работать.
Мой вопрос:
Любые предложения по созданию макета, как в изображении из jQuery UI Resizable, и что у меня есть в JSFiddle?
