Создание и настройка разделимой панели в HTML с CSS/JS
Быстрый ответ
Чтобы создать разделённое окно в HTML, лучше всего использовать CSS Flexbox. Примените display: flex;
к стилю контейнера и flex: 1;
к каждой из секций, чтобы равномерно распределились по ширине:
<div style="display: flex; height: 100vh;">
<div style="flex: 1; background: #add8e6;">Левая половина</div>
<div style="flex: 1; background: #90ee90;">Правая половина</div>
</div>
Этот код создаёт две панели одинакового размера, которые без проблем обеспечивают заполнение всей высоты браузера и автоматически подстраиваются под его размеры.
Flexbox: элементы для изменения размеров панелей
Контроль за размером панелей cтороны пользователя
Панели можно сделать изменяемыми, применяв свойство resize
из CSS:
.resizable {
overflow: auto;
resize: horizontal;
width: 50%;
min-width: 100px; /* Минимальный размер предотвращает слишком малые панели */
}
Чтобы обеспечить удобное взаимодействие с изменяемыми элементами, задайте user-select:none
для тех элементов, что будут перетаскиваться:
.draggable-area {
cursor: col-resize;
user-select: none;
}
Расширенное изменение размеров с использованием JavaScript
JavaScript предоставляет множество продвинутых возможностей для изменения размеров панелей, как например, с использованием обработчиков событий. Не забывайте применять механизмы, которые предотвращают уменьшение размера элементов до недопустимого значения:
const dragElement = (element) => {
element.onmousedown = dragMouseDown;
// ... (Составим JavaScript код!)
};
Сеточные структуры: шаг вперёд
Для создания сложной структуры воспользуйтесь CSS Grid, он позволит вам более точно контролировать разделение на колонки и строки:
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Распределим пространство поровну */
}
Акцент на стилизацию: эффектное разделение
Улучшите восприятие визуальных разделителей, применив градиенты или фоновые изображения. Установите вынужденные размеры min-width
, чтобы панели имели определённый размер минимум. Показательные индикаторы cursor: col-resize
или cursor: row-resize
помогут понять, что эти элементы интерфейса можно изменить.
Работа с горизонтальными и вертикальными разделителями
Воспользуйтесь offsetLeft
и offsetTop
для точного управления перемещением разделителя и динамично адаптируйте размеры панелей с использованием обработчиков событий мыши.
Проверка на совместимость доступности
Кроме использования библиотеки Simpledrag, как замены для drag-and-drop, проверяйте совместимость с различными браузерами и типами устройств. Уделите особое внимание ограничениям на изменение размеров при различных экранах.
Визуализация
Представьте дом с двуми разделёнными комнатами:
🏠: [🛋️ Гостиная | 🍳 Кухня]
Пример разделённого окна в HTML:
<div style="display: flex;">
<div style="flex: 1;">🛋️</div> <!-- Гостиная: зона отдыха -->
<div style="flex: 1;">🍳</div> <!-- Кухня: место кулинарного мастерства -->
</div>
Схоже с дверью-аккордеоном, которая меняет размер комнат:
🏠: [🛋️🚪🛰️ Гостиная | 🚪🍳🥘 Кухня]
Макеты в HTML могут быть настолько же универсальными, как хорошо спланированный дизайн интерьера.
Погружение в Split.js: Краткое руководство
Первые шаги
Split.js прекрасно подходит для создания изменяемых панелей, он совместим с устаревшими браузерами. Он работает без jQuery и позволяет задать размеры панелей:
Split(['#left', '#right'], {
sizes: [50, 50],
minSize: 100,
gutterSize: 10,
cursor: 'col-resize',
});
Как сочетать Flexbox и CSS Grid с Split.js
Используйте Flexbox или CSS Grid в сочетании с Split.js при разработке динамичных и адаптивных макетов. Ключом к успешному дизайну является задание изменяемых процентных размеров панелей.
Обратите внимание на опыт пользователя
При работе с перетаскиваемыми или изменяемыми панелями следите за их целостностью:
- Установите ограничения размеров с помощью min-width или min-height. (Не позволяйте панелям "исчезать"!)
- Адаптируйте размеры панелей отзывчиво, применяя события resize при изменении размеров окна браузера.
Полезные материалы
- Основы работы с сеточными макетами – Руководство по CSS Grid от MDN.
- Всё, что вам нужно знать о Flexbox – Подробное руководство по Flexbox на сайте CSS-Tricks.
- Как создать макет с разделением экрана – Учебник W3Schools, посвященный созданию разделённого экрана с использованием HTML и CSS.
- GitHub – angular/flex-layout – Исходный код и документация Angular Flex Layout.
- Создание пользовательских директив | Vue.js – Руководство по созданию директивов в Vue.js для реализации разделенного просмотра.