# Pagination

**Repository Path**: osxcn/Pagination

## Basic Information

- **Project Name**: Pagination
- **Description**: 网易初级前端微专业DOM课程考试第二题
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-07-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Pagination

#### 项目介绍
网易初级前端微专业DOM课程考试第二题

#### 题目
实现以下分页器组件功能：

<img src="images/page.jpg" alt="题目" height="86">

要求：
1. 写出对应的HTML结构
2. 编写样式文件，并以link的形式引入到HTML文件
3. 实现分页功能：点击数字，在控制台打印出对应页码； 点击左右箭头，分别后退或前进一页
4. 使用事件委托

#### 组件开发五步法
- 分析：交互意图
- 结构：静态结构
- 设计：公共接口、事件定义
- 实现：从抽象到细节
- 完善：重构、优化、测试

#### 1. 需求分解
- 判断页面是否引用分页插件所需的css，没有的动态插入
- 分页插件动态插入
- 自定义前进后退的文字，如“前一页、后一页”、“<、>”等
- 页码点击事件可自定义
- 分页组件上显示的页码数可自定义
- 页码数不受限制
- 自定义选中的页码的颜色

#### 2. 静态结构
静态结构详见[test.html](test.html)

CSS部分详见[page.css](page/css/page.css)

#### 3. 设计：公共接口、事件定义
```javascript
    page.render({
        elem: 'page',
        count: 92,
        groups: 5,
        prev: '<',
        next: '>',
        theme: '#3399FF',
        nav: (obj) => {
            console.log(obj.curr);
        }
    });
```

* 参数介绍

| 参数 | 说明 | 类型 | 默认值 |
| :--: | :-- | :--: | :--: |
| elem | 指向存放分页的容器，值可以是容器ID或者DOM元素 | String/Object | - |
| count | 数据总数 | Number | - |
| limit | 每页显示的条数 | Number | 10 |
| groups | 连续出现的页码个数 | Number | 5 |
| prev | 自定义“上一页”的内容 | String | 上一页 |
| next | 自定义“下一页”的内容 | String | 下一页 |
| theme | 主题颜色，即点击后的页码颜色 | String | #1E9FFF |

* nav - 切换分页的回调
当分页切换时触发，函数返回参数：obj（当前分页的所有选项值）

#### 4. 实现：从抽象到细节
实现详见[page.js](page/page.js)


#### 如何使用
1. 首先引入组件js
```html
<script src="page/page.js"></script>
```
推荐写在body正文最后

2. 使用组件
使用方法详见[3. 设计：公共接口、事件定义](#3-设计公共接口事件定义)