CSS Pagination Links

最新推荐文章于 2022-06-18 19:16:36 发布
最新推荐文章于 2022-06-18 19:16:36 发布
阅读量153 收藏
点赞数
原文链接：http://www.cnblogs.com/SoulStore/archive/2008/08/01/1258280.html
版权

CSS Pagination Links

Author: Dynamic Drive

Updated: Aug 30th, 07. Fixed issue in IE7 where select links appear too close together.

Inspired by the pagination interface you see at the footer of Digg.com, this is our version of a CSS pagination links bar, digg style. The links are list based for a cleaner and more semantically approach (in our opinion). The bar itself can easily be left or right aligned, by modifying the "text-align" attribute.

Demo:

The CSS:

<style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .pagination{ padding: 2px; } .pagination ul{ margin: 0; padding: 0; text-align: left; /*Set to "right" to right align pagination interface*/ font-size: 16px; } .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px; } .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #9aafe5; text-decoration: none; color: #2e6ab1; } .pagination a:hover, .pagination a:active{ border: 1px solid #2b66a5; color: #000; background-color: #FFFF80; } .pagination a.currentpage{ background-color: #2e6ab1; color: #FFF !important; border-color: #2b66a5; font-weight: bold; cursor: default; } .pagination a.disablelink, .pagination a.disablelink:hover{ background-color: white; cursor: default; color: #929292; border-color: #929292; font-weight: normal !important; } .pagination a.prevnext{ font-weight: bold; } </style>

The HTML:

<div class="pagination"> <ul> <li><a href="#" class="prevnext disablelink">« previous</a></li> <li><a href="#" class="currentpage">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a>...</li> <li><a href="#">15</a></li> <li><a href="#">16</a></li> <li><a href="#" class="prevnext">next »</a></li> </ul> </div>

转载于:https://www.cnblogs.com/SoulStore/archive/2008/08/01/1258280.html

weixin_30736301
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ember-pagination-links：适用于ember应用程序的简单分页链接
02-04
余烬分页链接 用于余烬应用程序的简单分页链接。 这个Ember插件基于给定的一次显示的页码数量和最终页面的数量，创建了一组简单的分页样式链接。 它包括用于移动到下一页和上一页，以及可选地也移动到第一页和最后一页的导航箭头。 当用户单击页码时，该值将传递给您提供的操作。 pagination-links组件不管理要在每个页面上显示的数据。 它独立于任何数据存储或获取策略。 您告诉组件您希望用户能够访问多少页，然后组件会在用户每次单击新的页码时告诉您。 然后由您自己决定如何显示新页面，以及应显示哪些型号或其他信息。 例子 默认外观 风格化 安装 在您的Ember项目中安装插件： ember
使用wordpress分页函数paginate_links
weixin_33915554的博客
04-23 581
在做wordpress的开发时，需要用到wordpress的分页函数，网上很多人抱怨wordpress没有自带的分页函数，都是自己重新定义的分页函数,今天介绍一个wordpress自带的分页函数paginate_links，函数的参数如下：<?php $args = array( 'base' => '%_%', 'form...
jquery.pagination.js 分页扩展首页，尾页及输入框功能
07-17
jquery.pagination.js，扩展首页,尾页，及输入框，及输入框带有回车事件。
html输入页码跳转,如何为WordPress添加输入页码跳转功能？
weixin_33806859的博客
06-04 374
最近看到有些网站没有输入页码跳转的功能，使用起来不是很方便，我就想用户如果需要跳转到那一页只需在输入框中输入相应的页面点击确定就可以跳转到指定页面，那么如何为WordPress添加输入页码跳转功能？接下来我们一起了解一下。导航代码下面的页码输出函数显示出来的效果见上图：function chenxing_pagenavi() {global $wp_query, $wp_rewrite;$wp_q...
Flask-paginate基本分页
xiao-啸
08-15 2074
Flask-paginate—实现分页 安装包 pip install flask-paginate 后端代码 from flask_paginate import Pagination, get_page_parameter from ..models import BannerModel, BoardModel, PostModel @bp.route("/") def inde...
jQuery Pagination分页插件.zip
07-11
<link rel="stylesheet" href="path/to/jquery.pagination.css"> <script src="path/to/jquery.js"></script> <script src="path/to/jquery.pagination.js"> ``` 2. 在HTML中创建一个用于放置分页导航的容器，例如...
Laravel开发-materializecss-laravel-pagination
08-28
3. **Blade模板** - 在`resources/views`目录下，存在一个或多个视图文件，其中使用了Materialize CSS 的组件，并调用了分页的`links()`方法。 4. **控制器** - 控制器处理请求，使用`paginate()`方法获取和返回分页...
jquery分页插件jquery.pagination.js使用方法解析
11-23
* This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version 1.1 * @param {int} maxentries Number of entries to...
jQuery Pagination 基于jquery的分页插件.zip
11-05
1. 引入 jQuery 库和 jQuery Pagination 插件的 JavaScript 和 CSS 文件。 2. 在 HTML 中创建分页容器元素，例如 `<div id="pagination"></div>`。 3. 使用 JavaScript 初始化分页插件，配置参数如数据总数、每页...
Laravel开发-laravel5-foundation6-pagination
08-27
4. 对于Foundation 6，我们需要确保引入相应的CSS和JS文件，并可能需要调整`links()`方法生成的HTML结构以符合Foundation 6的分页组件要求。 此外，Laravel还提供了自定义分页URL和分页器的外观的能力。通过重写`...
Bootstrap系列之分页（Pagination）
老__L的博客
06-18 8978
我们让分页（pagination）占据了一大块区域来放置相互关联的链接，这让链接更醒目并且易于扩充，除了这些好处，还为链接提供了较大的点击区域。分页（Pagination）是利用 HTML 的列表元素构建的，因此屏幕阅读器可以识别并读出链接的数量。并且列表元素外面还用元素进行了包裹，以便让屏幕阅读器和其他辅助技术能够将其识别为导航区域。此外，由于页面上可能会有多个这样的导航区域，因此建议为设置一个用于描述其用途的aria-label属性。
django基础知识之分页:
weixin_30598225的博客
06-10 220
分页 Django提供了一些类实现管理数据分页，这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int)：返回分页对象，参数为列表数据，每面数据的条数 属性 count：对象总数 num_pages：页面总数 page_range：页码列表，从1开始，例如[1, 2, 3, 4] ...
css3分页paginationg【各种分页效果】
云上
07-22 934
CSS 分页实例 本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。 简单分页 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页： CSS 实例 ul.pagination {     display: inline-block;     padding: 0;  
分页操作使用
weixin_30905981的博客
06-27 153
导入分页模块 try: page = int(request.args.get(‘p’,1)) except: page=1 page_count = 10 userpag = User.query.paginate(page,page_count,False) userlist = userpag.items#一共多少条 total_page = userp...
flask-paginate分页技术的使用
weixin_42927647的博客
04-08 2829
pagination的安装 pip install flask-paginate 使用 导入 from flask_paginate import Pagination, get_page_parameter Pagination: 类函数 get_page_parameter: 获取当前翻页的参数 在视图函数定义方法 pagination = Pagination('参数') pa...
关于flask入门教程-图书借阅系统-分页显示数据
不胜人生一场醉
09-29 571
在做网页的过程中，随着展示的数据增多，如果要在一页中显示全部内容，浏览速度会变慢且不符合实际需求。在 Web 浏览器中， 内容多的网页需要花费更多的时间生成、下载和渲染， 所以网页内容变...
Jquery.Pagination分页插件的学习
小橙子的博客
06-26 5795
编程小白，文章中出现的谬误希望大神指点 工作接到一个任务，需要把现在pagination的样式修改成前端给的样式，当时心慌慌，幸好pagination的源码不太多，参考了一下网上的讲解代码，把学习过程中遇到的问题和对pagination的理解记录下来。 先看最终效果 直接上代码 /** * This jQuery plugin displays pagination li
flask使用render_pagination
最新发布
09-14
### 回答1： Flask是一个微型Python Web框架，使用render_pagination可以在Web应用程序中实现分页功能。 使用方法如下： 1. 在模板文件中使用render_template()函数渲染页面，并传入分页数据。 2. 在模板文件中使用render_pagination()函数生成分页导航条。 3. 在视图函数中，对数据进行分页处理，并传入到模板文件中。 举个例子: ```python from flask import Flask, render_template from flask_paginate import Pagination, get_page_args app = Flask(__name__) @app.route('/') def index(): search = False q = request.args.get('q') if q: search = True page, per_page, offset = get_page_args(page_parameter='page', per_page_parameter='per_page') total = len(items) pagination_items = items[offset: offset + per_page] pagination = Pagination(page=page, per_page=per_page, total=total, css_framework='bootstrap4') return render_template('index.html', items=pagination_items, page=page, per_page=per_page, pagination=pagination, search=search, q=q) if __name__ == '__main__': app.run() ``` 模板文件 ```html <table> {% for item in items %} <tr> <td>{{ item.name }}</td> </tr> {% endfor %} </table> {{ pagination.render() }} ``` 在上面的例子中，我们使用了`flask-paginate`这个包来实现分页， 在视图函数中调用get_page_args()函数来获取当前页码，每页显示数量，和偏移量。 然后使用`Pagination`这个类来初始化分页导航条 ### 回答2： Flask中的render_pagination是一个用于生成分页导航的方法。它可以方便地将分页相关的HTML代码嵌入到模板中。 使用render_pagination的步骤如下： 1. 导入flask模块中的render_pagination方法：from flask_paginate import render_pagination 2. 设置分页导航相关的参数，包括总的条目数(total)，每页显示的条目数量(per_page)，当前页码(page)，以及用于生成链接的回调函数(endpoint)等。 3. 调用render_pagination方法，将以上设置的参数传入，并将返回的分页导航代码嵌入到模板中。 具体的示例代码如下： 1. 在Python文件中设置分页导航相关的参数： ```python from flask import Flask, render_template from flask_paginate import Pagination app = Flask(__name__) @app.route('/') def index(): page = int(request.args.get('page', 1)) per_page = 10 total = 100 pagination = Pagination(page=page, per_page=per_page, total=total, css_framework='bootstrap4') # 将分页导航代码嵌入到模板中 return render_template('index.html', pagination=pagination) ``` 2. 在模板文件中将分页导航代码渲染到页面中： ```html <!DOCTYPE html> <html> <head> <title>Flask Pagination Example</title> </head> <body> <h1>Flask Pagination Example</h1> <ul> {% for item in items %} <li>{{ item }}</li> {% endfor %} </ul> <!-- 分页导航代码 --> {{ pagination.info }} {{ pagination.links }} </body> </html> ``` 这样，当访问首页时，会根据设置的总条目数和每页显示的条目数量自动生成合适的分页导航，并将其渲染到模板中的适当位置。 ### 回答3： Flask是一个Python的轻量级Web框架，可以用来构建简单的网站或Web应用程序。而render_pagination是Flask框架中的一个内置函数，用于在网页中实现分页功能。 使用render_pagination函数，首先需要导入相应的模块，一般是`from flask import render_template`。然后在路由函数中，根据需要的分页参数进行设置，通常包括当前页、每页显示的条目数量、总页数、总条目数等。 假设需要在一个博客网站中实现分页功能，可以使用render_pagination函数来展示博客文章列表。首先需要确定每页显示的博客数量，可以使用Flask框架中的request.args来获取当前页码数。在此基础上，根据数据的总条目数计算总页数，并将需要展示的博客列表传递给render_pagination函数。 示例代码如下： ```python from flask import Flask, render_template, request from flask_paginate import Pagination app = Flask(__name__) @app.route('/') def index(): page = int(request.args.get('page', 1)) per_page = 10 # 每页显示的博客数量 total = 100 # 博客的总条目数 blogs = [] # 博客列表，可以是从数据库中查询得到的数据 start = (page-1) * per_page end = start + per_page pagination = Pagination(page=page, per_page=per_page, total=total) return render_template('index.html', blogs=blogs[start:end], pagination=pagination) if __name__ == '__main__': app.run(debug=True) ``` 在index.html模板文件中，可以使用pagination的属性和方法来生成分页导航，例如`{{ pagination.links }}`可以生成展示分页导航链接的HTML代码。 通过上述代码，当访问http://localhost:5000/时，会显示第一页的博客列表，并在页面底部显示分页导航。点击不同的页码，可以切换显示不同页的博客列表。 总的来说，Flask的render_pagination函数是一个方便的工具，用于在网页中实现分页功能，可以根据具体需要进行定制和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值