eyoucms详情页显示分页的方法记得是内容页哦【易优技巧】教程
分享易优内容页 分页方法,记得是内容文章页里面的分页哦,有的文章很长 很多,想用分页来实现的话 就能一个页面没有那么长了,这个时候用分页来实现就可以了。具体的方法如下:
js 部分:
$(document).ready(function(){ var show_per_page = 5; var number_of_items = $('#content').children().size(); var number_of_pages = Math.ceil(number_of_items/show_per_page); $('#current_page').val(0); $('#show_per_page').val(show_per_page); var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>'; var current_link = 0; while(number_of_pages > current_link){ navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>'; current_link++; } navigation_html += '<a class="next_link" href="javascript:next();">Next</a>'; $('#page_navigation').html(navigation_html); $('#page_navigation .page_link:first').addClass('active_page'); $('#content').children().css('display', 'none'); //and show the first n (show_per_page) elements $('#content').children().slice(0, show_per_page).css('display', 'block'); }); function previous(){ new_page = parseInt($('#current_page').val()) - 1; if($('.active_page').prev('.page_link').length==true){ go_to_page(new_page); } } function next(){ new_page = parseInt($('#current_page').val()) + 1; if($('.active_page').next('.page_link').length==true){ go_to_page(new_page); } } function go_to_page(page_num){ var show_per_page = parseInt($('#show_per_page').val()); start_from = page_num * show_per_page; end_on = start_from + show_per_page; $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block'); $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page'); $('#current_page').val(page_num); }
文章代码:
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
<div id='content'>
<p></p>
<p></p>
<p></p>
<p></p>
5个P为一页
</div>
<div id='page_navigation'></div>
不是原创,感谢群友分享
发表评论

小秋同学
不予博名 做好自己
热门文章
简介从eyoucms这个产品的发布到今天的正式版已经更新到版本1.4.0,不过后台页面只能自己看到,...
不知道什么时候开始,百度分享官网挂了,导致后来使用主题的客户无法使用百度分享,今天把自用的代码分享出...
JS禁止查看网页源代码的简单实现方法在项目开发中有时会遇到不想让别人轻易查看到网站的源代码信息,我们...
你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下v...
以增加仿宋,仿宋_GB2312两种字体为例,打publicpluginsUeditorlangzh-...
有时候 分段做个小化线点缀下 也是挺好看的 CSS 字段属性说明:border-top: 1px ...