相信许多前端高手均能写出漂亮的分页样式,但haran觉得适当“拿来”一次也无妨。
先看效果。
分页类修改内容:只涉及到样子生成部分代码,在原来每个a链接前加了li,在返回的样式字符串前加ul,以适合boostrap的css文件的定义。
bootstrap的css文件基本保持原状,只是加了一个#lastspan的样式定义。
--------------------------------------------------------------------------------
pagination.css.pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
list-style:none;
*display: inline;
/* ie7 inline-block hack */
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination ul > li {
display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span,
.pagination #lastspan {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
color: #999999;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: #999999;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span,
.pagination #lastspan {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span,
.pagination-large #lastspan{
padding: 11px 19px;
font-size: 17.5px;
}
.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span,
.pagination-large #lastspan {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
.pagination-mini ul > li:first-child > a,
.pagination-small ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > span {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.pagination-mini ul > li:last-child > a,
.pagination-small ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > span {
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
padding: 2px 10px;
font-size: 11.9px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
padding: 0 6px;
font-size: 10.5px;
}-------------------------------------------------------------------------------
page.class.php'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalrow% %header% %nowpage%/%totalpage% 页 %uppage% %downpage% %first% %prepage% %linkpage% %nextpage% %end%');
// 默认分页变量名
protected $varpage;
/**
* 架构函数
* @access public
* @param array $totalrows 总的记录数
* @param array $listrows 每页显示记录数
* @param array $parameter 分页跳转的参数
*/
public function __construct($totalrows,$listrows='',$parameter='',$url='') {
$this->totalrows = $totalrows;
$this->parameter = $parameter;
$this->varpage = c('var_page') ? c('var_page') : 'p' ;
if(!empty($listrows)) {
$this->listrows = intval($listrows);
}
$this->totalpages = ceil($this->totalrows/$this->listrows); //总页数
$this->coolpages = ceil($this->totalpages/$this->rollpage);
$this->nowpage = !empty($_get[$this->varpage])?intval($_get[$this->varpage]):1;
if($this->nowpage $this->nowpage = 1;
}elseif(!empty($this->totalpages) && $this->nowpage>$this->totalpages) {
$this->nowpage = $this->totalpages;
}
$this->firstrow = $this->listrows*($this->nowpage-1);
if(!empty($url)) $this->url = $url;
}
public function setconfig($name,$value) {
if(isset($this->config[$name])) {
$this->config[$name] = $value;
}
}
/**
* 分页显示输出
* @access public
*/
public function show() {
if(0 == $this->totalrows) return '';
$p = $this->varpage;
$nowcoolpage = ceil($this->nowpage/$this->rollpage);
// 分析分页参数
if($this->url){
$depr = c('url_pathinfo_depr');
$url = rtrim(u('/'.$this->url,'',false),$depr).$depr.'__page__';
}else{
if($this->parameter && is_string($this->parameter)) {
parse_str($this->parameter,$parameter);
}elseif(is_array($this->parameter)){
$parameter = $this->parameter;
}elseif(empty($this->parameter)){
unset($_get[c('var_url_params')]);
$var = !empty($_post)?$_post:$_get;
if(empty($var)) {
$parameter = array();
}else{
$parameter = $var;
}
}
$parameter[$p] = '__page__';
$url = u('',$parameter);
}
//上下翻页字符串
$uprow = $this->nowpage-1;
$downrow = $this->nowpage+1;
if ($uprow>0){
$uppage = .$this->config['prev'].;
}else{
$uppage = '';
}
if ($downrow totalpages){
$downpage = .$this->config['next'].;
}else{
$downpage = '';
}
// >>
if($nowcoolpage == 1){
$thefirst = '';
$prepage = '';
}else{
$prerow = $this->nowpage-$this->rollpage;
$prepage = 上.$this->rollpage.页;
$thefirst = .$this->config['first'].;
}
if($nowcoolpage == $this->coolpages){
$nextpage = '';
$theend = '';
}else{
$nextrow = $this->nowpage+$this->rollpage;
$theendrow = $this->totalpages;
$nextpage = 下.$this->rollpage.页;
$theend = .$this->config['last'].;
}
// 1 2 3 4 5
$linkpage = ;
for($i=1;$irollpage;$i++){
$page = ($nowcoolpage-1)*$this->rollpage+$i;
if($page!=$this->nowpage){
if($pagetotalpages){
$linkpage .= .$page.;
}else{
break;
}
}else{
if($this->totalpages != 1){
$linkpage .= .$page.;
}
}
}
$pagestr = str_replace(
array('%header%','%nowpage%','%totalrow%','%totalpage%','%uppage%','%downpage%','%first%','%prepage%','%linkpage%','%nextpage%','%end%'),
array($this->config['header'],$this->nowpage,$this->totalrows,$this->totalpages,$uppage,$downpage,$thefirst,$prepage,$linkpage,$nextpage,$theend),$this->config['theme']);
return $pagestr;
}
}------------------------------------------------------------------------------
模板中使用:{$page}
//基本样式
{$page}
//大号数字样式
ad:真正免费,域名+虚机+企业邮箱=0元