文档章节

织梦首页列表页,ajax加载更多,瀑布流,首页多栏目切换

越野小生
 越野小生
发布于 2016/06/14 23:39
字数 1765
阅读 97
收藏 5
点赞 0
评论 0

效果图

加载更多按钮

 

一,模板上要引入jq文件

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.js"></script>

二,模板

<div class="xl12 xm8 xb8 over-hidden">
		<!-- 切换标签 -->
		<style type="text/css">
		.slideTxtBox{ width:100%;  text-align:left;  }
		.slideTxtBox .hd{ height:38px; line-height:27px;  position:relative; overflow:hidden }
		.slideTxtBox .hd ul{left:10px; float:left; position:absolute;  top:3px; height:39px;width:120%;}
		.slideTxtBox .hd ul li{height:40px; float:left;color:#fff;padding:0px 7px 0px 6px; cursor:pointer;  }
		.slideTxtBox .hd ul li.on{background:url({dede:global.cfg_templets_skin/}/images/bg5.png) repeat-x;color:red }
		
		.slideTxtBox .bd ul{ zoom:1;padding-bottom:50px;display:none;position:relative;}
		.slideTxtBox .bd li{ height:24px; line-height:24px;   }
	#dede_qrcode_frame{ display:none;z-index:5;position:absolute;top:-117px;left:-40px ;}
</style>


		<div id="slideTxtBox"class="slideTxtBox  l-padding00"style="overflow:visible !important;">
			<div class="hd bg-main">
				<ul id="tab"class="border-top border-main border-big">
				<li class="on">全部</li>
				<li>商会</li></ul>
			</div><br/>
			<div class="bd"id="slideTxtBox-bd">
			
				<ul id="all" class="show">
			{dede:arclist row='9' titlelen='100'titlelen='100' orderby='id' }
	<div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 list2 width-100 ib pr"id="list">
<div class="xl4  padding20 l-padding00">
<span class="pr ib "><a target="_blank" class="width-100" href="[field:arcurl/]">
		<img src="[field:litpic/]" width="100%"class="width-100" alt="[field:title/]">
	
	</a>
	<!-- 微博微信 -->
	<span class="left0 bottom0 height40 bgt30 width-100  text-fff text-small"id="shares" style="display:none ;">
	<a class="xl-textshare cursor votenums" href="http://v.t.sina.com.cn/share/share.php?title=[field:title/] [field:global.cfg_basehost/][field:arcurl/]"></a>
	<span class="line-share"></span>
	<span class="wx-textshare pr">
	<a class="z-index5 top0 left0" id='__dedeqrcode_1'></a>
  <script type="text/javascript">
  	var __dedeqrcode_id=1;
  	var __dedeqrcode_aid=[field:id/];
  	var __dedeqrcode_type='arc';
  	var __dedeqrcode_dir='[field:global.cfg_basehost/]/plus';
  </script>
  <script language="javascript" type="text/javascript" src="/plus/img/qrcode.js"></script></a>

  </span>
	</span>
	<!-- 微信 -->
	</span></div>
	<div class="xl8  padding-top20    l-padding-top00 ">
   
	<p><a target="_blank" href="[field:arcurl/]"><span class="text-22  l-text-18  bl"href="[field:arcurl/]">[field:title/]</span></a></p>   
</div>

</div>
{/dede:arclist}
	<p class="text-center margin-top bottom0 right300 width100  l-right100"><a href="javascript:" class="button radius-rounded border-main"id="alldata">加载更多</a></p>
				</ul>
				
			
				<!-- 商会 -->
		<ul id="sh">
		{dede:arclist row='9' titlelen='100'typeid=1 orderby='id' }
	<div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 list2 width-100 ib pr"id="list">
<div class="xl4  padding20 l-padding00">
<span class="pr ib ">
<a target="_blank" class="width-100" href="[field:arcurl/]">
		<img src="[field:litpic/]" width="100%"class="width-100" alt="[field:title/]">
	</a>
	<!-- 微信 -->
	<!-- 微信 -->
	</span></div>
	<div class="xl8 padding-top20 l-padding-top00 ">
	<p><a target="_blank" href="[field:arcurl/]"><span class="text-22  l-text-18  bl"href="[field:arcurl/]">[field:title/]</span></a></p>
</div>

</div>
{/dede:arclist}
	<p class="text-center margin-top bottom0 right300 width100 l-right100"><a href="javascript:" class="button radius-rounded border-main"id="shdata">加载更多</a></p>
	</ul>
	
</div>
			
		
		</div>
		<!-- slideTxtBox end -->
<script type="text/javascript">
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++)
{
if(tabs[i]==obj){
tabs[i].className="on";
divs[i].className="show";
}
else{
tabs[i].className="";
divs[i].className="";
}
}
}
</script>



<script type="text/javascript">
var loadConfig = {
				url_api:'/plus/list.php',
				//typeid:{dede:field name="typeid"/},
				pagesize:9,
				loading : 0
				}
				var page=2;
				var allpage=2;
				var shpage=2;
function  loadMoreApply(typeid,orderby,toid){
		 eval(" page ="+toid+"page;");
		 var pagesize = loadConfig.pagesize;
		 var url = loadConfig.url_api,
		 data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};
			function ajax(url, data) {
				$.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {
				
					addContent(data,toid);	
					
				}});
				
			}
			ajax(url,data);
}
 function addContent (rs,toid){
	if(rs.statu== 1){
		var data = rs.list;
		var total = rs.total;
		var arr=[];
		var length = data.length;
		for(var i=0;i<length;i++){
			arr.push('<div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 ib list2" id="list">');
			
			
			
			
			arr.push('<div class="xl4  padding20 l-padding00"><span class="pr ib "><a target="_blank" class="width-100" href="'+data[i].arcurl+'"><img src="'+data[i].picname+'" width="100%"class="width-100" alt="'+data[i].title+'"></a><span class="left0 top0 ib padding-top2 padding-bottom2 padding-left10 padding-right10 bg-main text-fff text-small">'+data[i].typename+'</span><span class="left0 bottom0 height40 bgt30 width-100  text-fff text-small"id="shares" style="display:none ;"><a class="xl-textshare cursor votenums" href="http://v.t.sina.com.cn/share/share.php?title='+data[i].title+'{dede:global.cfg_basehost/}'+data[i].arcurl+'"></a><span class="line-share"></span><span class="wx-textshare pr"><a class="z-index5 top0 left0" id="__dedeqrcode_1"></a>');
  	var __dedeqrcode_id=1;
  	var __dedeqrcode_aid=data[i].id;
  	var __dedeqrcode_type='arc';
  	var __dedeqrcode_dir='{dede:global.cfg_basehost/}/plus';
//arr.push("<ins style=\"display:inline-table;border:none;margin:0;padding:0;position:relative;visibility:visible;width:100%\">");

var dedeqrcodeLink = document.getElementById('__dedeqrcode_'+__dedeqrcode_id);
dedeqrcodeLink.style.display = 'none';
var randNum = Math.floor(Math.random() * 2147483648).toString(36);
var __dedeqrcode_src = "\""+__dedeqrcode_dir+"/qrcode.php?id="+__dedeqrcode_aid+"&type="+__dedeqrcode_type+"\"";
arr.push("  <span id=\"__bfzInc_"+randNum+"\" style=\"display:block;border:none;margin:0;padding:0;position:relative;visibility:visible;width:100%\">");
arr.push("<iframe id=\"dede_qrcode_frame\" name=\"dede_qrcode_frame\" width=\"260\" height=\"280\" frameborder=\"0\" src="+__dedeqrcode_src+" marginwidth=\"0\" marginheight=\"0\" vspace=\"0\" hspace=\"0\" allowtransparency=\"true\" scrolling=\"no\" allowfullscreen=\"true\"></iframe>");
//arr.push("  </ins>");
arr.push("</span>");	
arr.push('</a></span></span></span></div>');
	

	
			arr.push('<div class="xl8 padding-top20 l-padding-top00"><p><a target="_blank" href="'+data[i].arcurl+'"><span class="text-22  l-text-18  bl"href="'+data[i].arcurl+'">'+data[i].title+'</span></a></p>');
			arr.push('<p class="text-left hidden-l "><a class="text-555" href="'+data[i].arcurl+'">'+data[i].info+'</a></p>');
			arr.push('<span class="bottom10 l-bottom-5 right10 ib height30  text-12"style="color:#999">');
			arr.push('<span title="'+data[i].stime+'">'+data[i].timeago+'</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
			arr.push('<span class="b-border-right"><span class="cursor icon-click">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+data[i].click+'&nbsp;&nbsp;&nbsp;</span>');
			
			arr.push('<span class="hidden-l" id="diggNum'+data[i].id+'">&nbsp;&nbsp;<a class=" text-bbb text-16"href="javascript:" onclick="javascript:postDigg(\'good\','+data[i].id+');"><span id="digg'+data[i].id+'" class="icon-heart2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;</a>'+data[i].goodpost+'</span>');	
			arr.push('<a class="hidden-l"href="/plus/stow.php?aid='+data[i].id+'&type=sys"title="收藏" target="_blank">&nbsp;&nbsp;<span class="border-right"></span>&nbsp;&nbsp;&nbsp;<span class="icon-star2 cursor ib height22 width22"> &nbsp;&nbsp;&nbsp;&nbsp;</span></a>');
			arr.push('</span>');
			
			arr.push('</div></div>');}
		$('#'+toid).append(arr.join(''));
	
		loadConfig.load_num = rs.load_num;
		if(total<page*loadConfig.pagesize || page> loadConfig.load_num){
			//$('#'+toid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+toid+'data">没有了!</a></p>');
		$("#"+toid+"data").html('没有了!');
		}else{
		
			//$('#'+toid).append('<p class="text-center margin-top"><a href="javascript:" class="button radius-rounded border-main width-20"id="'+toid+'data">加载更多</a></p>');
		}
		
		 eval(toid+"page  ++;"); 
	}
	
	add_winxin();
	add_share();
}
$("#alldata").click(function() {
loadMoreApply(0,1,'all');//all
});
$("#shdata").click(function() {
loadMoreApply(1,1,'sh');//商会
//$(this).parent('p').remove();
});
$(document).ready(function(){
add_winxin();
add_share();
});

function add_winxin(){
	 $("#slideTxtBox-bd #list").hover(function() {
$(this).find("#shares").show();
},function(){
$(this).find("#shares").hide();
});
}

function add_share(){
$("#list .wx-textshare").hover(function() {
$(this).find("#dede_qrcode_frame").show();
},function(){
$(this).find("#dede_qrcode_frame").hide();
});	
}

</script>

 

三,修改,plus/list.php 在require_once(dirname(__FILE__)."/../include/common.inc.php"); 

的下面增加一段

if(isset($_GET['ajax'])){
	 $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID
	 $orderby = isset($_GET['orderby']) ? intval($_GET['orderby']): 1;
	 //print_r($orderby);exit;
	 //1id排,2hot排序
  $page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
  $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 10;//每页多少条,也就是一次加载多少条数据
  $start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
  
  $ntime2 = gmmktime(0, 0, 0, gmdate('m'), gmdate('d'), gmdate('Y'));
            $limitday = $ntime2 - (40 * 24 * 3600);//40天内热文
            $orwheres = " a.senddate > $limitday ";
			
  //$typesql = $typeid ? " WHERE typeid=$typeid" : '';
  
  if($orderby==1){//id降序
    $typesql = $typeid ? " WHERE typeid=$typeid" : '';
  } else{//hot排序
	  
	$typesql = $typeid ? " WHERE typeid=".$typeid." and ".$orwheres : " WHERE ".$orwheres;
  
   }

//这个是用于首页实现瀑布流加载,
//因为首页加载数据是无需分类的,所以要加以判断,如果无需
   $total_sql = "SELECT COUNT(id) as num FROM `#@__archives`  $typesql ";
  $temp = $dsql->GetOne($total_sql);
  $total = 0;//数据总数
  $load_num =0;
  if(is_array($temp)){
    $load_num= round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了
    $total = $temp['num'];
  }
  
  
            
     
		
		
  if($orderby==1){//新
  $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
        t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
FROM `#@__archives` as a JOIN `#@__arctype` AS t ON a.typeid=t.id    $typesql ORDER BY id DESC LIMIT $start,$pagesize";
}else{//热门



	$sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
        t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
FROM `#@__archives` as a JOIN `#@__arctype` AS t ON a.typeid=t.id    $typesql ORDER BY click DESC LIMIT $start,$pagesize";
	}
//echo "$sql";exit;
   $dsql->SetQuery($sql);
    $dsql->Execute('list');
   $statu = 0;//是否有数据,默认没有数据
   $data = array();
     $index = 0;
while($row = $dsql->GetArray("list")){
    $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],250);
     $row['id'] =  $row['id'];
	 
     $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
$row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);

$row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
   
  if($row['litpic'] == '-' || $row['litpic'] == ''){
      $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
   }
   
    if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){
    $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
   }
  $row['picname'] = $row['litpic'];//缩略图
  $row['writer'] = $row['writer'];
  $row['click'] = $row['click'];
   $row['stime'] = GetDateMK($row['pubdate']);
  $row['timeago']= timeago($row['pubdate']);
  $row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链
  $row['fulltitle'] = $row['title'];//完整的标题
  $row['shorttitle'] = $row['shorttitle'];//副标题
  $row['title'] = cn_substr($row['title'], 60);//截取后的标题
   $data[$index] = $row;
   $index++;
}
if(!empty($data)){
$statu = 1;//有数据
}
$result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
echo json_encode($result);//返回数据
exit();
}

 

© 著作权归作者所有

共有 人打赏支持
越野小生
粉丝 3
博文 113
码字总数 32174
作品 0
杨浦
DEDECMS教程:首页实现分页的两种方法

今天的DEDECMS教程中,主要讨论首页实现分页的两种方法。   有时在做织梦模板的时候需要实现首页分页效果,但是织梦本身首页是不带分页功能的,那如何实现织梦首页分页呢?有两种办法可以实...

越野小生
2016/04/24
65
0
织梦内容页调用栏目内容标签{dede:field.content/}

在织梦首页或内容详情页没法直接调用栏目内容.即{dede:field.content/} 这个标签为栏目专用标签.下面的方法可实现内容页调用. 如果要在首页等页面显示,~typeid~可以替换为具体的栏目id.如果多...

越野小生
2016/08/28
8
0
织梦CMS如何启用手机版二级域名

提到织梦CMS,站长朋友们一定不会陌生,作为一款简单、实用的PHP开源网站管理系统,曾经深得广大网站爱好者的喜爱,目前还有不少知名的网站采用织梦CMS。 随着移动互联网的兴起,越来越多的网...

english0523
03/16
0
0
简单CMS

主要修改: 1)增加文章模块,文章列表显示在首页和单品页中; 2)增加店铺模块,店铺显示在首页和瀑布流页中; 3)增加网站地图模块; 4)增加sitemap模块; 5)增加第三方淘宝登录功能; ...

简单CMS
2012/12/25
3.8K
0
小猪的Python学习之旅 —— 9.爬虫实战:爬取花瓣网的小姐姐

引言: 关于爬小姐姐的脚本示例,在我的Gayhub仓库:ReptileSomething 里已经有好几个了,基本都是没什么技术含量的,直接解析HTML拿到 图片的URL,然后下载,特别开一篇写爬取花瓣网的小姐姐...

coder_pig
07/11
0
0
企业网站到底应不应该用ajax加载内容呢?

这周再改版公司的网站,公司新招人的小弟在做HTML页面的时候把新闻中心、产品中心等栏目的多有内容都做在一个页面里头(就是把产品频道首页、产品列表页和产品内容也都做到了一个html里头,按...

岭南六少
2011/06/23
0
1
基于openjweb1.8+开发的中华女性素质教育基金会门户网站介绍

中华女性素质教育基金 门户网站用户手册 (基于OpenJWeb1.8+版本定制开发) OpenJWeb开发组 联系人:王先生 Email:baozhengw@163.com QQ:29803446 Msn:baozhengw999@hotmail.com 手机:13651070...

迷途d书童
2012/03/09
73
0
DEDE建站每日一课之首页调用单页内容

很多站长在套DEDE站的时候,可能一直被一个问题困惑,就是,如何将已经做成单页的栏目内容调用到首页来。 常用的需要调到首页来的单页内容,比如企业简介、联系我们等等内容,我们在首页可能...

鱼鱼安
2011/02/01
0
0
任侠/dedecms_jqm_template

dedecmsjqmtemplate dedecms织梦内容管理系统手机版模板,基于jquery mobile 开发 特性简介: 漂亮的界面、切换效果; 简单实现的上下文链接; 手势控制、文章页触控翻页; 菜单设置; 社交分...

任侠
2015/04/08
0
0
thinkPHP实现瀑布流的方法

thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 过期已备案域名,注册就能用!终身VIP会员,畅享源码下载织梦精美仿站,火热预定中! 本文实例讲述了thinkPHP实现瀑布流的方法。分享给大...

thinkyoung
2015/10/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部