How to solve the style of page turning button of Dedecms list pagelist

Dedecms list pagelist page turning button style how to solve?

Dedecms list pagelist The solution to the homepage and last page style of the page turning button

Recommended learning: 梦Weavercms

Dedecms list The page turning button uses {dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}After generating the html, the first page of the list page is

<li >首页</li>
<li class="thisclass">1</li>
<li><a href=&#39;news_2.html&#39;>2</a></li>
<li><a href=&#39;news_3.html&#39;>3</a></li>
<li><a href=&#39;news_2.html&#39;>下一页</a></li>
<li><a href=&#39;news_3.html&#39;>末页</a></li>

the last page It is:

<li><a href=&#39;news_1.html&#39;>首页</a></li>
<li><a href=&#39;news_2.html&#39;>上一页</a></li>
<li><a href=&#39;news_1.html&#39;>1</a></li>
<li><a href=&#39;news_2.html&#39;>2</a></li>
<li class="thisclass">3</li>
<li >末页</li>

The CSS style sheet of the default template:

.dede_pages{
}
.dede_pages ul{
float:left;
padding:12px 0px 12px 16px;
}
.dede_pages ul li{
float:left;
font-family:Tahoma;
line-height:17px;
margin-right:6px;
border:1px solid #E9E9E9;
}
.dede_pages ul li a{
float:left;
padding:2px 4px 2px;
color:#555;
display:block;
}
.dede_pages ul li a:hover{
color:#690;
text-decoration:none;
padding:2px 4px 2px;
}
.dede_pages ul li.thisclass,
.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{
background-color:#F8F8F8;
padding:2px 4px 2px;
font-weight:bold;
}

You can see that ".dede_pages ul li a" and ".dede_pages ul li.thisclass" both have padding: 2px 4px 2px; Attribute but ".dede_pages ul li" does not. When ".dede_pages ul li" does not have the padding:2px 4px 2px; attribute, the two buttons

Home Page

and

Last Page

will be smaller than other buttons. Small, think about how ugly this situation is.

The following will provide two solutions to the above problems

The first method is solved through CSS. This solution is not to control the a tag and only add styles to the li. The code is as follows:

.dede_pages ul{
}
.dede_pages ul li{
float:left;
height:18px;
line-height:18px;
padding:4px 10px;
margin-right:5px;
border:1px #b9cdff solid;
}
.dede_pages .thisclass{
background:#e3ebfe;
}

You can see that the code is very concise, but it is not very good for the user experience. It should be because the current button is displayed by li instead of a, so when the user clicks on the button, it will If you don't click on the text, you don't click on it. For a better user experience we need another solution.

The second method is to modify the dede:pagelist related file arc.listview.class.php in the include folder:

Open arc.listview.class.php and find the following code:

//获得上一页和主页的链接
        if($this->PageNo != 1)
        {
            $prepage.="<li><a href=&#39;".str_replace("{page}",$prepagenum,$tnamerule)."&#39;>上一页</a></li>rn";
            $indexpage="<li><a href=&#39;".str_replace("{page}",1,$tnamerule)."&#39;>首页</a></li>rn";
        }
        else
        {
            $indexpage="<li >首页</li>rn";
        }
        //下一页,未页的链接
        if($this->PageNo!=$totalpage && $totalpage>1)
        {
            $nextpage.="<li><a href=&#39;".str_replace("{page}",$nextpagenum,$tnamerule)."&#39;>下一页</a></li>rn";
            $endpage="<li><a href=&#39;".str_replace("{page}",$totalpage,$tnamerule)."&#39;>末页</a></li>rn";
        }
        else
        {
            $endpage="<li >末页</li>rn";
        }

Modify $indexpage="

Homepage

rn";$endpage="

Last Page

rn"; to $indexpage="< ;li class="thisclass">Homepagern";$endpage="

Last page

rn";After modification{dede:pagelist listitem ="index,end,pre,next,pageno" listsize="10"/}The generated html code is as follows:

<li class="thisclass">首页</li>
<li class="thisclass">1</li>
<li><a href=&#39;news_2.html&#39;>2</a></li>
<li><a href=&#39;news_3.html&#39;>3</a></li>
<li><a href=&#39;news_2.html&#39;>下一页</a></li>
<li><a href=&#39;news_3.html&#39;>末页</a></li>

The second method is simpler and increases the user experience

PS: Using the second method, there is no need to modify the CSS file.

The above is the detailed content of How to solve the style of page turning button of Dedecms list pagelist. For more information, please follow other related articles on the PHP Chinese website!