นี่คือคลาส JS ที่ฉันทำเมื่อไม่นานมานี้ที่สามารถใช้จาวาสคริปต์เพื่อตรวจจับวิวพอร์ตมันไม่เคยผ่านการทดสอบอย่างเข้มงวด แต่ใช้งานได้
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;
}
โดยทั่วไปคุณใช้มันแบบนี้
ResJS()
.breakpoint(0,600)
.enter(function(min,max){
console.log(min,max,'enter');
})
.leave(function(min,max){
console.log(min,max,'leave');
});
จุดพักมีพารามิเตอร์ต่ำสุด / สูงสุดสำหรับความกว้างจากนั้นฟังก์ชั่นที่ถูกล่ามโซ่สำหรับการเข้าและออกด้วยการโทรกลับเพื่อเรียกใช้รหัส JS บางส่วน
ฉันไม่สามารถอธิบายรายละเอียดเกี่ยวกับวิธีการทำงานได้อย่างที่ฉันเคยทำเมื่อนานมาแล้ว แต่คุณสามารถใช้งานได้ฟรีหากมันจะช่วยได้ สิ่งนี้สามารถใช้เพื่อโหลดโมดูลผ่าน ajax ตามวิวพอร์ต ฉันเชื่อว่า com_ajax ของ joomla สามารถใช้กับสิ่งนี้เพื่อสร้างคุณสมบัติที่ยอดเยี่ยมจริงๆ