এটি আমি একটি জেএস ক্লাস যা কিছুক্ষণ আগে তৈরি করেছি যা ভিভপোর্টগুলি সনাক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারে, এটি কখনও কঠোর পরীক্ষার মাধ্যমে করা হয়নি তবে কাজ করে।
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');
});
ব্রেকপয়েন্টে প্রস্থের জন্য ন্যূনতম / সর্বাধিক পরামিতি রয়েছে, তারপরে এটিতে প্রবেশের জন্য একটি জড়িত ফাংশন রয়েছে এবং কিছু জেএস কোড চালানোর জন্য একটি কলব্যাক রয়েছে।
এটি কীভাবে কাজ করে সে সম্পর্কে আমি বিশদে যেতে পারি না, যেমন আমি এটি অনেক আগে তৈরি করেছিলাম তবে এটি আপনাকে সহায়তা করবে যদি এটি ব্যবহারে বিনামূল্যে। এটি ভিউপোর্টের ভিত্তিতে অজ্যাক্সের মাধ্যমে মডিউলগুলি লোড করতে ব্যবহৃত হতে পারে। আমি বিশ্বাস করি জুমলার কম_জ্যাক্স এর সাথে কিছু দুর্দান্ত বৈশিষ্ট্য তৈরি করতে ব্যবহার করা যেতে পারে।