手机网站分页功能实现

sunrain_yingxi 2014-06-05 05:33:51

在手机网站中如何实现类似这个网站http://m.hyjianmei.com/products_list.html的分页功能呢？

...全文

212 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

by_封爱 2014-06-06

打赏
举报

右键查看源文件.. 什么代码都有了....


jQuery(".Products_mobilelist01-d1_c1 .j-productlist-more").unbind("click").click(function(){
		$('.j-productlist-more').hide();
		$('.loading').show();
		var root = jQuery(".ui-page-active .Products_mobilelist01-d1_c1");
		var pageno = root.find('#pageno').val();
		pageno = parseInt(pageno)+1;
		var categoryId = root.find('#j-categoryId').val() ? root.find('#j-categoryId').val() : '';
		var nameorcode = root.find('#j-keywords').val() ? root.find('#j-keywords').val() : '';
		var keyword = root.find('#j-keyword2').val() ? root.find('#j-keyword2').val() : '';
		jQuery.getJSON('/Products.do?method=mobilelist01json',
				{pageno : pageno, categoryId : categoryId, nameorcode : nameorcode, keywords: keyword},
				function(json){
				if(json){
					if(json.data){
						var ul = root.find("ul");
						for(var i=0;i<json.data.length;i++){
							var data = json.data[i];
							var li = [];
							li.push('<li>');
							var url = "/products_detail/&productId="+data.id+".html";
							li.push('<a href="');
							li.push(url);
							li.push('">');
							li.push('<div class="pic"><div class="col"><img class="img"  src="');
							li.push(data.simg);
							li.push('" alt="" /></div></div>');
							li.push('<div class="cont"><h3>');
							li.push(data.name);
							if(data.markimgs.length>0){
								var markimgs = String(data.markimgs).split(',');
								for(var j=0;j<markimgs.length;j++){
									if(markimgs[j].length>0){
										li.push('<img class="img"  src="'+ markimgs[j] + '" alt="" />');
									 }
								}
							}
							li.push('</h3><p class="code">编号：');
							li.push(data.code);
							li.push('</p><p class="detail">');
							var desc = String(data.desc);
							if(desc.length>20){
								li.push(desc.substr(0,20)+'...');
							}else{
								li.push(desc);
							}
							li.push('</p></div></a></li>');
							ul.append(li.join(''));
						}
						root.find('#pageno').val(pageno);
						if(json.totalnum <= pageno * 6){
							root.find('.j-productlist-more').remove();
							$('.loading').hide();
							root.find('#pageno').val(1);
						}else{
							$('.j-productlist-more').show();
							$('.loading').hide();
						}
					}
				}
				});
	});