忍者ブログ

Wordpressメモとかアフィめもとか

Wordpress,PHP,アフィリエイトとかの個人メモを記録していくよ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

jquery autopager ページがスクロールして一番下に来たら次を読み込む

twitterのTLみたいなやつ。
ページがスクロールして、一番下に来たら次のページを追加で読み込む。(ページの再読み込みはしない)

autopagerを使う。

head内に下を書く。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="autopager.js"></script>

<script type="text/javascript">$(function() {$.autopager();});</script>


コンテンツとページ送りはこんな感じ
 
<div class="content">
  ほげほげほげ
</div>
<a rel="next" href="次ページへのパス">次</a>


これで画面がrel="next"が画面に表示されたら、次ページのパスを読み込んでclass="content"のところに置き換わる。

autopager.jsのソース
/*
 * jQuery.autopager v1.0.0
 *
 * Copyright (c) 2009 lagos
 * Dual licensed under the MIT and GPL licenses.
 *
 * http://lagoscript.org
 */
(function($) {
    var window = this, options = {},
        content, currentUrl, nextUrl,
        active = false,
        defaults = {
            autoLoad: true,
            page: 1,
            content: '.content',
            link: 'a[rel=next]',
            insertBefore: null, 
            appendTo: null, 
            start: function() {},
            load: function() {},
            disabled: false
        };
 
    $.autopager = function(_options) {
        var autopager = this.autopager;
 
        if (typeof _options === 'string' && $.isFunction(autopager[_options])) {
            var args = Array.prototype.slice.call(arguments, 1),
                value = autopager[_options].apply(autopager, args);
 
            return value === autopager || value === undefined ? this : value;
        }
 
        _options = $.extend({}, defaults, _options);
        autopager.option(_options);
 
        content = $(_options.content).filter(':last');
        if (content.length) {
            if (!_options.insertBefore && !_options.appendTo) {
                var insertBefore = content.next();
                if (insertBefore.length) {
                    set('insertBefore', insertBefore);
                } else {
                    set('appendTo', content.parent());
                }
            }
        }
 
        setUrl();
 
        return this;
    };
 
    $.extend($.autopager, {
        option: function(key, value) {
            var _options = key;
 
            if (typeof key === "string") {
                if (value === undefined) {
                    return options[key];
                }
                _options = {};
                _options[key] = value;
            }
 
            $.each(_options, function(key, value) {
                set(key, value);
            });
            return this;
        },
 
        enable: function() {
            set('disabled', false);
            return this;
        },
 
        disable: function() {
            set('disabled', true);
            return this;
        },
 
        destroy: function() {
            this.autoLoad(false);
            options = {};
            content = currentUrl = nextUrl = undefined;
            return this;
        },
 
        autoLoad: function(value) {
            return this.option('autoLoad', value);
        },
 
        load: function() {
            if (active || !nextUrl || options.disabled) {
                return;
            }
 
            active = true;
            options.start(currentHash(), nextHash());
            $.get(nextUrl, insertContent);
            return this;
        }
 
    });
 
    function set(key, value) {
        switch (key) {
            case 'autoLoad':
                if (value && !options.autoLoad) {
                    $(window).scroll(loadOnScroll);
                } else if (!value && options.autoLoad) {
                    $(window).unbind('scroll', loadOnScroll);
                }
                break;
            case 'insertBefore':
                if (value) {
                    options.appendTo = null;
                }
                break
            case 'appendTo':
                if (value) {
                    options.insertBefore = null;
                }
                break
        }
        options[key] = value;
    }
 
    function setUrl(context) {
        currentUrl = nextUrl || window.location.href;
        nextUrl = $(options.link, context).attr('href');
    }
 
    function loadOnScroll() {
        if (content.offset().top + content.height() < $(document).scrollTop() + $(window).height()) {
            $.autopager.load();
        }
    }
 
    function insertContent(res) {
        var _options = options,
            nextPage = $('
').append(res.replace(//g, "")),
            nextContent = nextPage.find(_options.content); 
 
        set('page', _options.page + 1);
        setUrl(nextPage);
        if (nextContent.length) {
            if (_options.insertBefore) {
                nextContent.insertBefore(_options.insertBefore);
            } else {
                nextContent.appendTo(_options.appendTo);
            }
            _options.load.call(nextContent.get(), currentHash(), nextHash());
            content = nextContent.filter(':last');
        }
        active = false;
    }
 
    function currentHash() {
        return {
            page: options.page,
            url: currentUrl
        };
    }
 
    function nextHash() {
        return {
            page: options.page + 1,
            url: nextUrl
        };
    }
})(jQuery);
非常にシンプルかつ便利。

拍手[0回]

PR

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

ブログ内検索

最新コメント

広告

プロフィール

なんとなくはじめてみたよ

忍者ツールズプロフィールは終了しました

カウンター