jQuery 캡슐화된 페이징 구성 요소에 대한 자세한 설명
- 小云云원래의
- 2018-01-06 10:05:111733검색
페이징 효과를 구현해야 하는 프로젝트라서 jQuery 플러그인 라이브러리에서 찾아보았지만 원하는 효과를 찾을 수 없어 페이징 구성요소를 직접 캡슐화했습니다. 이 글은 주로 jQuery encapsulation을 기반으로 한 paging 컴포넌트를 자세하게 소개하고 있습니다. 관심있는 친구들이 참고하시면 좋을 것 같습니다.
아이디어:
주로 초기화 중 프로토타입을 기반으로 설정된 페이징 템플릿을 기반으로 한 다음 동적 이벤트를 바인딩하여 DOM을 새로 고치는 페이징 효과를 얻습니다.
1.page.init.css
@charset "utf=8";
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.page{
font-size: 13px;
text-align: right;
}
.page .page_to{
display: inline-block;
max-width: 250px;
}
.page .page_to li{
display: inline-block;
width: auto;
height: auto;
border: 1px solid #ddd;
padding:5px 10px;
border-left-width: 0;
color: #323232;
cursor: pointer;
}
.page .page_to li.page_hide{
display: none;
}
.page .page_to li:hover{
color: #32C2CD;
background-color: #f4f4f4;
border-color: #DDDDDD;
}
.page .page_to li:first-child{
border-left-width: 1px;
}
.page .page_jump{
display: inline-block;
width: 180px;
}
.page .page_jump input.page_jump_input{
width: 52px;
height: 28px;
text-align: center;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
margin:0 4px;
}
.page .page_jump input.page_jump_btn{
display: inline-block;
padding: 7px 20px;
margin-left: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
border-radius: 4px;
background-color: #00BB9C;
color: #FFFFFF;
font-weight: bold;
}2.pageInit.js
/**
* Created: 2017/6/20.
* author: Aaron
* address: http://www.cnblogs.com/aaron-pan/
*/
(function($,window,undefined){
var curPage='',
//跳转是否有值
jumpVal='',
//从DOM中重新获取数据总数/总页数
lists='',
totals='',
//是否返回值
isTrue=false;
var Page=function(opts){
this.settings= $.extend({},Page.defaults,opts);
curPage=this.settings.initPage;
totals=this.settings.totalPages;
jumpVal=this.settings.inputVal;
this.init();
};
//默认配置
Page.defaults={
container:'.page',
setPos:'body',
totalPages:null,
totalLists:null,
initPage:1,
inputVal:1,
callBack:null
};
Page.prototype={
init:function(){
this.create();
},
create:function(){
var _template='<p class="page">'+
'<span class="page_details">'+
'共<span class="page_num">'+this.settings.totalLists+'</span>条记录，'+
'第<span class="page_current">'+curPage+'</span>/'+
'<span class="page_size">'+this.settings.totalPages+'</span>页'+
'</span>'+
'<p class="page_to">'+
'<ul class="flex_parent">'+
'<li class="page_first flex_child">首页</li>'+
'<li class="page_pre page_hide flex_child">« 上一页</li>'+
'<li class="page_next flex_child">下一页 »</li>'+
'<li class="page_last flex_child">末页</li>'+
'</ul>'+
'</p>'+
'<p class="page_jump">'+
'<span>第：<input type="number" class="page_jump_input" value="'+this.settings.inputVal+'">页</span>'+
'<input type="button" class="page_jump_btn" value="Go">'+
'</p>'+
'</p>';
$(this.settings.setPos).append(_template);
this.refreshDom();
this.bindEvent();
},
bindEvent:function(){
var _this=this;
//跳转首页
$(this.settings.container).on("click",".page_first",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
curPage=1;
isTrue=_this.settings.callBack(1);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(1);
$(_this.settings.container).find(".page_jump_input").val(curPage);
}
}
});
//跳转上一页
$(this.settings.container).on("click",".page_pre",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
if(curPage>1){
curPage=curPage-1;
isTrue=_this.settings.callBack(curPage);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(curPage);
$(_this.settings.container).find(".page_jump_input").val(curPage);
}
}
}
});
//跳转下一页
$(this.settings.container).on("click",".page_next",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
if(curPage<totals){
curPage=curPage+1;
isTrue=_this.settings.callBack(curPage);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(curPage);
$(_this.settings.container).find(".page_jump_input").val(curPage);
}
}
}
});
//跳转末页
$(this.settings.container).on("click",".page_last",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
curPage=totals;
isTrue=_this.settings.callBack(curPage);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(totals);
$(_this.settings.container).find(".page_jump_input").val(curPage);
}
}
});
//Go跳转
$(this.settings.container).on("click",".page_jump_btn",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
jumpVal=Number($(_this.settings.container).find("input.page_jump_input").val());
console.log('跳转的页数：'+jumpVal+';跳转之前的页数：'+curPage);
if(jumpVal>=1 && jumpVal <=totals){
curPage=jumpVal;
isTrue=_this.settings.callBack(curPage);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(curPage);
}
}else{
jumpVal=curPage;
}
}
});
},
refreshDom:function(){
$(this.settings.container).find("li.flex_child").removeClass("page_hide");
if(Number(totals)==1){
$(this.settings.container).find(".page_pre").addClass("page_hide");
$(this.settings.container).find(".page_next").addClass("page_hide");
}
else if(Number(totals)==2){
if(Number(curPage)==1){
$(this.settings.container).find(".page_pre").addClass("page_hide");
}else{
$(this.settings.container).find(".page_next").addClass("page_hide");
}
}
else if(Number(curPage)==1 && Number(totals)>2){
$(this.settings.container).find(".page_pre").addClass("page_hide");
}
else if(Number(curPage)==Number(totals) && Number(totals)>2){
$(this.settings.container).find(".page_next").addClass("page_hide");
}
}
};
var pageInit=function(opts){
return new Page(opts);
};
window.pageInit= $.pageInit=pageInit;
})(jQuery,window,undefined);3 window.pageInit= $.pageInit= pageIn을 통해 구성 요소 호출
그럴 수 있다 페이지 매김 구성 요소 초기화가 완료되었습니다.
노출되는 인터페이스는 다음과 같습니다.
1.container: DOM 컨테이너, default.page
2.setPos: DOM에 배치된 HTML 위치, 기본 body
3.totalPages: 기본 페이지 수, 기본 null
4.totalLists: 기본 총 데이터 개수, 필수, 기본값 null
5.initPage: 현재 페이지, 기본 첫 페이지
6.inputVal: 점프 페이지, 기본 첫 페이지
7.callBack : 실행할 콜백 함수 , 필수, 기본값 null
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>基于jQuery封装的分页组件</title>
<link rel="stylesheet" href="css/page.init.css">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="js/pageInit.js"></script>
<script>
$.pageInit(
{
container:'.page',//容器：默认page
//setPos:'body',//放置位置：默认body
totalPages:10,//总页数：必填
totalLists:100,//数据总数：必填
initPage:1,//初始页码：默认1
inputVal:1,//设置跳转的input值：默认1
//要执行的函数：默认null，必须为fn且返回true则可执行分页，false则不执行
callBack:function(n){
var flag=true;
console.log(n);
return flag;
}
}
);
</script>
</body>
</html>효과:
콜백 인터페이스를 통해 실행해야 하는 함수를 추가하면 동적 DOM 렌더링은 true가 필요한 경우에만 실행됩니다.
더 흥미로운 콘텐츠를 보려면 jquery 페이징 기능 요약을 클릭하여 알아보세요.
관련 권장 사항:
jquery encapsulation_jquery를 기반으로 한 js 페이징
jquery 캡슐화된 대화 상자 단순 구현_jquery
위 내용은 jQuery 캡슐화된 페이징 구성 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery 선택 방법다음 기사：jQuery 선택 방법