Выбор страницы в пагинации

+15
1.35K
Выбор страницы в пагинации

Когда страниц в пагинации становится много, навигация к конкретной странице становится тяжкой. Исправим это, добавим показ выпадающего списка со страницами при нажатии на три точки в пагинации.

Изображение

Архив включается в себя файл шаблона с подключенными js и css файлами.

После установки выберите новый стиль в настройках темы

Изображение

Если у вас уже свой стиль пагинации, вы можете добавить подключение этих файлов в него.

  1. <?php
  2. $this->addTplJSNameFromContext('pagination_select_listener');
  3. $this->addTplCSSNameFromContext('pagination_select');
  4. $this->onDemandTplJSName(['pagination_select_shower']);
  5. ?>

Именно эти строчки отвечают за работу.

Демо

Демо доступно по ссылке https://demo.bergorod.ru/video?page=9

Ограничения

Работает на 2.14.2 и свежее. Работает только на modern и дочерних шаблонах.

Предоставляется как есть. Делалось просто так, тестировалось минимально. Если что-то пошло не так, просто выберите обычный шаблон пагинации в настройках темы.

Пишите о багах, пожелания приветствуются.

Прикреплённый файл:
Скачать 5 Кбскачан 43 раза
0
Panda58dev Panda58dev 3 года назад #

Полезная вещь, спасибо!

0
Алексей Т Алексей Т 3 года назад #

Спасибо+

+2
Sonat Sonat 3 года назад #

Пишите о багах, пожелания приветствуются.

Не то что бы баг или пожелания, скорее вопросы дизайна и функционала

1. Почему бы по клику на три точки блок «выберите страницу» не выводить сразу с развернутым выпадающим списком, зачем нужен лишний клик?
2. Нежелательно чтобы блок «выберите страницу» перекрывал сам пагинатор, т.е. лучше если он будет выводиться выше пагинатора и выпадающий список на верх либо выводить ниже пагинатора и список выводить вниз.

Изображение


3. Дублирование фразы "выберите страницу" в заголовке и в списке.

4. Если находишься на 4 странице (с начала и конца списка) очень странным выглядят три точки вместо цифры страницы

Изображение

т.е. если я с 4 страницы хочу перейти на 2 страницу, вместо того чтобы просто кликнуть по клеточке с цифрой 2, я кликаю на квадрат с тремя точками, потом кликаю «выберите страницу», а после выпадающего списка с единственным вариантом «2» уже кликаю на нужную мне страницу.

-2
Олег Васильевич я Олег Васильевич я 3 года назад #

Sonat, имхо, фуфел гоните.

+3
Sonat Sonat 3 года назад #

Каюсь, бес попутал. Ввела в заблуждение фраза автора "пожелания приветствуются". Постараюсь впредь держать свои пожелания при себе 👣

+1
Zau4man Zau4man 3 года назад #

1. 3. вытекает из особенностей работы select

Хотелось сделать именно с помощью него, так как он открывается на весь экран у пользователей мобильных, а их 80% тырнета, и им удобнее так будет кликать, чем в имитацию списка стилизованными divами

2. Не вижу проблемы. Выпадашка скрывается при первом же клике мимо нее.

4. Это вопрос к классу пагинатора, который формирует ссылки. Шаблоном это поведение не исправить.

Но все равно спасибо, что поделились вашим мнением.

+1
Panda58dev Panda58dev 3 года назад #

Поддерживаю, вполне резонные правки :)

0
Zau4man Zau4man 2 года назад #

Обновленная версия доступна по ссылке

Еще от автора

Шаблон вывода категорий
Делюсь небольшим компонентом, который выводит на списком записей список категорий со своим шаблоном.
Виджет "Меню добавить"
Небольшой виджет, предназначенный исключительно для вывода меню добавления контента.
ZПоиск. Другой взгляд на поиск
В рамках более глубокого знакомства с Vue в частности с появившимся недавно Composition Api сделал на Vue небольшой компонент, который по функционалу
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.