Vincent1
@Vincent1

Горизонтальная прокрутка таблицы по клику на кнопку?

Как проще сделать прокрутку таблицы по клику на кнопку как на примере, дать ему указание что можно прокручивать таблицу? Только здесь первая колонка фиксированная, а мне это не нужно. У меня простая таблица с данными, которую нужно прокручивать по горизонтали на не больших дисплеях.
Особенно хорошо если можете подсказать название плагина для wordpress, который умеет так делать.
2091c48c727d4415aa6822a261ade786.gif
  • Вопрос задан
  • 2058 просмотров
Пригласить эксперта
Ответы на вопрос 1
@dmz9
было дело, приходилось такое мутить.
есть какой то плагин но можно на js накидать своё, не найду свои сорсы.
далее с джиквери
вобщем, по document.ready берем каждую такую таблицу, оборачиваем в обёртку от конфеты.
обёртка должна быть с прокруткой горизонтальной (overflow-x).
после того как конфетка завёрнута append после обёртки кнопку. либо, если кнопка уже должна существовать - надо каждый раз проверять - а находится ли обёртка рядом с кнопкой, чтобы, при клике на кнопку прокручивалась именно ближайшая обёртка а не все подряд. если же кнопку создаем под каждую таблицу - просто вешаем хендлер .click(function(){}) а внутри каждый раз меняем прокрутку обёртки.
по сути, прокрутка вбок - это всего лишь scrollLeft у контейнера-обёртки. сама таблица как была так и есть.
этот скролл может иметь фиксированый размер в пикселях либо можно снимать ширину с родителя и типа скролить "на всю ширшину родительского контейнера". это достаточно универсально, можно еще чуть меньше сделать, чтобы следующий "слайд" всегда "продолжался" на 15-20 пикселей и было ощущение реальной прокрутки.
также, через джиквери этот самый scrollLeft можно еще и анимировать, добавляя например эффект "swing". тогда всё будет работать еще более badass!
плюс, так как это ж майфун, можно навешать на обёртку touch - ивенты, чтобы на лапание пальцами экрана прокрутка тоже отрабатывала.
---------------------
карусель (слайдер) тут не поможет - таблицу на слайды нельзя разбить.
---------------------
если таблицы совсем простые - без смердженых ячеек - есть плагин responsiveTables или типа того. тупо делает из широкой таблицу более узкую но меняет местами вертикальные-горизонтальные строки. читабельно. но если есть ячейки с colspan/rowspan - косячит
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы