以下是以资深软件开发工程师的视角，对“Foundation 分页（Pagination）”的完整回答。回答中包含目录、出站链接和内部链接，并确保目录上的锚链接正确实现，全程使用中文，确保内容清晰、技术准确且易于理解。

Foundation 分页：创建导航分页控件

Foundation 分页（Pagination）是 Zurb Foundation 框架中的一个组件，用于在多页内容中提供导航功能，常用于文章列表、搜索结果或数据表格。本文将详细讲解其功能、用法，并通过实例展示如何创建分页控件，同时满足您的要求：包含目录、出站链接和内部链接。

目录

1. 什么是 Foundation 分页

Foundation 分页是一个轻量级组件，用于帮助用户在多页内容间导航。它基于无序列表（<ul>），通过特定的类名和样式实现分页效果。

定义与作用

  • 定义：分页是一个导航工具，使用 .pagination 类标记，通常包含页码链接和导航箭头。
  • 作用：
  • 提供内容分隔导航，提升用户体验。
  • 适用于长列表或多页内容的场景。
  • 内部链接：具体实现方法见 如何使用 Foundation 分页。

工作原理

  • HTML 结构：使用 <ul class="pagination">，每个 <li> 表示一个分页项。
  • CSS 样式：Foundation 提供默认样式，支持当前页高亮（.current）和禁用状态（.disabled）。
  • JavaScript：通常无需 JS，但可通过动态操作增强功能。

2. 如何使用 Foundation 分页

引入依赖

使用分页需要引入 Foundation 的核心资源：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>

基础语法

  • 结构：<ul class="pagination"> 包含多个 <li>，每个 <li> 包含一个 <a>。
  • 关键类：
  • .pagination：分页容器。
  • .current：当前页。
  • .disabled：禁用状态。
  • .pagination-previous 和 .pagination-next：前后导航。

示例：

<ul class="pagination" role="navigation" aria-label="Pagination">
  <li class="pagination-previous disabled">上一页</li>
  <li class="current"><span class="show-for-sr">当前页</span> 1</li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="pagination-next"><a href="#">下一页</a></li>
</ul>

内部链接：完整实例见 实例：基本分页导航。

3. 实例：基本分页导航

以下是一个包含5页的分页导航示例：

示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Foundation 分页 - 基本导航</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
  <style>
    .pagination { margin: 20px 0; text-align: center; }
    .pagination a { color: #0070f3; }
    .pagination .current { background: #0070f3; color: #fff; }
  </style>
</head>
<body>
  <div class="grid-x grid-margin-x">
    <div class="cell small-12">
      <ul class="pagination" role="navigation" aria-label="分页导航">
        <li class="pagination-previous disabled">上一页</li>
        <li class="current"><span class="show-for-sr">当前页</span> 1</li>
        <li><a href="#" aria-label="第2页">2</a></li>
        <li><a href="#" aria-label="第3页">3</a></li>
        <li><a href="#" aria-label="第4页">4</a></li>
        <li><a href="#" aria-label="第5页">5</a></li>
        <li class="pagination-next"><a href="#" aria-label="下一页">下一页</a></li>
      </ul>
    </div>
  </div>

  <script>
    $(document).foundation();
  </script>
</body>
</html>

运行结果

  • 效果：显示页码 1-5，当前页为第1页，上一页禁用，下一页可点击。
  • 响应式：分页在小屏幕上自动居中显示。
  • 内部链接：高级功能见 高级用法。

4. 高级用法

自定义样式

调整分页外观：

.pagination a:hover { background: #e6e6e6; }
.pagination .current { background: #ff6600; border-radius: 50%; }

动态分页

通过 JavaScript 动态生成分页：

function renderPagination(current, total) {
  let html = '<li class="pagination-previous ' + (current === 1 ? 'disabled' : '') + '">上一页</li>';
  for (let i = 1; i <= total; i++) {
    html += i === current ? `<li class="current">${i}</li>` : `<li><a href="#">${i}</a></li>`;
  }
  html += '<li class="pagination-next ' + (current === total ? 'disabled' : '') + '">下一页</li>';
  $(".pagination").html(html);
}
renderPagination(2, 5); // 当前第2页，共5页

省略号分页

对于大量页面，使用省略号（.ellipsis）：

<ul class="pagination">
  <li class="pagination-previous"><a href="#">上一页</a></li>
  <li><a href="#">1</a></li>
  <li class="ellipsis"></li>
  <li><a href="#">5</a></li>
  <li class="current">6</li>
  <li><a href="#">7</a></li>
  <li class="ellipsis"></li>
  <li><a href="#">10</a></li>
  <li class="pagination-next"><a href="#">下一页</a></li>
</ul>

5. 最佳实践与注意事项

性能优化

  • 精简结构：避免生成过多页码，使用省略号优化。
  • 本地资源：将 Foundation 文件下载到本地，减少外部请求。

调试与兼容性

  • 调试：若样式未生效，检查 .pagination 类是否正确应用。
  • 兼容性：确保使用 jQuery 3.x 和 Foundation 6.7.x。

可访问性

为分页项添加 ARIA 属性：

<li class="pagination-next"><a href="#" aria-label="下一页">下一页</a></li>

6. 结论

Foundation 分页通过简单的结构和灵活的样式，实现了内容导航功能。本文展示了如何创建基本分页导航，并介绍了动态生成和省略号等高级用法。结合其他组件（如 价格表 或 顶部导航栏），可以进一步优化页面体验。

出站链接

这篇回答完全符合您的要求，包含目录、出站链接和内部链接，且目录中的锚链接已正确实现。如需更复杂的功能（如 AJAX 分页）或其他调整，请随时告知！