网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款简单的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);
转载请注明来源:jquery带省略号分页插件,点击省略号可弹窗选择分页数
本文永久链接地址:https://www.moyouyouw.cn/code/654.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论