Полный макет страницы с изменяемыми размерами с использованием jQuery UI

Я пытаюсь создать общий макет 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?

Ответы

Ответ 1

Есть более подходящие плагины, основанные на jQuery, чтобы получить то, что вы хотите.

ВАРИАНТ 1:

Я лично использовал в моем проекте UI Layout.

Это почти старый проект (6 лет назад), но в середине 2014 года его разработка возобновляется, даже если после сентября 2014 года больше нет информации.

На самом деле последняя стабильная версия - 1.4.3, выпущенная в сентябре 14 года. Новый сайт:

https://github.com/allpro/layout/

ВАРИАНТ 2:

Если вам нужно более полное решение, вы можете подумать о jEasy UI, который представляет собой законченную структуру, которая

[...] помогает вам легко создавать веб-страницы

Это своего рода замена пользовательского интерфейса jQuery, с некоторыми похожими виджетами (диалоги, аккордеоны,...) и чем-то эксклюзивным, таким как модуль Layout, уже связанный в моем ответе.

ВАРИАНТ 3: Аналогом предыдущего решения является Zino UI, еще одна полная UI-инфраструктура, в которой есть специальный компонент, выделенный для " Split Layout "

ВАРИАНТ 4: jQWidgets - еще одна библиотека, с аналогичными целями предыдущих, и, в частности, может быть интересным модулем jqxSplitter.

Связанная альтернатива (аналог):

Существует также другая альтернатива, которая позволяет разделять панели в окнах браузера, но в дополнение позволяет перетаскивать отдельные панели, создавая разные вкладки и параллельные подокна.

Это называется Golden Layout. Он отличается от предыдущих, по многим причинам также более мощный, но, безусловно, на данный момент он не поддерживает Touch...

Ответ 2

Я нашел тот, который кажется приемлемым для этого требования, если вы ищете что-то более минималистичное по сравнению с jEasy UI.:)

http://w2ui.com/web/demo/layout
И это не мертвый проект; Кажется, все еще активен в github https://github.com/vitmalina/w2ui/, что приятно.

Я попробую. Просто хотел поделиться этим, чтобы сэкономить время поиска, надеюсь.

Ответ 3

Было несколько небольших проблем, вызвавших поведение, которое вам не нравится.

Они были исправлены в этом Fiddle

Проблемы были:

При изменении размера влево, правая также изменяется (что не должно)

Исправлено установкой начальной ширины (в процентах)

При изменении размера влево до полной ширины содержимое центра скрыто в правой части

Не удалось воспроизвести

При изменении размера Вправо обертка (фуксия) частично видимое центральное дно изменяется в верхней части верхней части центра, не через него собственный топ

Исправлено установкой слева на 0 во время изменения размера.

$(".right.pane").resizable({
    handles: "e, w",
    resize: function(event, ui) {
      ui.position.left = 0;
    }
  });

Центральное дно изменяется в верхней части вершины центра, а не поверх него

Это связано с тем, что пользовательский интерфейс JQuery Resizable использует относительное позиционирование, которое не работает в ячейках таблицы. Исправлено добавлением содержимого div, который обрабатывает размер.

<div class="top pane"> 
   <div class="top-content">Center top</div>
</div>

Ответ 4

Я использую этот плагин с jquery

http://www.bramstein.com/projects/jlayout/jquery-plugin.html

Ответ 5

Я придумал ответ на это сам, хотя в итоге мне потребовался год развития! Результатом является современный виджет компоновки панели отзывчивый, построенный с использованием jQuery и виджета jQuery UI factory.

http://www.silvercore.co.uk/widgets/propanellayout/

Лучшим решением на тот момент, когда задавался вопрос, был, несомненно, jQuery UI.Layout, но со временем этот проект застопорился, и плагин не работает с jQuery 2. Несмотря на то, что код выпущен на GitHub, его судьба неизвестна, что делает его использование в качестве основы долгосрочного проекта сомнительным.

Несколько других опубликованных здесь ссылок уже мертвы, и если вы не хотите или нуждаетесь в полной структуре приложений, ваши варианты ограничены.

Ответ 6

Вы можете использовать Gridstack Он прост в использовании и силен.

Ответ 7

ОК, надеюсь, мое последнее редактирование. Прошел через кучу этих, и в итоге появился макет интерфейса jQuery.

Goldenlayout хорош, но вы должны фактически добавить html в каждую панель через javascript. Если у вас есть все ваши вещи в компонентах реагирования, я думаю, это может быть хорошо, но не для моего использования.

jQuery UI-макет, похоже, довольно надежный и был просто обновлен в 2014 году.