Heim >php教程 >php手册 >整合Booststrap分页样式和ThinkPHP分页类

整合Booststrap分页样式和ThinkPHP分页类

WBOY
WBOYOriginal
2016-06-07 11:44:381009Durchsuche

相信许多前端高手均能写出漂亮的分页样式,但haran觉得适当“拿来”一次也无妨。
先看效果。
整合Booststrap分页样式和ThinkPHP分页类
整合Booststrap分页样式和ThinkPHP分页类

分页类修改内容:只涉及到样子生成部分代码,在原来每个A链接前加了li,在返回的样式字符串前加UL,以适合Boostrap的css文件的定义。
Bootstrap的css文件基本保持原状,只是加了一个#lastspan的样式定义。
--------------------------------------------------------------------------------
pagination.css.pagination {<br>   margin: 20px 0;<br> }<br> .pagination ul {<br>   display: inline-block;<br>   list-style:none;<br>   *display: inline;<br>   /* IE7 inline-block hack */<br> <br>   *zoom: 1;<br>   margin-left: 0;<br>   margin-bottom: 0;<br>   -webkit-border-radius: 4px;<br>   -moz-border-radius: 4px;<br>   border-radius: 4px;<br>   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);<br>   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);<br>   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);<br> }<br> .pagination ul > li {<br>   display: inline;<br> }<br> .pagination ul > li > a,<br> .pagination ul > li > span,<br> .pagination #lastspan {<br>   float: left;<br>   padding: 4px 12px;<br>   line-height: 20px;<br>   text-decoration: none;<br>   background-color: #ffffff;<br>   border: 1px solid #dddddd;<br>   border-left-width: 0;<br> }<br> .pagination ul > li > a:hover,<br> .pagination ul > li > a:focus,<br> .pagination ul > .active > a,<br> .pagination ul > .active > span {<br>   background-color: #f5f5f5;<br> }<br> .pagination ul > .active > a,<br> .pagination ul > .active > span {<br>   color: #999999;<br>   cursor: default;<br> }<br> .pagination ul > .disabled > span,<br> .pagination ul > .disabled > a,<br> .pagination ul > .disabled > a:hover,<br> .pagination ul > .disabled > a:focus {<br>   color: #999999;<br>   background-color: transparent;<br>   cursor: default;<br> }<br> .pagination ul > li:first-child > a,<br> .pagination ul > li:first-child > span {<br>   border-left-width: 1px;<br>   -webkit-border-top-left-radius: 4px;<br>   -moz-border-radius-topleft: 4px;<br>   border-top-left-radius: 4px;<br>   -webkit-border-bottom-left-radius: 4px;<br>   -moz-border-radius-bottomleft: 4px;<br>   border-bottom-left-radius: 4px;<br> }<br> .pagination ul > li:last-child > a,<br> .pagination ul > li:last-child > span,<br> .pagination #lastspan {<br>   -webkit-border-top-right-radius: 4px;<br>   -moz-border-radius-topright: 4px;<br>   border-top-right-radius: 4px;<br>   -webkit-border-bottom-right-radius: 4px;<br>   -moz-border-radius-bottomright: 4px;<br>   border-bottom-right-radius: 4px;<br> }<br> .pagination-centered {<br>   text-align: center;<br> }<br> .pagination-right {<br>   text-align: right;<br> }<br> .pagination-large ul > li > a,<br> .pagination-large ul > li > span,<br> .pagination-large #lastspan{<br>   padding: 11px 19px;<br>   font-size: 17.5px;<br> }<br> .pagination-large ul > li:first-child > a,<br> .pagination-large ul > li:first-child > span {<br>   -webkit-border-top-left-radius: 6px;<br>   -moz-border-radius-topleft: 6px;<br>   border-top-left-radius: 6px;<br>   -webkit-border-bottom-left-radius: 6px;<br>   -moz-border-radius-bottomleft: 6px;<br>   border-bottom-left-radius: 6px;<br> }<br> .pagination-large ul > li:last-child > a,<br> .pagination-large ul > li:last-child > span,<br> .pagination-large #lastspan {<br>   -webkit-border-top-right-radius: 6px;<br>   -moz-border-radius-topright: 6px;<br>   border-top-right-radius: 6px;<br>   -webkit-border-bottom-right-radius: 6px;<br>   -moz-border-radius-bottomright: 6px;<br>   border-bottom-right-radius: 6px;<br> }<br> .pagination-mini ul > li:first-child > a,<br> .pagination-small ul > li:first-child > a,<br> .pagination-mini ul > li:first-child > span,<br> .pagination-small ul > li:first-child > span {<br>   -webkit-border-top-left-radius: 3px;<br>   -moz-border-radius-topleft: 3px;<br>   border-top-left-radius: 3px;<br>   -webkit-border-bottom-left-radius: 3px;<br>   -moz-border-radius-bottomleft: 3px;<br>   border-bottom-left-radius: 3px;<br> }<br> .pagination-mini ul > li:last-child > a,<br> .pagination-small ul > li:last-child > a,<br> .pagination-mini ul > li:last-child > span,<br> .pagination-small ul > li:last-child > span {<br>   -webkit-border-top-right-radius: 3px;<br>   -moz-border-radius-topright: 3px;<br>   border-top-right-radius: 3px;<br>   -webkit-border-bottom-right-radius: 3px;<br>   -moz-border-radius-bottomright: 3px;<br>   border-bottom-right-radius: 3px;<br> }<br> .pagination-small ul > li > a,<br> .pagination-small ul > li > span {<br>   padding: 2px 10px;<br>   font-size: 11.9px;<br> }<br> .pagination-mini ul > li > a,<br> .pagination-mini ul > li > span {<br>   padding: 0 6px;<br>   font-size: 10.5px;<br> }-------------------------------------------------------------------------------
Page.class.php<?php <br /> // +----------------------------------------------------------------------<br> // | ThinkPHP [ WE CAN DO IT JUST THINK IT ]<br> // +----------------------------------------------------------------------<br> // | Copyright (c) 2009 http://thinkphp.cn All rights reserved.<br> // +----------------------------------------------------------------------<br> // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )<br> // +----------------------------------------------------------------------<br> // | Author: liu21st <liu21st><br> // |         lanfengye <zibin_5257><br> // +----------------------------------------------------------------------<br> <br> class Page {<br>     <br>     // 分页栏每页显示的页数<br>     public $rollPage = 5;<br>     // 页数跳转时要带的参数<br>     public $parameter  ;<br>     // 分页URL地址<br>     public $url     =   '';<br>     // 默认列表每页显示行数<br>     public $listRows = 20;<br>     // 起始行数<br>     public $firstRow    ;<br>     // 分页总页面数<br>     protected $totalPages  ;<br>     // 总行数<br>     protected $totalRows  ;<br>     // 当前页数<br>     protected $nowPage    ;<br>     // 分页的栏的总页数<br>     protected $coolPages   ;<br>     // 分页显示定制<br>     protected $config  =    array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'<span>最后一页</span>','theme'=>'<ul> <li><span> %totalRow% %header% %nowPage%/%totalPage% 页</span></li> %upPage% %downPage% %first%  %prePage%  %linkPage%  %nextPage% %end%</ul>');<br>     // 默认分页变量名<br>     protected $varPage;<br> <br>     /**<br>      * 架构函数<br>      * @access public<br>      * @param array $totalRows  总的记录数<br>      * @param array $listRows  每页显示记录数<br>      * @param array $parameter  分页跳转的参数<br>      */<br>     public function __construct($totalRows,$listRows='',$parameter='',$url='') {<br>         $this->totalRows    =   $totalRows;<br>         $this->parameter    =   $parameter;<br>         $this->varPage      =   C('VAR_PAGE') ? C('VAR_PAGE') : 'p' ;<br>         if(!empty($listRows)) {<br>             $this->listRows =   intval($listRows);<br>         }<br>         $this->totalPages   =   ceil($this->totalRows/$this->listRows);     //总页数<br>         $this->coolPages    =   ceil($this->totalPages/$this->rollPage);<br>         $this->nowPage      =   !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;<br>         if($this->nowPage             $this->nowPage  =   1;<br>         }elseif(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {<br>             $this->nowPage  =   $this->totalPages;<br>         }<br>         $this->firstRow     =   $this->listRows*($this->nowPage-1);<br>         if(!empty($url))    $this->url  =   $url; <br>     }<br> <br>     public function setConfig($name,$value) {<br>         if(isset($this->config[$name])) {<br>             $this->config[$name]    =   $value;<br>         }<br>     }<br> <br>     /**<br>      * 分页显示输出<br>      * @access public<br>      */<br>     public function show() {<br> <br>         if(0 == $this->totalRows) return '';<br>         $p              =   $this->varPage;<br>         $nowCoolPage    =   ceil($this->nowPage/$this->rollPage);<br> <br>         // 分析分页参数<br>         if($this->url){<br>             $depr       =   C('URL_PATHINFO_DEPR');<br>             $url        =   rtrim(U('/'.$this->url,'',false),$depr).$depr.'__PAGE__';<br>         }else{<br>             if($this->parameter && is_string($this->parameter)) {<br>                 parse_str($this->parameter,$parameter);<br>             }elseif(is_array($this->parameter)){<br>                 $parameter      =   $this->parameter;<br>             }elseif(empty($this->parameter)){<br>                 unset($_GET[C('VAR_URL_PARAMS')]);<br>                 $var =  !empty($_POST)?$_POST:$_GET;<br>                 if(empty($var)) {<br>                     $parameter  =   array();<br>                 }else{<br>                     $parameter  =   $var;<br>                 }<br>             }<br>             $parameter[$p]  =   '__PAGE__';<br>             $url            =   U('',$parameter);<br>         }<br>         //上下翻页字符串<br>         $upRow          =   $this->nowPage-1;<br>         $downRow        =   $this->nowPage+1;<br>         if ($upRow>0){<br>             $upPage     =    "<li><a>".$this->config['prev']."</a></li>";<br>         }else{<br>             $upPage     =    '';<br>         }<br> <br>         if ($downRow totalPages){<br>             $downPage   =   "<li><a>".$this->config['next']."</a></li>";<br>         }else{<br>             $downPage   =   '';<br>         }<br>         //  >><br>         if($nowCoolPage == 1){<br>             $theFirst   =   '';<br>             $prePage    =   '';<br>         }else{<br>             $preRow     =   $this->nowPage-$this->rollPage;<br>             $prePage    =   "<li><a>上".$this->rollPage."页</a></li>";<br>             $theFirst   =   "<li><a>".$this->config['first']."</a></li>";<br>         }<br>         if($nowCoolPage == $this->coolPages){<br>             $nextPage   =   '';<br>             $theEnd     =   '';<br>         }else{<br>             $nextRow    =   $this->nowPage+$this->rollPage;<br>             $theEndRow  =   $this->totalPages;<br>             $nextPage   =   "<li><a>下".$this->rollPage."页</a></li>";<br>             $theEnd     =   "<a>".$this->config['last']."</a>";<br>         }<br>         // 1 2 3 4 5<br>         $linkPage = "";<br>         for($i=1;$irollPage;$i++){<br>             $page       =   ($nowCoolPage-1)*$this->rollPage+$i;<br>             if($page!=$this->nowPage){<br>                 if($pagetotalPages){<br>                     $linkPage .= "<li><a>".$page."</a></li>";<br>                 }else{<br>                     break;<br>                 }<br>             }else{<br>                 if($this->totalPages != 1){<br>                     $linkPage .= "<li><span>".$page."</span></li>";<br>                 }<br>             }<br>         }<br>         $pageStr     =   str_replace(<br>             array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),<br>             array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);<br>         return $pageStr;<br>     }<br> <br> }</zibin_5257></liu21st>------------------------------------------------------------------------------
模板中使用:<div>{$page}</div> //基本样式<br> <div>{$page}</div>//大号数字样式

AD:真正免费,域名+虚机+企业邮箱=0元

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn