Molerose

织梦CMS列表分页自定义样式教程
前端的页面千变万化,分页的样式也是不例外的,虽然总共就那么点儿东西,但是很多人的写法不同,需要支持的样式也是不同的...
扫描右侧二维码阅读全文
23
2018/06

织梦CMS列表分页自定义样式教程

前端的页面千变万化,分页的样式也是不例外的,虽然总共就那么点儿东西,但是很多人的写法不同,需要支持的样式也是不同的,个人喜欢使用的一款前端框架是bootstrap框架,我们根据此框架的分页样式来自定义一款织梦的列表分页样式吧。


分页样式涉及到的文件修改

分页样式主要集成在了一个文件里面,全部的修改仅针对一个主要文件进行修改即可

文件路径:/include/arc.listview.class.php

调用代码说明

我们先来看下,原始的织梦分页调用是什么样子的

{dede:pagelist istitem="index,pre,next,end,option,info," listsize="5"/}

调用的内容:首页,上一页,下一页,末页,下拉跳转框,条数信息,页码个数,当然页码个数是默认携带的,所以上述调用并未表明页码个数的字段

如果有的字段是不需要的可以自行去除即可。

案例

下面我们以boostrap来进行讲解如何自定义分页样式

  • 打开主要文件以后查找 获取静态的分页列表 大概在文件的977行,因为我们使用的是生成静态的页面,所以我们调用的也是静态的分页列表。
  • 由于我们使用的是bootstrap前端框架,列表分页中不涉及到下拉跳转框这个样式(我自己也不喜欢用这个),我们可以选择去掉。
  • arc.listview.class.php文件中找到//option链接字样,并按照如下案例将其注释掉就好了。
// option链接
// $optionlist = '';

// $optionlen = strlen($totalpage);
// $optionlen = $optionlen*12 + 18;
// if($optionlen < 36) $optionlen = 36;
// if($optionlen > 100) $optionlen = 100;
// $optionlist = "<li><select name='sldd' style='width:{$optionlen}px' onchange='location.href=this.options[this.selectedIndex].value;'>\r\n";
// for($mjj=1;$mjj<=$totalpage;$mjj++)
// {
//     if($mjj==$this->PageNo)
//     {
//         $optionlist .= "<option value='".str_replace("{page}",$mjj,$tnamerule)."' selected>$mjj</option>\r\n";
//     }
//     else
//     {
//         $optionlist .= "<option value='".str_replace("{page}",$mjj,$tnamerule)."'>$mjj</option>\r\n";
//     }
// }
// $optionlist .= "</select></li>\r\n";
  • bootstrap前端框架中的分页结构展示
<ul class="pagination">
    <li class="disabled"><a href="#"><span>«</span></a></li>
    <li class="active"><a href="#">1 <span>(current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#"><span>»</span></a></li>
</ul>
  • 列表分页自定义样式,完整代码结构解析,记住,改的时候要细心得千万注意
/**
 *  获取静态的分页列表
 *
 * @access    public
 * @param     string  $list_len  列表宽度
 * @param     string  $list_len  列表样式
 * @return    string
**/
function GetPageListST($list_len,$listitem="index,end,pre,next,pageno")
{
    $prepage = $nextpage = '';
    $prepagenum = $this->PageNo-1;
    $nextpagenum = $this->PageNo+1;
    if($list_len=='' || preg_match("/[^0-9]/", $list_len))
    {
        $list_len=3;
    }
    $totalpage = ceil($this->TotalResult/$this->PageSize);
    if($totalpage<=1 && $this->TotalResult>0)
    {

        return "<li><a href=\"javascript:;\">Total <strong>1</strong> Page <strong>".$this->TotalResult."</strong> Records</a></li>\r\n";
        // 此处的原始样式为 <li><a href="javascript:;">Total <strong>1</strong> Page <strong> Records</a></li>
        // 此处为什么会在双引号前面使用反斜线呢:主要的作用其实是让双引号得到解析,让其最终编译成一个常规符号,而不至于印象程度代码
    }
    if($this->TotalResult == 0)
    {
        return "<li><a href=\"javascript:;\">Total <strong>0</strong> Page <strong>".$this->TotalResult."</strong> Records</a></li>\r\n";
        // 此处的原始样式为 <li><a href="javascript:;">Total <strong>0</strong> Page <strong> Records</a></li>
    }
    $purl = $this->GetCurUrl();
    $maininfo = "<li><a href=\"javascript:;\">Total <strong>{$totalpage}</strong> Page <strong>".$this->TotalResult."</strong> Records</a></li>\r\n";
    $tnamerule = $this->GetMakeFileRule($this->Fields['id'],"list",$this->Fields['typedir'],$this->Fields['defaultname'],$this->Fields['namerule2']);
    $tnamerule = preg_replace("/^(.*)\//", '', $tnamerule);

    //获得上一页和主页的链接
    if($this->PageNo != 1)
    {
        $prepage.="<li><a href='".str_replace("{page}",$prepagenum,$tnamerule)."' aria-label=\"Previous\"><span aria-hidden=\"true\">«</span></a></li>\r\n";
        //原始的样式结构: $indexpage="<li><a href='".str_replace("{page}",1,$tnamerule)."'>首页</a></li>\r\n";
    }
    else
    {
        $prepage="<li class=\"disabled\"><a href=\"javascript:;\" aria-label=\"Previous\"><span aria-hidden=\"true\">«</span></a></li>\r\n";
        //原始的样式结构:$indexpage="<li>首页</li>\r\n";
    }

    //下一页,未页的链接
    if($this->PageNo!=$totalpage && $totalpage>1)
    {
        $nextpage.="<li><a href='".str_replace("{page}",$nextpagenum,$tnamerule)."' aria-label=\"Next\"><span aria-hidden=\"true\">»</span></a></li>\r\n";
        //原始的样式结构:$endpage="<li><a href='".str_replace("{page}",$totalpage,$tnamerule)."'>末页</a></li>\r\n";
    }
    else
    {

        $nextpage="<li class=\"disabled\"><a href=\"javascript:;\" aria-label=\"Next\"><span aria-hidden=\"true\">»</span></a></li>\r\n";
        //原始的样式结构:$endpage="<li>末页</li>\r\n";
    }

    //option链接
    // $optionlist = '';

    // $optionlen = strlen($totalpage);
    // $optionlen = $optionlen*12 + 18;
    // if($optionlen < 36) $optionlen = 36;
    // if($optionlen > 100) $optionlen = 100;
    // $optionlist = "<li><select name='sldd' style='width:{$optionlen}px' onchange='location.href=this.options[this.selectedIndex].value;'>\r\n";
    // for($mjj=1;$mjj<=$totalpage;$mjj++)
    // {
    //     if($mjj==$this->PageNo)
    //     {
    //         $optionlist .= "<option value='".str_replace("{page}",$mjj,$tnamerule)."' selected>$mjj</option>\r\n";
    //     }
    //     else
    //     {
    //         $optionlist .= "<option value='".str_replace("{page}",$mjj,$tnamerule)."'>$mjj</option>\r\n";
    //     }
    // }
    // $optionlist .= "</select></li>\r\n";

    //获得数字链接
    $listdd="";
    $total_list = $list_len * 2 + 1;
    if($this->PageNo >= $total_list)
    {
        $j = $this->PageNo-$list_len;
        $total_list = $this->PageNo+$list_len;
        if($total_list>$totalpage)
        {
            $total_list=$totalpage;
        }
    }
    else
    {
        $j=1;
        if($total_list>$totalpage)
        {
            $total_list=$totalpage;
        }
    }
    for($j;$j<=$total_list;$j++)
    {
        if($j==$this->PageNo)
        {
            //$listdd.= "<li class=\"thisclass\">$j</li>\r\n";
            $listdd.= "<li class=\"active\"><a href=\"javascript:;\">$j <span class=\"sr-only\">(current)</span></a></li>\r\n";
        }
        else
        {
            $listdd.="<li><a href='".str_replace("{page}",$j,$tnamerule)."'>".$j."</a></li>\r\n";
        }
    }
    $plist = '';
    if(preg_match('/index/i', $listitem)) $plist .= $indexpage;
    if(preg_match('/pre/i', $listitem)) $plist .= $prepage;
    if(preg_match('/pageno/i', $listitem)) $plist .= $listdd;
    if(preg_match('/next/i', $listitem)) $plist .= $nextpage;
    if(preg_match('/end/i', $listitem)) $plist .= $endpage;
    if(preg_match('/option/i', $listitem)) $plist .= $optionlist;
    if(preg_match('/info/i', $listitem)) $plist .= $maininfo;
    
    return $plist;
}

备注: 更多的样式修改的方法还是一样的,方法终究只是方法,要创新还得自己要学会举一反三才行!

Last modification:June 23rd, 2018 at 03:10 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment