Реализовать различные макеты для (части) веб-страницы

Я хочу реализовать кодовую площадку. В настоящий момент я использую flex-box для определения положения различных панелей. Вот JSBin и его HTML часть:Реализовать различные макеты для (части) веб-страницы

<div class="flex-box"> 
    <div class="col" id="html-panel"> 
    <p>html</p> 
    </div> 
    <div class="handle"> 
    <div class="handle-inner"></div> 
    </div> 
    <div class="col" id="css-panel"> 
    <p>css</p> 
    </div> 
    <div class="handle"> 
    <div class="handle-inner"></div> 
    </div> 
    <div class="col" id="js-panel"> 
    <p>javascript</p> 
    </div> 
</div>

(чтобы сделать это площадка, я добавляю textarea внутри каждого panel (например, html-textarea в html-panel), и объединить содержание 3 прокручиваемым вернуть выход Игровая площадка реагирует на каждое изменение содержания в текстовых областях: я предпочитаю использовать контроллер AngularJS, а не обработчики событий JQuery.)

Теперь мне интересно, как реализовать разные макеты, не повторяя слишком много кода , Как Liveweave предлагающей 4 раскладок (см правый нижний угол) для пользователей, я хочу предложить отображения, например

горизонтально 3 панели, как то, что выглядит как на данный момент
вертикально 3 панелей
1 на слева и 2 на правой
2 слева и 1 на правой

Так что лучший подход/структура/инструмент для реализации этого?

Чтобы поделиться максимальным, следует ли это понимать с 1 общим .html, 1 общим .js и 4 .css файлами? Тогда нам просто нужно выбрать другой файл .css для разных макетов?

источник

2016-12-26 Anonymous

Почему бы не использовать одностраничную инфраструктуру приложения, такую как Угловое или Реагирование? – Baruch

Вот почему я добавил тэг 'angularjs' ... так что' angularjs' мог это сделать? Где я могу получить дополнительные инструкции, чтобы просто реализовать эти разные представления? –

Угловая будет упрощать структуру только для использования 1 html-файла. Теперь, что касается 1 js-файла, вам нужно собрать код (GulpJs, GruntJs, Webpack - хорошие инструменты для этого). Я нахожусь на своем мобильном телефоне, поэтому я не могу написать хороший ответ, но вы должны обязательно попробовать его. – Baruch

Основываясь на некоторых исследованиях, это, безусловно, может быть сделано с помощью вложенных представлений/UI-Router/AngularUI/Angular JS. И мы сможем определить один html-файл для каждого макета.

Но я сначала пойду за тем, что предложил @DCR: только JS и CSS. Поскольку это проще, также потому, что JS позволяет нам вводить html, например, на innerHTML. Поэтому я мог бы ввести 4 html строки для 4 макетов. Внутри строк из 4 html могут быть одинаковые имена классов, которые позволяют частично использовать стилизацию в CSS и функции (например, перетаскивание сплиттеров) в JS.

источник

2016-12-27 13:56:42

Реализовать различные макеты для (части) веб-страницы

ответ

Смежные вопросы