帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery带省略号分页插件,点击省略号可弹窗选择分页数

帝国模板之家 2020-11-05 网页特效 评论

这是一款简单的jQuery分页插件,通过单击省略号,会弹出一列选择器包含所有页码的窗口,可以快速选择所需的页面。

1. 加载分页样式文件和jquery库、分页插件文件。

<link rel="stylesheet" href="jquery.simple-pagination.min.css" />
<script src="jquery.slim.min.js"></script>
<script src="jquery.simple-pagination.min.js"></script>

2.  创建一个分页组件容器。

<div id="myPagination"></div>

3. 初始化插件。

$('#myPagination').simplePagination({
  current: 3,
  count: 15
});

4. 确定单选按钮的名称。 默认值:“分页”。

$('#myPagination').simplePagination({
  current: 3,
  count: 15,
  name: '分页'
});

5. 设置多个分页组件。

<div id="topPagi"></div>
  ...
<div id="bottomPagi"></div>
('#topPagi').simplePagination({
  current: 7,
  count: 14,
  name: 'pagi',
  mirrorContainer: '#bottomPagi'
});

6. 分页组件HTML结构:

<div id="myPagination">
  <div class="simple-pagination">
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="2">←</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="1">1</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="2">2</button>
    <button class="simple-pagination__button simple-pagination__button--disable" type="button" data-action="pagination-page" data-page="3">3</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="4">4</button>
    <div class="simple-pagination__spred">
      <button class="simple-pagination__button" type="button" data-action="pagination-spred">...</button>
      <div class="simple-pagination__select">
        <div class="simple-pagination-select">
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="5">5</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="6">6</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="7">7</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="8">8</button>
          </div>
          <div class="simple-pagination-select__item">
            <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="9">9</button>
          </div>
        </div>
      </div>
    </div>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="10">10</button>
    <button class="simple-pagination__button" type="button" data-action="pagination-page" data-page="4">→</button>
  </div>
  <div class="simple-pagination-radio">
    <input type="radio" name="page" value="1">
    <input type="radio" name="page" value="2">
    <input type="radio" name="page" value="3" checked="">
    <input type="radio" name="page" value="4">
    <input type="radio" name="page" value="5">
    <input type="radio" name="page" value="6">
    <input type="radio" name="page" value="7">
    <input type="radio" name="page" value="8">
    <input type="radio" name="page" value="9">
    <input type="radio" name="page" value="10">
  </div>
</div>

7.返回当前页面数:

$('#myPagination input[name=page]').change(function() {
  console.log($(this).val());
});

8. 创建自定义分页按钮。

var myPagi = $('#myPagination').simplePagination({
    // options here
});
// back to prev page
myPagi.setPrevPage();
// go to next page
myPagi.setNextPage();
// go to a specific page
myPagi.setPage(1);

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

就像朝日会耀眼一样,有一颗明亮的心,一样会照亮人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言