Задать вопрос Связаться с нами
  • Главная
  • Услуги
    • Исправление ошибок
    • Доработка сайтов
    • Обслуживание сайтов
    • Техподдержка сайтов
    • Веб-разработка
    • Интернет-магазины
  • Модули
    • Антирутин
    • SEO - мастер
    • SMS-уведомления
    • Импорт данных
    • Простые отзывы
    • Утилиты от «Webdebug»
    • SMS-сообщения (Lite)

    • Все наши модули

    • Все модули Битрикс:Marketplace
  • Акции
  • Поддержка
  • Блог
  • О нас
    • Отзывы
    • Новости
    • Реквизиты

    • Контакты
  • Главная
  • Услуги
    • Исправление ошибок
    • Доработка сайтов
    • Обслуживание сайтов
    • Техподдержка сайтов
    • Веб-разработка
    • Интернет-магазины
  • Модули
    • Антирутин
    • SEO - мастер
    • SMS-уведомления
    • Импорт данных
    • Простые отзывы
    • Утилиты от «Webdebug»
    • SMS-сообщения (Lite)

    • Все наши модули

    • Все модули Битрикс:Marketplace
  • Акции
  • Поддержка
  • Блог
  • О нас
    • Отзывы
    • Новости
    • Реквизиты

    • Контакты
Главная
Блог
HTML, CSS, JS, jQuery
Splitter на jQuery

Splitter на jQuery

На jQuery в интернете сложно найти простой и лёгкий плагин для создания сплиттера. Есть различные варианты, либо не работающие, либо требующие подключения таких монстров как jqwidgets и jQuery UI.

Потратив много времени на поиски чего-то вроде jquery splitter, я решил создать такой плагин самостоятельно. И это заняло всего пару часов времени.

Постараюсь сэкономить своё и ваше время, поэтому кратко опишу специфику данного функционала:

  1. Основную вёрстку можно делать обычной таблицей, а можно сделать блочной вёрсткой, используя табличной отображение (display:table, display:table-row, display:table-cell). Несмотря на то, что даже я уже много лет не пользуюсь табличной вёрсткой, в данном случае она более чем уместна.
  2. В таблице три колонки, средняя используется как сплиттер. От её ширины в конечном итоге ничего не зависит, поэтому можно сделать узкую или широкую.
  3. Ширина меняется в пикселях, не в процентах, и изначально можно задать произвольную ширину (задаётся только для левой колонки, ширина правой - автоматическая).
  4. Общий принцип: в момент нажатия мышкой на сплиттере (событие mousedown) включаем флаг dragging, который означает процесс перемещения сплиттера (а также определяем смещение в самом сплиттере - на каком расстоянии от левого края мы нажали). А в событии mousemove для элемента html (именно для html, т.к. при перемещении курсор может быть в любой области страницы, даже за пределами таблицы) мы определяем x-координату курсора и задаём ширину левой колонки. В момент отпускания кнопки (опять-таки на элементе html) возвращает dragging в false. Вот и всё.
  5. Нюансы по размерам: координату курсора мы получаем относительно страницы, поэтому нам нужно знать позицию таблицы на странице, её определяем через $(table).offset().left. Ширина левой колонки определяется как позиция курсора минус позиция таблицы минус смещение в сплиттере. Смещение в сплиттере необходимо для того, чтобы при работе он не дёргался на левый край. Ширина правой колонки определяется как ширина таблицы минус ширина левой колонки, минус ширина сплиттера. Собственно, ширину правой колонки узнаём только чтобы ограничить её минимальный размер (он задаётся через параметр minWidth для jQuery-плагина).
  6. Начальный размер задаётся параметром startWidth (применяется только если это число больше нуля).
Вот, в общем-то, и все секреты.

Скачать пример (zip, 1.57 КБ)
Открыть пример (html, 4.58 КБ)


Автор: Денис
Дата публикации: 27.05.2022
Просмотров: 23

Комментарии

Я
09.03.2023 17:09:00
Недавно требовалось, но подобного не нашлось. Проверю, если что отпишусь
Михаил
19.10.2022 18:22:33
Спасибо! не думал что такой функционал может быть так просто реализован.

Категории блога:

  • 1С-Битрикс 10
  • Общее о создании сайтов 13
  • HTML, CSS, JS, jQuery 2
  • Без категории 9
Ссылки
  • Главная
  • Модули
  • Акции
  • Услуги
  • Отзывы
  • Блог
  • Новости
  • Контакты
  • Реквизиты
Поиск по сайту
Наши контакты

По всем вопросам обращайтесь:

Электронная почта: info@webdebug.ru

Telegram: webdebug

WhatsApp: +79882410850

Форма обратной связи

Webdebug Bitrix certified
Webdebug QR-code
© ООО «Веб дебаг», 2011 – 2023. Политика конфиденциальности.
×
У Вас вопрос?
Загрузка ...
×
Связаться с нами
Загрузка ...
×
Комментарий к статье
Загрузка ...