यह एक जेएस वर्ग है जिसे मैंने कुछ समय पहले बनाया था जो दर्शकों का पता लगाने के लिए जावास्क्रिप्ट का उपयोग कर सकता था, इसे कठोर परीक्षण या कार्यों के माध्यम से कभी नहीं रखा गया है।
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');
});
ब्रेकपॉइंट में चौड़ाई के लिए न्यूनतम / अधिकतम पैरामीटर हैं, फिर इसे दर्ज करने और छोड़ने के लिए एक जंजीर फ़ंक्शन, कुछ जेएस कोड चलाने के लिए कॉलबैक के साथ।
मैं इस बात पर विस्तार से नहीं जा सकता कि यह कैसे काम करता है, जैसा कि मैंने इसे बहुत पहले बनाया था, लेकिन अगर यह मदद करेगा तो इसका उपयोग करने के लिए आपका मुफ्त होगा। यह व्यूपोर्ट के आधार पर अजाक्स के माध्यम से मॉड्यूल को लोड करने के लिए उपयोग किया जा सकता है। मेरा मानना है कि जूमला के com_ajax का उपयोग इसके साथ किया जा सकता है ताकि वास्तव में कुछ शांत सुविधाएँ मिल सकें।