返回介绍

分页

发布于 2019-05-26 16:28:20 字数 2159 浏览 856 评论 0 收藏 0

轻松创建一个美观的分页导航来浏览网页。

用法

分页组件由类似按钮风格的链接并排排列组成。

概述
.uk-pagination将这个类添加到一个 <ul> 元素,定义分页导航组件。使用 <a> 元素作为分页导航列表中的项目。
.uk-active将这个类添加到一个列表项,对其应用选中的状态,使用 <span> 替代 <a> 元素。
.uk-disabled将这个类添加到一个列表项,对其应用禁用状态,使用 <span> 替代 <a> 元素。

要应用一个无样式的省略号,只需使用 <span> 来替代 <a> 元素。

<ul class="uk-pagination">
    <li><a href="">...</a></li>
    <li class="uk-active"><span>...</span></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><span>...</span></li>
</ul>

对齐修饰类

向页码添加 .uk-pagination-left.uk-pagination-right 类使其向左或者向右对齐。

<ul class="uk-pagination uk-pagination-left">
    <li>...</li>
</ul>
<ul class="uk-pagination uk-pagination-right">
    <li>...</li>
</ul>

上一页与下一页

创建一个简单上一页和下一页分页导航是非常容易的。只需添加 .uk-pagination-previous.uk-pagination-next 类到一个 <li> 元素,其向左或者向右对齐。

<li class="uk-pagination-previous"><a href="">...</a></li>
<li class="uk-pagination-next"><a href="">...</a></li>

带图标的分页导航

使用 图标组件 中的图标增强分页导航效果。添加一个 .uk-icon-* 类到分页导航链接里的 <i><span> 元素中。

<li><a href=""><i class="uk-icon-angle-double-left"></i></a></li>
<li><a href=""><i class="uk-icon-angle-double-right"></i></a></li>

JavaScript

你可以应用附加组件中的分页组件来自动计算页码,例如在由Ajax支持的列表视图中触发一个事件,动态地加载新的列表项。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文