Đây là một lớp JS tôi đã tạo cách đây một thời gian có thể sử dụng javascript để phát hiện các khung nhìn, nó chưa bao giờ được đưa vào thử nghiệm nghiêm ngặt nhưng hoạt động.
function ResJS(){
this.min = 0;
this.max = 0;
this.config = config;
this.width = function(){
return jQuery(window).width();
}
this.breakpoint = function(min,max){
this.min = min;
this.max = max;
this.outside = false;
this.inside = false;
this.triggeredOut = false;
this.triggeredIn = false;
this.enter = function(callback){
var context = this;
jQuery(window).on('resize',function(){
if(context.min<context.width()&&context.max>context.width()){
if(!context.triggeredIn){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.inside = true; //browser width has entered breakpoint
context.outside = false; //browser has left another breakpoint
context.triggeredIn = true; //triggered event for breakpoint
context.triggeredOut = false; //be ready to trigger leave event
}
}else{
context.inside = false; //browser width is not within breakpoint
context.outside = true; //brower width is outside of breakpoint
}
});
if(context.min<context.width()&&context.max>context.width()){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.inside = true;
context.outside = false;
context.triggeredIn = true;
context.triggeredOut = false;
}else{
context.inside = false;
context.outside = true;
context.triggeredOut = true;
context.triggeredIn = false;
}
return this;
}
this.leave = function(callback){
var context = this;
jQuery(window).on('resize',function(){
if(context.outside&&!context.triggeredOut){
jQuery(document).ready(function(){callback(context.min,context.max)});
context.triggeredIn = false;
context.triggeredOut = true;
}
});
return this;
}
return this;
}
return this;
}
Về cơ bản bạn sử dụng nó như thế này
ResJS()
.breakpoint(0,600)
.enter(function(min,max){
console.log(min,max,'enter');
})
.leave(function(min,max){
console.log(min,max,'leave');
});
Breakpoint có các tham số tối thiểu / tối đa cho chiều rộng, sau đó là một chuỗi được nối để nhập và rời đi, với một cuộc gọi lại để chạy một số mã JS.
Tôi không thể đi chi tiết về cách thức hoạt động của nó, vì tôi đã làm nó rất lâu rồi nhưng bạn có thể sử dụng nó miễn phí nếu nó có ích. Điều này có thể được sử dụng để tải các mô-đun thông qua ajax dựa trên chế độ xem. Tôi tin rằng com_ajax của j Joomla có thể được sử dụng với điều này để tạo ra một số tính năng thực sự thú vị.