Удобный и быстрый баян-контрол на JS
Недавно сделал клевый контрол на JS, который заставляет один элемент контейнера "всплывать" поверх остальных, пока над ним находится мышка.
http://screencast.com/t/jU3vwxBwY
Между элементами исходного контейнера нету пустого пространства и они занимают ровно всю площадь контейнера. Исходный контейнер менять нельзя.
Расскажу, как это сделать так, чтобы работало быстро и удобно.
Заводим поверх нашего контейнера 2 дополнительных прозрачных слоя: dummy-box и hover-box. Сами слои и их элементы позиционируем абсолютно.
dummy-box изначально пуст. Его размеры совпадают с размерами контейнера.
hover-box изначально заполняем элементами, соответствующими элементам исходного контейнера. Они расположены ровно над этими элементами и занимают ровно столько же места. Назовем их hover-area'ми.
Подписываемся на mouseover у всех hover-area. В обработчике события скрываем эту hover-area (display:none) и помещаем внутрь dummy-box'а точный клон элемента контейнера под мышкой (подмышкой?), и даем ему такой размер, чтобы его было видно целиком. Назовем его dummy-element.
Подписываемся на mouseleave у dummy-box. В обработчике события сбрасываем состояние системы. Сбрасываем состояние системы - значит удаляем dummy-element из dummy-box'а и возвращаем скрытую hover-area на место.
Замечания
http://screencast.com/t/jU3vwxBwY
Между элементами исходного контейнера нету пустого пространства и они занимают ровно всю площадь контейнера. Исходный контейнер менять нельзя.
Расскажу, как это сделать так, чтобы работало быстро и удобно.
Заводим поверх нашего контейнера 2 дополнительных прозрачных слоя: dummy-box и hover-box. Сами слои и их элементы позиционируем абсолютно.
dummy-box изначально пуст. Его размеры совпадают с размерами контейнера.
hover-box изначально заполняем элементами, соответствующими элементам исходного контейнера. Они расположены ровно над этими элементами и занимают ровно столько же места. Назовем их hover-area'ми.
Подписываемся на mouseover у всех hover-area. В обработчике события скрываем эту hover-area (display:none) и помещаем внутрь dummy-box'а точный клон элемента контейнера под мышкой (подмышкой?), и даем ему такой размер, чтобы его было видно целиком. Назовем его dummy-element.
Подписываемся на mouseleave у dummy-box. В обработчике события сбрасываем состояние системы. Сбрасываем состояние системы - значит удаляем dummy-element из dummy-box'а и возвращаем скрытую hover-area на место.
Замечания
- Самая долгая операция - создание dummy-element'а. Поэтому сложность работы алгоритма целиком зависит от сложности элементов контейнера.
- dummy-element можно всячески стилизовать. Я, например, залил фон белым цветом и обвел рамкой.
- Все поведение из элементов контейнера нужно дублировать на dummy-element.
- На iPad это работать не может физически, потому что там нет mouseover. Поэтому исходные обработчики событий элементов контейнера необходимо оставлять в живых.