帝国CMS结合JS自定义手机端内容分页样式

帝国CMS结合JS自定义手机端内容分页样式

帝国CMS自带的内容分页标签为[!–page.url–],在制作多终端模板的时候,[!–page.url–]在手机端就会显得太长了,如果删掉一些[!–page.url–]在电脑端又显得太短。

完美的方法是自定义一个分页函数,在对于新手朋友太难,这里精准像素分享一个简单的方法,利用JS来完成,不太完美但基本功能都能实现。

手机版大致效果是这样:

下面来说说代码,首先是模板代码:

<div
class=
“contentpage”>

        <span
class=
“pre”>上一张</span>

        <b
class=
“nub”></b>

        <span
class=
“next”>下一张</span>

        <div id=
“page”>[!–page.url–]</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>

 

最后是内容分页函数代码,在/e/class/t_functions.php里面:


//返回内容分页

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);//取得总页数

        $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样式代码,就根据自己的需要自行书写!

分享到 :
相关推荐