На jQuery в интернете сложно найти простой и лёгкий плагин для создания сплиттера. Есть различные варианты, либо не работающие, либо требующие подключения таких монстров как jqwidgets и jQuery UI.
Потратив много времени на поиски чего-то вроде jquery splitter, я решил создать такой плагин самостоятельно. И это заняло всего пару часов времени.
Постараюсь сэкономить своё и ваше время, поэтому кратко опишу специфику данного функционала:
- Основную вёрстку можно делать обычной таблицей, а можно сделать блочной вёрсткой, используя табличной отображение (display:table, display:table-row, display:table-cell). Несмотря на то, что даже я уже много лет не пользуюсь табличной вёрсткой, в данном случае она более чем уместна.
- В таблице три колонки, средняя используется как сплиттер. От её ширины в конечном итоге ничего не зависит, поэтому можно сделать узкую или широкую.
- Ширина меняется в пикселях, не в процентах, и изначально можно задать произвольную ширину (задаётся только для левой колонки, ширина правой - автоматическая).
- Общий принцип: в момент нажатия мышкой на сплиттере (событие mousedown) включаем флаг dragging, который означает процесс перемещения сплиттера (а также определяем смещение в самом сплиттере - на каком расстоянии от левого края мы нажали). А в событии mousemove для элемента html (именно для html, т.к. при перемещении курсор может быть в любой области страницы, даже за пределами таблицы) мы определяем x-координату курсора и задаём ширину левой колонки. В момент отпускания кнопки (опять-таки на элементе html) возвращает dragging в false. Вот и всё.
- Нюансы по размерам: координату курсора мы получаем относительно страницы, поэтому нам нужно знать позицию таблицы на странице, её определяем через $(table).offset().left. Ширина левой колонки определяется как позиция курсора минус позиция таблицы минус смещение в сплиттере. Смещение в сплиттере необходимо для того, чтобы при работе он не дёргался на левый край. Ширина правой колонки определяется как ширина таблицы минус ширина левой колонки, минус ширина сплиттера. Собственно, ширину правой колонки узнаём только чтобы ограничить её минимальный размер (он задаётся через параметр minWidth для jQuery-плагина).
- Начальный размер задаётся параметром startWidth (применяется только если это число больше нуля).
Скачать пример (zip, 1.57 КБ)
Открыть пример (html, 4.58 КБ)