dede二次开发教程之列表页顶、踩效果.docVIP

DEDECMS列表页实现无刷新顶、踩效果： By 痞子 最终效果： 需求： 1. 列表页里面的每条信息对应一个顶和踩的按钮，然后实现javascript效果，点击后不刷新当前页面就改变数值。 右侧最火、最热的列表信息块，或者是一些用户列表，要求也有如上顶、踩的功能。 3. 修改内容页顶踩的样式。 分析: 需求1和需求2其实原理一模一样，只是需求不一样而言，一些对dede不太熟悉的用户也就别大惊小怪了。 原理浅析： 实现无刷新顶、踩效果，其实就是借用javascript的ajax技术，以及javascript对文档的操作，通过ajax调用dede系统里面的plus目录下的php文件，然后返回一个参数值或者html代码（这一过程在浏览器后台执行，不刷新当前页面，所以谓之：无刷新技术），然后javascript处理获得的值或html代码在前台进行修改，然后显示。 提示：通过分析dede内容页的顶踩技术来看其实现的原理，然后模仿这个原理来实现列表页的顶踩效果。 步骤： 第一步、在需要实现效果的列表模板页添加顶、踩标签代码，比如修改list_article.htm； {dede:list pagesize=15} lidiv class=share fr span id=diggNum[field:id/] a id=unlike class=dig href=javascript: onclick=javascript:postDigg(bad,[field:id/])踩一下 span class=count(span[field:badpost/]/span)/span/a a id=love class=dig href=javascript: onclick=javascript:postDigg(good,[field:id/])喜欢 span class=count(span[field:goodpost/]/span)/span/a /span /div [field:wbname/] /li {/dede:list} 注：红色标记的代码十分必要，而且必须和第二步里面的javascript代码一一对应，否则没有效果。除此之外，为了更好地看到效果，将此处代码粘贴到列表页里面自行调整缩进。 第二步、在列表页head/head标签里引用根目录下include文件夹里的dedeajax2.js，然后添加如下javascript代码，其实这段代码是来自内容页的，只是稍作修改，主要是红色部分代码的修改，因为它必须和第一步里面的红色代码部分一一对应； script language=javascript type=text/javascript src={dede:global.cfg_cmsurl/}/include/dedeajax2.js/script script language=javascript type=text/javascript function postDigg(ftype,aid) { var taget_obj = document.getElementById(diggNum+aid); var saveid = GetCookie(diggid); if(saveid != null) { var saveids = saveid.split(,); var hasid = false; saveid = ; j = 1; for(i=saveids.length-1;i=0;i--) { if(saveids[i]==aid hasid) continue; else { if(saveids[i]==aid !hasid) hasid = true; saveid += (saveid== ? saveids[i] : ,+saveids[i]); j++; if(j==20 hasid) break; if(j==19 !hasid) break; } } if(hasid) { alert(您已经顶过该帖，请不要重复顶帖 ！); return; } else saveid += ,+aid; SetCookie(diggid,saveid,1); } else { SetCookie(diggid,aid,1); } /*此处是调用dedeajax2.js文件里面的ajax类，实现无刷新数据的处理 */ myajax =