使用jquery.more.js來實現滾動式載入資料

來源:互聯網
上載者:User

標籤:rip   rom   tin   xxx   limit   class   orm   order by   mysql   

html

<body>    <div id="more">        <div class="single_item">            <div class="date"></div>            <div class="author"></div>            <div class="title"></div>        </div>        <a href="javascript:;" class="get_more">點擊載入</a>    </div>    <script src="jquery.min.js"></script>    <script src="jquery.more.js"></script>    <script>        $(function() {            $(‘#more‘).more({                ‘address‘: ‘data.php‘            })        });    </script></body>

php

// 串連資料庫require_once(‘connect.php‘);$last = $_POST[‘last‘];$amount = $_POST[‘amount‘];$query = mysql_query("select * from article order by id desc limit $last,$amount");while ($row = mysql_fetch_array($query)) {    $sayList[] = array(        ‘title‘ => $row[‘title‘],        ‘author‘ => $row[‘id‘],        ‘date‘ => date(‘m-d H:i‘, $row[‘addtime‘])    );}echo json_encode($sayList);

介面返回的資料格式

[  {    "title": "xxx",    "author": "1",    "date": "04-04 10:34"  },  {    "title": "xxx",    "author": "1",    "date": "04-04 09:52"  },  {    "title": "xxx",    "author": "1",    "date": "04-04 09:18"  },  {    "title": "xxx",    "author": "1",    "date": "04-03 23:44"  },  {    "title": "xxx",    "author": "1",    "date": "04-03 23:09"  },  {    "title": "xxx",    "author": "1",    "date": "04-03 22:33"  },  {    "title": "xxx",    "author": "1",    "date": "04-03 20:25"  },  {    "title": "xxx",    "author": "1",    "date": "04-03 08:26"  },  {    "title": "xxx",    "author": "1",    "date": "04-02 21:56"  },  {    "title": "xxx",    "author": "1",    "date": "04-02 08:52"  }]

ps:返回的資料key與class相對應

jquery.more.js

/** * 調用方法: $(‘#more‘).more({‘url‘:‘data.php‘}); * amount   每次顯示記錄數 * address  請求的地址 * format   接受資料的格式 * template html記錄DIV的class屬性 * trigger  觸發載入更多記錄的class屬性 * scroll   是否支援滾動觸發載入 * offset   滾動觸發載入時的位移量 * data     自訂參數 * loading  載入時顯示 */(function($) {    var target = null;    var template = null;    var lock = false;    var cur_last = 0;    var variables = {        ‘last‘ : 0    }    var settings = {        ‘amount‘   : ‘10‘,        ‘address‘  : ‘comments.php‘,        ‘format‘   : ‘json‘,        ‘template‘ : ‘.single_item‘,        ‘trigger‘  : ‘.get_more‘,        ‘scroll‘   : ‘false‘,        ‘offset‘   : ‘100‘,        ‘data‘     : {},        ‘loading‘  : ‘載入中...‘    }    var methods = {        init: function(options) {            return this.each(function() {                if (options) {                    $.extend(settings, options);                }                template = $(this).children(settings.template).wrap(‘<div/>‘).parent();                template.css(‘display‘, ‘none‘);                $(this).append(‘<div class="loading">‘ + settings.loading + ‘</div>‘);                template.remove();                target = $(this);                if (settings.scroll == ‘false‘) {                    $(this).find(settings.trigger).bind(‘click.more‘, methods.get_data);                    $(this).more(‘get_data‘);                } else {                    if ($(this).height() <= $(this).attr(‘scrollHeight‘)) {                        target.more(‘get_data‘, settings.amount * 2);                    }                    $(this).bind(‘scroll.more‘, methods.check_scroll);                }            })        },        check_scroll: function() {            if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr(‘scrollHeight‘) && lock == false) {                target.more(‘get_data‘);            }        },        debug: function() {            var debug_string = ‘‘;            $.each(variables, function(k, v) {                debug_string += k + ‘ : ‘ + v + ‘\n‘;            })            alert(debug_string);        },        remove: function() {            target.children(settings.trigger).unbind(‘.more‘);            target.unbind(‘.more‘)            target.children(settings.trigger).remove();        },        add_elements: function(data) {            var root = target            var counter = 0;            if (data) {                $(data).each(function() {                    counter++                    var t = template                    $.each(this, function(key, value) {                        if (t.find(‘.‘ + key)) t.find(‘.‘ + key).html(value);                    })                    if (settings.scroll == ‘true‘) {                        root.children(‘.loading‘).before(t.html())                    } else {                        root.children(settings.trigger).before(t.html())                    }                    root.children(settings.template + ‘:last‘).attr(‘id‘, ‘more_element_‘ + ((variables.last++) + 1));                })            } else methods.remove()            // target.children(‘.loading‘).css(‘display‘, ‘none‘);            if (counter < settings.amount){                methods.remove();                target.children(‘.loading‘).html("已經到底了");            }        },        get_data: function() {            var ile;            lock = true;            target.children(".loading").css(‘display‘, ‘block‘);            $(settings.trigger).css(‘display‘, ‘none‘);            if (typeof(arguments[0]) == ‘number‘) {                ile = arguments[0];            } else {                ile = settings.amount;            }            if(variables.last >= cur_last) {                var postdata = settings.data;                postdata[‘last‘] = variables.last;                postdata[‘amount‘] = ile;                $.post(settings.address, postdata, function(data){                    $(settings.trigger).css(‘display‘, ‘block‘)                    methods.add_elements(data)                    lock = false;                }, settings.format);                cur_last = cur_last + 10;            }        }    };    $.fn.more = function(method) {        if (methods[method]) {            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));        } else if (typeof method == ‘object‘ || !method) {            return methods.init.apply(this, arguments);        } else $.error(‘Method ‘ + method + ‘ does not exist!‘);    }    $(document).ready(function() {        $(window).on(‘scroll‘, function() {            if ($(document).scrollTop() + $(window).height() > $(document).height() - 10) {                $(‘.get_more‘).click();            }        });    });})(jQuery)

 

使用jquery.more.js來實現滾動式載入資料

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.