如何使用amaze ui的分页样式封装一个通用的JS分页控件

下面我来详细讲解一下如何使用Amaze UI的分页样式封装一个通用的JS分页控件。

准备工作

在使用Amaze UI分页样式之前，需要引入Amaze UI的相关样式和JS文件。我们可以在官网上下载相关文件，也可以使用CDN引入，如下：

<link rel="stylesheet" href="https://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css">
<script src="https://cdn.amazeui.org/amazeui/2.7.2/js/jquery.min.js"></script>
<script src="https://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>

除此之外，我们还需要准备一个分页控件的HTML结构，如下：

<div class="pagination">
  <ul class="am-pagination am-pagination-centered">
    <li class="am-disabled"><a href="#">&laquo; 上一页</a></li>
    <li class="am-active"><a href="#">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="#">下一页 &raquo;</a></li>
  </ul>
</div>

封装分页控件

有了上面的准备工作，我们就可以开始封装分页控件了。我这里封装一个名为Pagination的构造函数，用于创建分页控件实例。

function Pagination(options) {
  this.options = $.extend({}, Pagination.DEFAULTS, options); // 合并参数
  this.$element = $(this.options.selector); // 获取分页控件元素
  this.currentPage = this.options.currentPage; // 当前页码
  this.init(); // 初始化
}

Pagination.DEFAULTS = {
  selector: '.pagination',
  totalPage: 10,
  showPage: 5,
  currentPage: 1,
  onPageChange: $.noop
};

Pagination.prototype.init = function () {
  this.render(); // 渲染分页控件
  this.bindEvents(); // 绑定事件
};

Pagination.prototype.render = function () {
  var totalPage = this.options.totalPage;
  var showPage = this.options.showPage;
  var currentPage = this.currentPage;
  var $pagination = $(`
    <ul class="am-pagination am-pagination-centered">
      <li class="${currentPage === 1 ? 'am-disabled' : ''}"><a href="#" data-page="${currentPage - 1}">&laquo; 上一页</a></li>
    </ul>
  `);

  // 计算起始页码和结束页码
  var startPage = currentPage - Math.floor(showPage / 2); 
  startPage = Math.max(startPage, 1);
  var endPage = startPage + showPage - 1;
  endPage = Math.min(endPage, totalPage);

  // 渲染中间页码
  for (var i = startPage; i <= endPage; i++) {
    var $item = $(`
      <li class="${i === currentPage ? 'am-active' : ''}"><a href="#" data-page="${i}">${i}</a></li>
    `);
    $pagination.append($item);
  }

  // 渲染末尾页码
  $pagination.append(`
    <li class="${currentPage === totalPage ? 'am-disabled' : ''}"><a href="#" data-page="${currentPage + 1}">下一页 &raquo;</a></li>
  `);

  this.$element.html($pagination);
};

Pagination.prototype.bindEvents = function () {
  var _this = this;
  this.$element.on('click', 'a', function (event) {
    event.preventDefault();
    var $target = $(event.target);
    var page = parseInt($target.data('page'), 10);
    if (!isNaN(page) && page !== _this.currentPage) {
      _this.currentPage = page;
      _this.render();
      _this.options.onPageChange(page);
    }
  });
};

上面的代码中，我们首先定义了一个名为Pagination的构造函数，用于创建分页控件实例。该构造函数接收一个options对象，该对象包含了如下参数：

• selector：分页控件所在的父元素的选择器，默认为.pagination。
• totalPage：总页数，默认为10。
• showPage：显示的页码数，默认为5。
• currentPage：当前页码，默认为1。
• onPageChange：页码变化时的回调函数，默认为一个空函数。

然后，我们定义了一些原型方法，包括init、render和bindEvents。这些方法将在下面解释。

首先是init方法，该方法用于初始化分页控件。其中，render方法用于渲染分页控件的HTML结构，bindEvents方法用于绑定分页控件的事件。

render方法中，我们首先计算了起始页码和结束页码，然后使用了模板字符串的方式渲染了分页控件的HTML结构。其中，每个页码都绑定了一个data-page属性，用于存储页码。在中间的页码部分，我们使用了一个for循环来渲染。

bindEvents方法中，我们使用了事件委托的方式绑定了分页控件的click事件。在点击事件中，首先阻止了默认跳转行为，然后获取了点击的页码，如果页码不为NaN且不等于当前页码，就更新了当前页码、重新渲染了分页控件和调用了回调函数。

使用示例

我们可以通过以下代码来创建一个分页控件：

var pagination = new Pagination({
  selector: '.pagination',
  totalPage: 10,
  showPage: 5,
  currentPage: 1,
  onPageChange: function (page) {
    console.log('page changed:', page);
  }
});

其中，我们指定了分页控件所在的元素选择器、总页数、显示的页码数、当前页码以及页码变化时的回调函数。在回调函数中，我们以控制台输出的形式来展示页码变化事件。

另外，我们还可以通过以下代码来修改分页控件的当前页码：

pagination.currentPage = 2;
pagination.render();

其中，我们直接修改了currentPage属性，并重新渲染了分页控件。这样就可以实现修改页码的效果了。

至此，我们已经完成了使用Amaze UI的分页样式封装一个通用的JS分页控件的攻略，希望对你有所帮助。