简介
在前端开发中， Pagination （分页）控件是很常见的一种交互组件，在实际开发中，我们通常需要根据具体的业务需求来实现功能和样式。而在这篇文章中，我们将会介绍如何利用 Material Design 风格来实现一个美观、易用的 Pagination 控件。
Material Design 风格
Material Design 是一种由 Google 推出的设计风格，该设计风格注重简洁、美观以及易用性，通过平面化的图像和阴影效果来传达层次和重点。该风格被广泛应用在各种产品的设计中，例如 Android 系统、Gmail、Google Photos 等。
实现思路
我们可以通过以下几个步骤来实现一个 Material Design 风格的 Pagination 控件：
- 在 HTML 中定义一个包含页码的列表；
- 通过 CSS 设置样式，包括字体大小、颜色、背景颜色、边框等；
- 利用 JavaScript 实现点击页码进行翻页的功能；
- 实现分页组件的动态效果，如切换页码时的阴影效果。
实现步骤
步骤 1: 在 HTML 中定义 Pagination
我们可以使用 ul 和 li 标签定义 Pagination，例如下面的代码：
-- -------------------- ---- -------
--- -------------------
--- ---------------- --------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
-----在上面的代码中，我们使用了 Bootstrap 的 Pagination 控件样式。如果您不想使用 Bootstrap，您可以自己定义 Pagination 的样式。
步骤 2: 设置 CSS 样式
在 CSS 中，我们需要设置 Pagination 的样式。我们可以设置字体大小、颜色、背景颜色、边框等。例如：
-- -------------------- ---- ------- ----------- - -------- ----- ---------------- ------- ----------- ----- - ---------- - ------- ------- - ---------- - ----------- --- ---- ----- ---------- ------- -------------- ---- ------ ------- ------- ------- -------- ----- ---------------- ------- ------------ ------- ----------------- ------ ------ -------- ------- --- ----- -------- - ----------------- ---------------- - ----------------- -------- ------ ------ ------------- -------- -
在上面的代码中，我们设置了以下样式：
- 对于 Pagination，我们使用 flex 和 justify-content 属性来水平居中 Pagination；
- 对于每个页码，我们设置样式为圆形，并且使用 transition 属性来实现动画效果；
- 我们使用 background-color、color、border 等属性设置 Pagination 的颜色和边框；
- 我们使用 hover 和 focus 伪类来实现当用户鼠标悬停或者通过键盘聚焦时的样式变化。
步骤 3: 实现 JavaScript 功能
我们使用 jQuery 库来实现 Pagination 的 JavaScript 功能。我们定义 current_page 和 num_of_pages 变量来表示当前页和总页数。我们还定义了两个函数来实现切换页码时的动态效果。代码如下：
-- -------------------- ---- -------
---------------------------- -
--- ------------ - --
--- ------------ - --
-------- ------------------- -
---------------------------------------------
----------------------- - ----------------------
-
-------- ----------------------- -
--- ----------- - -----------------------
--- ----------- - ----------------------- - ---
-----------
----------------- -------------
---------- ---------- ---------- -- ---- ---------- -
------------------------------
---
-----------
------ ---------- ------------- -------- - --
---------- ---------- ----------- -------- - -- ---- ---------- -
---------------------------
---
-
-------------------------------- -
--- ---- - --------------------------------------------
--------------------
------------------------
---
---在上面的代码中，我们使用了以下方法：
- $('.page-item.active').removeClass('active') 用于取消当前 active 状态的页码；
- $('.page-item').eq(page - 1).addClass('active') 用于将指定页码设置为 active；
- active_page.css('transform', 'scale(0.8)').animate({ transform: 'scale(1)' }, 150, function() { $(this).removeClass('active'); }) 用于实现动画效果，包括缩小、渐变透明度以及取消 active 状态等；
- target_page.css({ transform: 'scale(0.8)', opacity: 0 }).animate({ transform: 'scale(1)', opacity: 1 }, 150, function() { $(this).addClass('active'); }) 用于实现动画效果，包括缩小、渐变透明度以及设置为 active 状态等。
步骤 4: 实现动态效果
为了让我们的 Pagination 控件更加生动，我们可以添加一些动态效果。
CSS 代码如下：
-- -------------------- ---- ------- ------- ----------- ----------------- ---------------- - ----------- - - - ------ ------- ---- ---- ----- - ----------------- ----------------------- ----------------- ---------------------- - ----------------- ----- -
我们使用了 box-shadow 属性来实现当用户悬停或者点击当前页码时，添加一个阴影效果。我们还使用了 background-color 属性，当用户悬停在 Pagination 上时，将所有页码的背景颜色设置为灰色。这些效果可以让我们的 Pagination 更加生动。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
--------------- ------ ------------------
----- ---------------- -----------------------------------------------------------------------------
-------
----------- -
-------- -----
---------------- -------
----------- -----
-
---------- -
------- -------
-
---------- -
----------- --- ---- -----
---------- -------
-------------- ----
------ -------
------- -------
-------- -----
---------------- -------
------------ -------
----------------- ------
------ --------
------- --- ----- --------
-
----------------- ---------------- -
----------------- --------
------ ------
------------- --------
-
------- -----------
-----------------
---------------- -
----------- - - - ------ ------- ---- ---- -----
-
----------------- -----------------------
----------------- ---------------------- -
----------------- -----
-
--------
-------
------
--- -------------------
--- ---------------- --------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
--- ------------------
-- ----------------- --------------
-----
-----
------- ----------------------------------------------------------------
--------
-- ---------- ------- --
---------------------------- -
--- ------------ - --
--- ------------ - --
-------- ------------------- -
---------------------------------------------
----------------------- - ----------------------
-
-------- ----------------------- -
--- ----------- - -----------------------
--- ----------- - ----------------------- - ---
-----------
----------------- -------------
---------- ---------- ---------- -- ---- ---------- -
------------------------------
---
-----------
------ ---------- ------------- -------- - --
---------- ---------- ----------- -------- - -- ---- ---------- -
---------------------------
---
-
-------------------------------- -
--- ---- - --------------------------------------------
--------------------
------------------------
---
---
---------
-------
-------总结
通过本篇文章，我们介绍了如何利用 Material Design 风格来实现一个美观、易用的 Pagination 控件。我们演示了如何使用 HTML、CSS 和 JavaScript 来实现自定义样式以及交互效果，同时还提供了完整的示例代码供您参考。希望这篇文章能够对您在实践中实现类似控件时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484a1db48841e989439e9b5