Bu, bir süre önce görünüm pencerelerini algılamak için javascript kullanabileceğiniz bir JS sınıfıdır, titiz testlerden geçirilmemiştir, ancak çalışır.
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;
}
Temelde böyle kullanırsın
ResJS()
.breakpoint(0,600)
.enter(function(min,max){
console.log(min,max,'enter');
})
.leave(function(min,max){
console.log(min,max,'leave');
});
Kesme noktası, genişlik için min / maks parametrelerine, daha sonra onu girmek ve ayrılmak için zincirlenmiş bir işleve sahiptir ve bazı JS kodlarını çalıştırmak için bir geri çağrı vardır.
Çok uzun zaman önce yaptığım gibi, nasıl çalıştığına dair ayrıntılı bir şekilde ilerleyemem, ancak yardımcı olursa ücretsiz olarak kullanabilirsiniz. Bu, görünüm penceresine göre ajax aracılığıyla modülleri yüklemek için kullanılabilir. Joomla com_ajax bu gerçekten bazı harika özellikler yapmak için kullanılabilir inanıyoruz.