Yii2 Scroll Pager

Yii2 Scroll Pager

kop/yii2-scroll-pager

Installer Démo

Infinite AJAX Scroll est un plugin de défilement infini jQuery. Cela fonctionne en lisant les liens suivants (et précédents) de votre pagination côté serveur existante et en chargeant ces pages via AJAX lorsque le visiteur fait défiler l'écran jusqu'à la fin de la page.

Heure de publication: mardi 29 mars 2016 (il y a 3 ans)

Créé par: Семенов Александр Сергеевич

Catégorie: Autre

Version actuelle: 2.7.1
11 oct. 2019 10:00:39 (il y a un mois)

Packagist: kop/yii2-scroll-pager

: https://github.com/kop/yii2-scroll-pager

: 185026 (Par mois: 5785)

Type: Компонент


Infinite AJAX Scroll est un plugin de défilement infini jQuery. Cela fonctionne en lisant les liens suivants (et précédents) de votre pagination côté serveur existante et en chargeant ces pages via AJAX lorsque le visiteur fait défiler l'écran jusqu'à la fin de la page.

Yii2 Scroll Pager

Yii2 Scroll Pager (Y2SP) turns your regular paginated page into an infinite scrolling page using AJAX.

Y2SP works with a Pagination object which specifies the totally number of pages and the current page number.

Pager is build with help of JQuery Infinite Ajax Scroll plugin.

Latest Stable Version Code Climate Scrutinizer Code Quality Dependency Status License

Requirements

  • Yii 2.0
  • PHP 5.4

Installation

The preferred way to install this extension is through Composer.

Either run

php composer.phar require kop/yii2-scroll-pager "dev-master"

or add

"kop/yii2-scroll-pager": "dev-master"

to the require section of your composer.json file.

Usage

Just pass the ScrollPager class name to the ListView pager configuration. Make sure that items in your list have some classes that can be used as JavaScript selectors.

ListView

echo ListView::widget([
     'dataProvider' => $dataProvider,
     'itemOptions' => ['class' => 'item'],
     'itemView' => '_item_view',
     'pager' => ['class' => \kop\y2sp\ScrollPager::className()]
]);

ListView (Advanced example)

Here you can see how you can use variable {{ias}} for events. In this example are added the new settings linkPager, linkPagerOptions and linkPagerWrapperTemplate.

echo ListView::widget([
     'options' => ['class' => 'list-view'],
     'dataProvider' => $listDataProvider,
     'itemOptions' => ['tag' => false],
     'itemView' => '_list_item',
     'summary' => '',
     'layout' => '{items}{pager}',
     'pager' => [
          'class' => \kop\y2sp\ScrollPager::className(),
          'item' => 'article',
          'next' => '.next a',
          'paginationSelector' => '.list-view .pagination',
          'triggerText' => Yii::t('app', 'Show more'),
          'triggerTemplate' => '<span class="reveal-btn">{text}</span>',
          'noneLeftText' => '',
          'noneLeftTemplate' => '',
          'spinnerSrc' => '',
          'spinnerTemplate' => '',
          'linkPager'     => [
               'prevPageCssClass' => 'btn-link prev',
               'nextPageCssClass' => 'btn-link next',
               'prevPageLabel' => '<span class="prev-page">prev</span>',
               'nextPageLabel' => '<span class="next-page">next</span>',
          ],
          'linkPagerOptions'     => [
               'class' => 'pagination',
          ],
          'linkPagerWrapperTemplate' => '<div class="button-news-more"><div class="wrapper"><div class="paging">{pager}</div></div></div>',
          'eventOnPageChange' => 'function() {{{ias}}.hidePagination();}',
          'eventOnReady' => 'function() {{{ias}}.restorePagination();}',
     ],
]);

GridView

echo GridView::widget([
     'dataProvider' => $dataProvider,
     'pager' => [
        'class' => \kop\y2sp\ScrollPager::className(),
        'container' => '.grid-view tbody',
        'item' => 'tr',
        'paginationSelector' => '.grid-view .pagination',
        'triggerTemplate' => '<tr class="ias-trigger"><td colspan="100%" style="text-align: center"><a style="cursor: pointer">{text}</a></td></tr>',
     ],
]);

Configuration

General Options

Option name Description Default value
container The selector of the element containing your items that you want to paginate. .list-view
item The selector of the element that each item has.<br Make sure the elements are inside the container element. .item
paginationSelector The selector of the element containing the pagination. .list-view .pagination
next The selector of the link element that links to the next page.
The href attribute of this element will be used to get the items from the next page.
Make sure there is only one(1) element that matches the selector.
.next a
delay Minimal number of milliseconds to stay in a loading state. 600
negativeMargin By default IAS starts loading new items when you scroll to the latest .item element.
The negativeMargin will be added to the items offset, giving you the ability to load new items earlier (please note that the margin is always transformed to a negative integer).

Example: Setting a negativeMargin of 250 means that IAS will start loading 250 pixel before the last item has scrolled into view.
10

Extensions

Option name Description Default value
enabledExtensions The list of the enabled plugin extensions. [
ScrollPager::EXTENSION_TRIGGER,
ScrollPager::EXTENSION_SPINNER,
ScrollPager::EXTENSION_NONE_LEFT,
ScrollPager::EXTENSION_PAGING,
ScrollPager::EXTENSION_HISTORY
]

Extension Options

Option name Description Default value
triggerText Text of trigger the link. Load more items
triggerTemplate Allows you to override the trigger html template. <div class="ias-trigger" style="text-align: center; cursor: pointer;"><a>{text}</a></div>
triggerOffset The number of pages which should load automatically. After that the trigger is shown for every subsequent page.

Example: if you set the offset to 2, the pages 2 and 3 (page 1 is always shown) would load automatically and for every subsequent page the user has to press the trigger to load it.
0
spinnerSrc The src attribute of the spinner image. Spinner Image
spinnerTemplate Allows you to override the spinner html template. <div class="ias-spinner" style="text-align: center;"><img src="{src}"/></div>
noneLeftText Text of the “nothing left” message. You reached the end
noneLeftTemplate Allows you to override the “nothing left” message html template. <div class="ias-noneleft" style="text-align: center;">{text}</div>
historyPrev The selector of the link element that links to the previous page.
The href attribute of this element will be used to get the items from the previous page.
Make sure there is only one element that matches the selector.
.previous
overflowContainer A selector for div HTML element to use as an overflow container. null

Plugin Events

Option name Description Default value
eventOnScroll Triggered when the visitors scrolls. null
eventOnLoad Triggered when a new url will be loaded from the server. null
eventOnLoaded Triggered after a new page was loaded from the server. null
eventOnRender Triggered before new items will be rendered. null
eventOnRendered Triggered after new items have rendered. null
eventOnNoneLeft Triggered when there are no more pages left. null
eventOnNext Triggered when the next page should be loaded.
Happens before loading of the next page starts. With this event it is possible to cancel the loading of the next page.
You can do this by returning false from your callback.
null
eventOnReady Triggered when IAS and all the extensions have been initialized. null
eventOnPageChange Triggered when a used scroll to another page. null

Report

License

yii2-scroll-pager is released under the MIT License. See the bundled LICENSE.md for details.

Resources


Tous les commentaires (0)
Sans commentaires

dev-master — 11 oct. 2019 10:00:39 (il y a un mois)

2.7.1 — 11 oct. 2019 10:00:39 (il y a un mois)

2.7.0 — 10 oct. 2019 12:35:30 (il y a un mois)

2.6.0 — 9 oct. 2019 17:22:56 (il y a un mois)

2.5.0 — 6 juil. 2016 22:56:33 (il y a 3 ans)

2.4.1 — 3 avr. 2016 04:27:47 (il y a 3 ans)

2.4.0 — 29 mars 2016 05:46:33 (il y a 3 ans)

2.3.1 — 19 oct. 2015 15:44:33 (il y a 4 ans)

2.3.0 — 13 août 2015 22:58:46 (il y a 4 ans)

2.2.4 — 18 avr. 2015 14:16:23 (il y a 4 ans)

2.2.3 — 1 mars 2015 14:04:23 (il y a 4 ans)

2.2.2 — 15 févr. 2015 15:20:34 (il y a 4 ans)

v2.2.1 — 23 oct. 2014 17:45:17 (il y a 5 ans)

v2.2 — 20 oct. 2014 13:20:14 (il y a 5 ans)

2.1.4 — 5 août 2014 13:35:20 (il y a 5 ans)

v2.1.3 — 31 juil. 2014 14:10:52 (il y a 5 ans)

v2.1.2 — 30 juil. 2014 04:03:14 (il y a 5 ans)

v2.1.1 — 7 juin 2014 01:08:11 (il y a 5 ans)

v1.0.2 — 4 avr. 2014 18:16:37 (il y a 5 ans)

Стандартная установка:

Добавьте composer.json файл вашего проекта:

"kop/yii2-scroll-pager": "*"

Запустите обновление зависимостей


Читать про обнолвение SkeekS CMS