Скрипт постраничной навигации на jQuery для Website X5

 В этом скрипте я объединил два  jQuery плагина: один из них разбивает контент длинного блока на страницы (по заданной высоте в px), другой - формирует строку навигации. Стиль строки навигации может быть выбран из трех вариантов или создан пользовательский путем внесения изменений в файл css.

Вот эти три стиля.

После установки скрипта получится такой вид страницы интернет-магазина

Итак
1. Создаем проект в программе WebsiteX5.
2. В "Расширенные настройки корзина" Импортируем демо файл cart_z.csv с длинным списком товаров.     cart_z.csv.zip 
3. На страницу сайта ставим объект "Каталог товаров", в нем отмечаем галочкой Категория1 - будут отображены все товары из демо-списка.
4. Делаем настройки внешнего вида каталога и шаблона сайта - при необходимости и на свой вкус.
5. На той же странице добавляем объект "HTML-код" - там будет строка навигации.  Высоту этого объекта лучше задать в пределах от 0 до 70.

вставляем в него код html  (скопировать из файла ) :

на вкладку "экспертcss-код" этого же объекта ставим такой код  (скопировать из файла ):

Здесь  #imCell_1, #imCellStyle_1  - это идентификаторы блока, в котором находится каталог товаров. Номер (в моем случае 1) вы должны уточнить, просмотрев исходный код страницы вашего сайта.

6.  Файл css    добавляем в папку style           style/simplePagination.css   (в этом файле содержатся три стиля строки навигации, здесь же можно дописать собственный стиль)

Файл плагина  добавляем в папку res       res/jquery.simplePagination.js       (плагин собран и адаптирован мной из двух jQuery плагинов, ссылка на которые будет ниже)

Файлы эти можно найти в архиве Preview.zip     Preview.zip 

7.  В "Свойствах страницы" на вкладке "Эксперт" "Перед закрывающим тегом Head" вставляем такой код для инициализации скрипта  (взять из файла)

Делаем настройки в этом  коде  

- Первая часть настроек  (функция разбиения на страницы) содержит только один пункт:
 height: 2200   - это высота страниц, на которые плагин будет разбивать вашу страницу  каталога товара


- Вторая часть настроек (функция формирования строки навигации) может быть довольно обширной:

 prevText: 'Пред',    - - это текст кнопки перехода на предыдущую страницу
 nextText: 'След',    - - это текст кнопки перехода на следующую страницу
 cssStyle: 'compact-theme'   - - это стиль строки навигации (здесь можно выбрать один из трех стилей   'compact-theme'  или  'dark-theme'  или  'light-theme'  или собственный стиль, который вы добавите в файл  style/simplePagination.css  )

Здесь же во второй части при желании можно дописать еще настройки, например:


displayedPages: 5,               -- Сколько будет видимых кнопок с номерами страниц.

edges: 2,                              -- Сколько видимых кнопок в конце и вначале пагинации.

currentPage: 1,              --        Какую страницу выделить первоначально после загрузки.

labelMap:                        -- Здесь может быть задан массив из текстовых меток, которые заменят номера страниц.

selectOnClick: true,               -- Установите значение false , если вы не хотите, чтобы кнопка выделялась после клика.

Есть еще несколько специфичных настроек для продвинутых.


Файл проекта (Evo 11)  TestPaginatorShop11.iwzip.zip   

Этот скрипт постраничной навигации на jQuery для программы WebsiteX5 можно использовать не только на странице интернет-магазина, но и , например, на странице с длинным текстовым блоком. 
Вот этот селектор [id ^= "imProductList"] в коде инициализации скрипта определяет блок, который надо разбивать на страницы. (http://jquery-docs.ru/selectors/)

Для подготовки этого урока использованы публикации 
  http://flaviusmatis.github.io/
  http://ruseller.com/
  http://forum.websitexs.ru/