Giter VIP home page Giter VIP logo

yii2-infinite-scroll's Introduction

yii2-infinite-scroll

Yii2 extension for infinite-scroll jQuery plugin, providing scrolling functionality for widgets such as ListView. It renders a hyperlink that leads to subsequent page of a target and registers infinite-scroll jQuery plugin which uses javascript to fetch and append content for subsequent pages, gracefully degrading to complete page reload when javascript is disabled.

Several behaviours allowing to customize scroll behavior are provided out of the box, including twitter-style manual trigger, local scroll in overflow div, masonry integration and others.

Resources

Installation

Composer

Add extension to your composer.json and update your dependencies as usual, e.g. by running composer update

{
    "require": {
        "dlds/yii2-infinite-scroll": "1.0.*@dev"
    }
}

##Widget Configuration

In addition to most of the properties that LinkPager provides, this widget also allows you to configure:

  • $widgetId string owner widget id, required
  • $itemsCssClass string CSS class of a tag that encapsulates items, required
  • $pluginOptions array infinite-scroll jQuery plugin options. For more information refer to infinite-scroll documentation
  • $contentLoadedCallback string|JsExpression javascript callback to be executed on loading the content via ajax call

##Sample Usage

Plugin works by appending fetched items to the end of parent container, so it is required to configure layout property of parent ListView widget, wrapping {items} into e.g. div container with some class (to be used as a selector). It is possible to configure all selectors that widget initializes plugin with to fit your project requirements, but it general it is enough to set itemCssClass (class of that wrapping tag that we created) and widgetId (which would ensure multiple plugins on the same page would not conflict).

So the minimal required configuration would look like this:

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
    ],
]);

An example illustrating how to customize some widget / plugin options:

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more items',
        'linkOptions' => [
            'class' => 'btn btn-lg btn-block',
        ],
        'pluginOptions' => [
            'loading' => [
                'msgText' => "<em>Loading next set of items...</em>",
                'finishedMsg' => "<em>No more items to load</em>",
            ],
            'behavior' => InfiniteScrollPager::BEHAVIOR_TWITTER,
        ],
    ],
]);

##License

Extension is released under MIT license, same as underlying jQuery plugin.

yii2-infinite-scroll's People

Contributors

nirvana-msu avatar jirisvoboda avatar svobik7 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.