이 글에서는 페이징 효과를 구현하기 위한 기본 javascript를 주로 소개합니다. 관심 있는 친구들은
을 참조할 수 있습니다. 최근 프론트엔드 산업의 급속한 발전과 함께 다양한 새로운 프레임워크가 속속 등장하고, 새로운 방식이 우리를 좀 놀라게 했습니다.
요즘 시간이 많이 남아서 프론트엔드의 기본 자바스크립트를 배울 준비가 되었습니다. 그냥 연습용으로 페이징을 작성해서 공유하겠습니다. .
function pageFunc(conf){
this.myFunc = conf.click //用户点击要执行的方法
this.total = conf.total; //总页数
this.currentPage = 1; //当前页码
this.init() //初始化
}
pageFunc.prototype.init = function(){
var total = this.total,
currentPage = this.currentPage,
_this = this;
listeners = {
'setWhat' : function(opts) {
_this.aClick(opts.src)
return false;
}
};
listenersPre = {
'lmw-pre' : function(opts) {
_this.prevClick()
return false;
}
};
listenersAdd = {
'lmw-add' : function(opts) {
_this.addClick()
return false;
}
};
var rootele = this.createPage(1,total);
document.getElementById('page-coat').innerHTML = rootele
$on(document.getElementById('page-coat'), ['click'], listeners);//点击a标签
$on(document.getElementById('page-coat'), ['click'], listenersPre);//点击上一页
$on(document.getElementById('page-coat'), ['click'], listenersAdd);//点击下一页
}
//创建HTML分页结构字符串
pageFunc.prototype.createPage = function(page,total){
var str = `<a class="lmw-current" href="#" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page}</a>`
for(var i=1;i<=3;i++){
if(page-i>1){
str = `<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" >${page-i}</a>`+str
}
if(page+i<total){
str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${(page+i)}</a>`
}
};
if(page-4>1){
str = '<span>...</span>'+str
};
if(page+4<total){
str = str+'<span>...</span>'
};
if(page>1){
str = `<a class="lmw-pre" href="#" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a>
<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>`+str
};
if(page<total){
str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" >${total}</a><a class="lmw-add" href="#" rel="external nofollow"
rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
rel="external nofollow" rel="external nofollow" >下一页</a>`
};
return str
}
//上一页方法
pageFunc.prototype.prevClick = function(){
var total = this.total
var va = --this.currentPage
var newret = this.createPage(va, total)
document.getElementById('page-coat').innerHTML = newret
this.myFunc(va)
}
//下一页方法
pageFunc.prototype.addClick = function(){
var total = this.total
var va = ++this.currentPage
var newret = this.createPage(va, total)
document.getElementById('page-coat').innerHTML = newret
this.myFunc(va)
};
//点击方法
pageFunc.prototype.aClick = function(_this){
var total = this.total
var va = parseInt(_this.innerText);
this.currentPage = va
var rootele = this.createPage(va, total)
document.getElementById('page-coat').innerHTML = rootele
this.myFunc(va)
};
//二：封装事件代理方法
function $on(dom, event, listeners) {
$addEvent(dom, event, function(e) {
var e = e || window.event,
src = e.target || e.srcElement,
action,
returnVal;
while (src && src !== dom) {
action = src.getAttribute('attr-action') || src.getAttribute('class') ;
if (listeners[action]) {
returnVal = listeners[action]({
src : src,
e : e,
action : action
});
if (returnVal === false) {
break;
}
}
src = src.parentNode;
}
});
};
//1、封装跨浏览器事件绑定方法
function $addEvent(obj, type, handle) {
if(!obj || !type || !handle) {
return;
}
if( obj instanceof Array) {
for(var i = 0, l = obj.length; i < l; i++) {
$addEvent(obj[i], type, handle);
}
return;
}
if( type instanceof Array) {
for(var i = 0, l = type.length; i < l; i++) {
$addEvent(obj, type[i], handle);
}
return;
}
//2、解决IE中this指向window的问题
function createDelegate(handle, context) {
return function() {
return handle.apply(context, arguments);
};
}
if(window.addEventListener) {
var wrapper = createDelegate(handle, obj);
obj.addEventListener(type, wrapper, false);
}
else if(window.attachEvent) {
var wrapper = createDelegate(handle, obj);
obj.attachEvent("on" + type, wrapper);
}
else {
obj["on" + type] = handle;
}
};로그인 후 복사
사용 방법:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>分页效果</title>
<style type="text/css">
#page-coat a{
text-decoration:none;
display: inline;
float: left;
padding: 3px 10px 3px 10px;
overflow: hidden;
border:1px solid #ccc;
color:#999;
margin-right: 5px;
cursor: pointer;
background: #fff;
}
#page-coat a:hover{
border: 1px solid #FF6600;
background-color: #FF6600;
color: #fff;
}
#page-coat span{
display: inline;
float: left;
color:#999;
background: #fff;
}
#page-coat a.lmw-current{
color: #FF6600;
border: 1px solid #FF6600;
background-color: #FFEEE5;
}
</style>
</head>
<body class="l-bg2">
<p id="page-coat">
</p>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var conf = {
'total':100,
'click':function(e){ //e为当前页码
/* $.get('/php',{"page":e},function(data){
console.log('ok')
})*/
}
}
var page = new pageFunc(conf);
</script>
</html>로그인 후 복사
네이티브를 사용하는 것은 여전히 번거롭습니다. 비즈니스를 구현하려면 JQ를 모방한 .on 이벤트 바인딩 방법을 캡슐화해야 합니다. 작성은 비교적 간단하며 일부 구성 인터페이스가 노출되지 않아 추상적으로 노출될 수 있습니다.
위 내용은 페이징 효과를 얻기 위해 네이티브 자바스크립트를 사용하는 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
