Ajaxスクロールドロップダウン汎用ページングコード

要求された機能を共通のjsファイルの下にカプセル化しました
次にjuicerを使用します.jsはjsのテンプレートを作りますこのように後期はいかなる地方でこのajaxのロードのページングを使うことができるならば
ajaxPage.jsファイルコードoptionは、いくつかの共通の入力値を構成します.

var page_module = {

	options : {

		pagesize : 10,

		get_content_callback : false,

		base_url : '/community/',

		uid : 0,

		aid :0, //  id

		status :0,

	},

	init : function(options){

		this.options = $.extend(this.options, options);

	},

	

	//        

	get_content_list : function(page){

		$.ajax({

			url : this.options.base_url,

			dataType : 'JSON',

	        beforeSend: function(XMLHttpRequest){

	        	$(".more").show().html('<span><img src="/static/community/images/loading.png" class="loading_img" />   ...</span>');

	        },

			data:{page:page, pagesize:this.options.pagesize, uid:this.options.uid,dateline:this.options.dateline,ajax:1,aid:this.options.aid},

			success:function(data){

				

				if(data && page_module.options.get_content_callback){

					page_module.options.get_content_callback(data);

				}

			}

		});

	}

};

　　
juicerを添付します.jsのファイルダウンロードアドレスは後期ダウンロードに便利ですhttp://juicer.name/docs/docs_zh_cn.html
ajaxを使用してページングされたページコード表示にはjs部分コードlistのみが列挙されている.html

<div class="circle_base">

    <ul id="contentlist">

    	{if $shopList}

    	

    	{loop $shopList $key $value}

        <li>

        	<div class="main">

                <a href="javascript:;" class="arrow"><i></i></a>

                <dl>

                    <dt><img src="{$value['avatar']}" width="50px" height="50px"></dt>

                    <dd>

                        <h3>{$value['shopName']}</h3>

                        <p>   :{$value['cpname']}</p>

                    </dd>

                </dl>

        	</div>

            <ul class="explain" rel="0">

            	<li>

                    <span>  ：</span>

                    <div>{$value['cpdesc']}</div>

                </li>

                <li>

                    <span>  ：</span>

                    <div>{$value['max']}</div>

                </li>

                <li>

                    <span>    ：</span>

                    <div>{$value['shopListName']}</div>

                </li>

                <li>

                    <span>    ：</span>

                    <div>{$value['etime']}</div>

                </li>

            </ul>

        </li>

        {/loop}

        {else}

        <li class="no_pc">         </li>

        {/if}

    </ul>

    <div class="more" style="display:none">

      	<a href="javascript:;">     </a> 

	</div>

</div>

<script src="/static/community/js/ajaxPage.js"></script>

<script src="/static/community/js/juicer.js"></script>





<script id="tpl" type="text/template">

	{@each dataAjax as it, k}

    <li>

		<div class="main">

			<a href="javascript:;" class="arrow"><i></i></a>

			<dl>

				<dt><img src="{$value['avatar']}" width="50px" height="50px"></dt>

				<dd>

				<h3>${it.shopName}</h3>

				<p>   :${it.cpname}</p>

				</dd>

			</dl>

		</div>

		<ul class="explain" rel="0">

			<li>

				<span>  ：</span>

				<div>${it.cpdesc}</div>

			</li>

			<li>

				<span>  ：</span>

				<div>${it.max}</div>

			</li>

			<li>

				<span>    ：</span>

				<div>${it.shopListName}</div>

			</li>

			<li>

				<span>    ：</span>

				<div>${it.etime}</div>

			</li>

		</ul>

    </li>

	{@/each}

</script>



<script>

$(".circle_base li .main").live("click",function(){

	$(this).toggleClass("arrow_90");

	$(this).siblings(".explain,.share_list").slideToggle();

});

//       

var options = {

	pagesize     : 10, 

	base_url     : '/community/active/shopList',

	aid : {$aid},

	get_content_callback : function(result){

		if(result && result.dataAjax ){

			

			var tpl = document.getElementById('tpl').innerHTML;

			var html = juicer(tpl, result);

			$("#contentlist").append(juicer(tpl,result));

			

		}else{

			$(".more").show().html('<a href="javascript:;" title="     ">     </a>');



		}

	}

};

$(document).ready(function(){

	page_module.init(options);

	var range = 50;             //      /  px

	var num = 2;

	var totalheight = 0; 

	 $(window).scroll(function(){

         var srollPos = $(window).scrollTop();    //        (         )

         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

 		if(($(document).height()-range) <= totalheight) {

 			page_module.get_content_list(num);

 			num++;

         }

     });

});



</script>

　　
バックアップに座って後でページを分けて直接使用するのに便利です