帝國CMS自帶的內(nèi)容分頁標(biāo)簽為,在制作多終端模板的時(shí)候,在手機(jī)端就會(huì)顯得太長了,如果刪掉一些在電腦端又顯得太短。完美的方法是自定義一個(gè)分頁函數(shù),在對(duì)于新手朋友太難,這里織夢模板分享一個(gè)簡單的方法,利用JS來完成,不太完美但基本功能都能實(shí)現(xiàn)。
手機(jī)版大致效果是這樣

下面我們就來說說代碼,首先是模板代碼
<div class="contentpage"> <span class="pre">上一張</span> <b class="nub"></b> <span class="next">下一張</span> <div id="page"></div></div>
然后是JS
<script> var num = $("#page").find("em").text(); $(".nub").text(num); $(".pre").click(function(){ var url = $("#page").find("b").prev().attr("href"); if(url){ window.location.href=url; }else{ $(this).text("沒有了") } }) $(".next").click(function(){ var url = $("#page").find("b").next().attr("href"); if(url){ window.location.href=url; }else{ $(this).text("沒有了") } }) </script>最后是內(nèi)容分頁函數(shù)代碼,在/e/class/t_functions.php里面
//返回內(nèi)容分頁function sys_ShowTextPage($totalpage,$page,$dolink,$add,$type,$search=""){ global $fun_r,$public_r; if($totalpage==1) { return ''; } $page_line=$public_r['textpagelistnum']; $snum=2; //$totalpage=ceil($num/$line);//取得總頁數(shù) $firststr='<em>'.$page.'/'.$totalpage.'</em>'; //上一頁 if($page<>1) { $toppage='<a href="'.$dolink.$add[filename].$type.'">'.$fun_r['startpage'].'</a>'; $pagepr=$page-1; if($pagepr==1) { $prido=$add[filename].$type; } else { $prido=$add[filename].'_'.$pagepr.$type; } $prepage='<a href="'.$dolink.$prido.'">'.$fun_r['pripage'].'</a>'; } //下一頁 if($page!=$totalpage) { $pagenex=$page+1; $nextpage='<a href="'.$dolink.$add[filename].'_'.$pagenex.$type.'">'.$fun_r['nextpage'].'</a>'; $lastpage='<a href="'.$dolink.$add[filename].'_'.$totalpage.$type.'">'.$fun_r['lastpage'].'</a>'; } $starti=$page-$snum<1?1:$page-$snum; $no=0; for($i=$starti;$i<=$totalpage&&$no<$page_line;$i++) { $no++; if($page==$i) { $is_1="<b>"; $is_2="</b>"; } elseif($i==1) { $is_1='<a href="'.$dolink.$add[filename].$type.'">'; $is_2="</a>"; } else { $is_1='<a href="'.$dolink.$add[filename].'_'.$i.$type.'">'; $is_2="</a>"; } $returnstr.=''.$is_1.$i.$is_2; } $returnstr=$firststr.$toppage.$prepage.$returnstr.$nextpage.$lastpage; return $returnstr;}CSS代碼這里織夢模板就不分享了,大家可以根據(jù)自己的實(shí)際情況自己寫吧。
以上就是帝國CMS結(jié)合JS自定義手機(jī)端內(nèi)容分頁樣式的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)和解決疑問有所幫助,也希望大家多多支持武林網(wǎng)。新聞熱點(diǎn)
疑難解答
圖片精選