Digg.com 样式的分页导航条
这个分页条模仿了 digg.com 的样式,也演示了如何使用自定义的 WebControls。安装
下载附件:Pagernav.php,放到一个空白目录,例如 APP/WebControls。
然后修改应用程序设置 webControlsExtendsDir 指向该目录。
使用
在控制器中添加类似下面的代码:
复制内容到剪贴板
上述代码最关键的一行就是 $pager->getPagerData(),代码:
// 分页
FLEA::loadHelper('pager');
$pager = new FLEA_Helper_Pager($tableProducts, $currentPage, $pageSize);
*
// 准备模板需要的数据
$viewdata = array(
'rowset' => $pager->findAll(),
'pagerData' => $pager->getPagerData(), // pagerData 用于 PagerNav 控件
);
*
// 显示模板
$this->_executeView('products_list.html', $viewdata);
FLEA::loadHelper('pager');
$pager = new FLEA_Helper_Pager($tableProducts, $currentPage, $pageSize);
*
// 准备模板需要的数据
$viewdata = array(
'rowset' => $pager->findAll(),
'pagerData' => $pager->getPagerData(), // pagerData 用于 PagerNav 控件
);
*
// 显示模板
$this->_executeView('products_list.html', $viewdata);
必须将该行代码获取的结果传递到模板中。
接下来,在模板中用下列代码:
复制内容到剪贴板
代码:
// 以 smarty 为例
{{ webcontrol type="pagernav" name="pagenav" pager=$pagerData controller="Products" action="List" }}
这里面的 $pagerData 就是控制器中用 $pager->getPagerData() 获得的数据。
{{ webcontrol type="pagernav" name="pagenav" pager=$pagerData controller="Products" action="List" }}
这里面的 $pagerData 就是控制器中用 $pager->getPagerData() 获得的数据。
最后,加上 CSS 样式表:
复制内容到剪贴板
转自:http://www.fleaphp.org/bbs/viewthread.php?tid=1299
最终看到的效果如下,还不错吧(点击放大):ul#pagenav {
font-size: 12px;
font-weight: bold;
list-style: none;
margin: 0px;
padding: 0px;
}
#pagenav li {
list-style: none;
background-color: #fff;
margin: 0px;
display: block;
float: left;
margin-left: 2px;
margin-right: 2px;
}
#pagenav li.disabled {
border: 1px solid #DDDDDD;
padding: 2px 6px 2px 6px;
color: #ccc;
}
#pagenav li.current {
border: 1px solid #2E6AB1;
padding: 2px 6px 2px 6px;
background-color: #2E6AB1;
color: #fff;
}
#pagenav li.none {
border: 1px none;
padding: 2px 6px 2px 6px;
}
#pagenav li a {
border: 1px solid #9AAFE5;
padding: 2px 6px 2px 6px;
display: block;
text-decoration: none;
color: #105CB6;
}
#pagenav li a:hover {
border: 1px solid #2E6AB1;
color: #000;
}
font-size: 12px;
font-weight: bold;
list-style: none;
margin: 0px;
padding: 0px;
}
#pagenav li {
list-style: none;
background-color: #fff;
margin: 0px;
display: block;
float: left;
margin-left: 2px;
margin-right: 2px;
}
#pagenav li.disabled {
border: 1px solid #DDDDDD;
padding: 2px 6px 2px 6px;
color: #ccc;
}
#pagenav li.current {
border: 1px solid #2E6AB1;
padding: 2px 6px 2px 6px;
background-color: #2E6AB1;
color: #fff;
}
#pagenav li.none {
border: 1px none;
padding: 2px 6px 2px 6px;
}
#pagenav li a {
border: 1px solid #9AAFE5;
padding: 2px 6px 2px 6px;
display: block;
text-decoration: none;
color: #105CB6;
}
#pagenav li a:hover {
border: 1px solid #2E6AB1;
color: #000;
}
转自:http://www.fleaphp.org/bbs/viewthread.php?tid=1299