帝國CMS內容點擊無限加載思路分享

2024-08-28 12:21:42

字體：大中小

來源：轉載

供稿：網友

帝國CMS無限加載是借鑒別的CMS插件更改的,現在還在制作樣式中,完成后會以插件分享給大家.

無限加載常見的原理是利用PHP文件調用數據庫信息,在用JS讀取PHP信息,最后插入顯示到頁面.

PHP文件代碼:

<?php

require_once('../../e/class/connect.php'); //引入數據庫配置文件和公共函數文件

require('../../e/class/db_sql.php'); //引入數據庫操作文件

$link=db_connect(); //連接MYSQL

$empire=new mysqlquery(); //聲明數據庫操作類

$editor=1; //聲明目錄層次

$last = $_POST['last'];

$amount = $_POST['amount'];

$user = array('demo1','demo2','demo3','demo3','demo4');

$sql=$empire->query("select * from ceshi_ecms_news order by id desc limit $last,$amount");

while ($row=$empire->fetch($sql)) {

    $addurl="<a href=".$row['titleurl'].">".$row['title']."</a>";

    $sayList[] = array(

        'content'=>$row['username'],

        'author'=>$addurl,

        'url'=>$row['titleurl'],

        'date'=>date('m-d H:i',$row['newstime'])

      );//開源軟件:Vevb.com

}

echo json_encode($sayList);

db_close(); //關閉MYSQL鏈接

$empire=null; //注消操作類變量

?>

JS調用代碼:

(function( $ ){

    var target = null;

    var template = null;

    var lock = false;

    var variables = {

        'last'      :    0

    }

    var settings = {

        'amount'      :   '10',

        'address'     :   'comments.php',

        'format'      :   'json',

        'template'    :   '.single_item',

        'trigger'     :   '.get_more',

        'scroll'      :   'false',

        'offset'      :   '100',

        'spinner_code':   ''

    }



    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="more_loader_spinner">'+settings.spinner_code+'</div>')

                $(this).children(settings.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){

            //alert('adding elements')



            var root = target

         //   alert(root.attr('id'))

            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);

                    })

                    //t.attr('id', 'more_element_'+ (variables.last++))

                    if(settings.scroll == 'true'){

                    //    root.append(t.html())

                    root.children('.more_loader_spinner').before(t.html())

                    }else{

                    //    alert('...')



                          root.children(settings.trigger).before(t.html())

                    }

                    root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1))



                })





            }

            else  methods.remove()

            target.children('.more_loader_spinner').css('display','none');

            if(counter < settings.amount) methods.remove()

        },

        get_data      : function(){

           // alert('getting data')

            var ile;

            lock = true;

            target.children(".more_loader_spinner").css('display','block');

            $(settings.trigger).css('display','none');

            if(typeof(arguments[0]) == 'number') ile=arguments[0];

            else {

                ile = settings.amount;

            }



            $.post(settings.address, {

                last : variables.last,

                amount : ile

            }, function(data){

                $(settings.trigger).css('display','block')

                methods.add_elements(data)

                lock = false;

            }, settings.format)



        }

    };

    $.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!');

    }

})(jQuery)

HTML代碼:

<script type="text/javascript" src="js/jquery.more.js"></script>

<script>

$(function(){

$('#more').more({'address': 'data.php'})

});

</script>

<div class="lb-menu">

<div class="sideMenu">

<h3 class="on"><em></em>衣服</h3>

<ul>

<li>男士</li>

<li>女士</li>

<li>童裝</li>

</ul>

<h3><em></em>鞋子</h3>

<ul>

<li>男士</li>

<li>女士</li>

<li>童裝</li>

</ul>

<h3><em></em>配飾</h3>

<ul>

<li>男士</li>

<li>女士</li>

<li>童裝</li>

</ul>

</div>

</div>

<div id="more">

<div class="single_item">

<div class="element_head">

<div class="date"></div>

<div class="author"></div>

</div>

<div class="content"></div>

<div class="url"></div>

</div>

<a href="javascript：;" class="get_more">::點擊加載更多內容::</a> </div>