Next Generation CMS :: Форум поддержки

Заинтересовала наша система? Тогда этот форум для Вас!

Вы не зашли.

#1 2015-07-02 15:05:52

Евгений
Модератор
Откуда Россия
Зарегистрирован: 2009-04-08
Сообщений: 1,014
Рейтинг :   38 
Сайт

pages - немножко бы причесать действующую конструкцию

Всем доброго времени суток, решил вновь ворваться в заснеженную даль) и обновить один из работающих на NG сайтов, отрисовал, сверстали адаптивно, вот теперь занялся натяжкой, и встает вопрос с конструкций для постраничной навигации, верстали же под мобильные устройства тоже, и сделали два вида оформления пагинации, один классический ссылками, а другой через select, вот собственно изначальный код верстки:

<!-- begin .pagination-->
              <div class="pagination">
              <a href="" class="pagination__link spec-l"><span>Назад</span></a>
                <div class="pagination__select-wrap">
                  <select class="pagination__select">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="...">...</option>
                    <option value="35">35</option>
                  </select>
                </div>
                <ul class="pagination__list">
                  <li class="pagination__item"><a href="" class="pagination__link active">1</a></li>
                  <li class="pagination__item"><a href="" class="pagination__link">2</a></li>
                  <li class="pagination__item"><a href="" class="pagination__link">3</a></li>
                  <li class="pagination__item"><a href="" class="pagination__link">4</a></li>
                  <li class="pagination__item"><a href="" class="pagination__link">...</a></li>
                  <li class="pagination__item"><a href="" class="pagination__link">35</a></li>
                </ul>
              <a href="" class="pagination__link spec-r">Вперёд</a>
              </div>
<!-- end .pagination-->

Хотелось бы сделать в pages.tpl конструкцию вида:

<!-- begin .pagination-->
              <div class="pagination">
              <a href="{prevlink}" class="pagination__link spec-l"><span>Назад</span></a>
                <div class="pagination__select-wrap">
                  <select onchange="window.location.href=this.options[this.selectedIndex].value" class="pagination__select">
{pages-wrap}
                  </select>
                </div>
                <ul class="pagination__list">
{pages-list}
                </ul>
              <a href="{nextlink}" class="pagination__link spec-r">Вперёд</a>
              </div>
              <!-- end .pagination-->

А в variables.ini конструкцию:

[navigation-wrap]
current_page    = "<option value='%link%'>%page%</option>"
link_page    = "<option value='%link%'>%page%</option>"
dots        = "<option value=''>...</option>"

[navigation-list]
current_page    = "<li class='pagination__item'><a href='%link%' class='pagination__link active'>%page%</a></li>"
link_page    = "<li class='pagination__item'><a href='%link%' class='pagination__link'>%page%</a></li>"
dots        = "<li class='pagination__item'><a href='#' class='pagination__link'>...</a></li>"

Заранее премного благодарен!

Используется Changeset 1127


I NGeneration CMS

Не в сети

#2 2015-07-02 17:42:01

Zemlemer
Участник
Откуда Украина
Зарегистрирован: 2012-07-27
Сообщений: 271
Рейтинг :   25 
Сайт

Re: pages - немножко бы причесать действующую конструкцию

Для создания подобного списка достаточно дописать в news.table.tpl:

<select>
{% for p in 1..pages.total %}
  <option value="{{ p }}" {% if p == pages.current %}selected="selected"{% endif %}>{{ p }}</option>
{% endfor %}
</select>

Останется добавить скрипт, чтобы при выборе опции открывалась страница.

Не в сети

#3 2015-07-02 18:25:53

irbees2008
Продвинутый чайник ;)
Откуда Шахтинск
Зарегистрирован: 2012-03-14
Сообщений: 2,873
Рейтинг :   121 
Сайт

Re: pages - немножко бы причесать действующую конструкцию

Zemlemer, ему надо два вида пагинации прописать pages.tpl и variables.ini для мобил и  компов

Не в сети

#4 2015-07-02 20:15:10

Zemlemer
Участник
Откуда Украина
Зарегистрирован: 2012-07-27
Сообщений: 271
Рейтинг :   25 
Сайт

Re: pages - немножко бы причесать действующую конструкцию

Задачу я понял smile  И предлагаю более простой путь, потому как:

1. Попытка сделать так, как хочет Евгений - потребует правки движка (функция news_showlist).

2 . Механизм генерации постранички в NG неудобный:
- разметка разделена между файлами variables.ini и pages.tpl
- блок постранички генерится на сервере
- и вставляется в news.table.tpl с помощью переменной {{ pagination }}

Вот вам стандартная постраничка на твиге (прописать в news.table.tpl):

{% if pages.total > 1 %}
<div class="pagination">
  <ul>
  <!-- кнопка "Назад" на всех страницах, кроме первой -->
  {% if pages.current > 1 %}
    <li>
      {% if pages.current > 2 %}
      <!-- ссылка на любую страницу, кроме первой -->
      <a href="{{ home }}/{{ system_flags.news['currentCategory.alt'] }}/page/{{ pages.current - 1 }}.html">Назад</a>
      {% else %}
      <!-- ссылка на 1-ю страницу -->
      <a href="{{ home }}/{{ system_flags.news['currentCategory.alt'] }}.html">Назад</a>
      {% endif %}
    </li>
  {% endif %}
  {% for p in 1..pages.total %}
    <li>
      <!-- выводим ссылку для всех страниц, кроме текущей -->
      {% if p != pages.current %}
        {% if p > 1 %}
        <!-- ссылка на любую страницу, кроме первой -->
        <a href="{{ home }}/{{ system_flags.news['currentCategory.alt'] }}/page/{{ p }}.html">{{ p }}</a>
        {% else %}
        <!-- ссылка на 1-ю страницу -->
        <a href="{{ home }}/{{ system_flags.news['currentCategory.alt'] }}.html">{{ p }}</a>
        {% endif %}  
      {% else %}
      <!-- если страница равна текущей, сссылку не выводим -->
      <b>{{ p }}</b>
      {% endif %}
    </li>
  {% endfor %}
  <!-- кнопка "Вперед" на всех страницах, кроме последней -->
  {% if pages.current < pages.total %}
    <li>
      <a href="{{ home }}/{{ system_flags.news['currentCategory.alt'] }}/page/{{ pages.current + 1 }}.html">Вперед</a>
    </li>
  {% endif %}
  </ul>
</div>
{% endif %}

Плюсы:
+ вся разметка в одном файле,
+ можно сделать самые разные варианты постранички (тот же select и т. д.)
+ не привязываемся к вышеописанному алгоритму движка.

Минусы:
- работает только для by.category, для вывода новостей по дате (год, месяц, день) потребуется чуть переделать.
- для вывода dots (...) надо будет прописать дополнительные условия.

Изменено Zemlemer (2015-07-02 20:20:45)

Не в сети

#5 2015-07-08 14:10:55

Евгений
Модератор
Откуда Россия
Зарегистрирован: 2009-04-08
Сообщений: 1,014
Рейтинг :   38 
Сайт

Re: pages - немножко бы причесать действующую конструкцию

Zemlemer, спасибо Вам огромное, все работает как часы! Минусы не критичны, материалов пока что кот наплакал, а сортировка стандартная.


I NGeneration CMS

Не в сети

Подвал раздела

Работает на FluxBB