Materialize এর Events এবং Callback Functions

Materialize CSS একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা অনেক ধরনের ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস উপাদান প্রদান করে, যেমন modals, side navs, tooltips, tabs, ইত্যাদি। এগুলোর অনেকেরই events এবং callback functions থাকতে পারে, যা ব্যবহারকারী ইন্টারঅ্যাকশন বা অ্যাকশনগুলির প্রতি প্রতিক্রিয়া প্রদান করে। Materialize এর JavaScript components সঠিকভাবে কাজ করার জন্য এই ইভেন্ট এবং কলব্যাক ফাংশন ব্যবহার করা প্রয়োজন।

এখানে Materialize এর ইভেন্ট এবং কলব্যাক ফাংশন সম্পর্কে বিস্তারিত আলোচনা করা হলো, যাতে আপনি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটে ইন্টারঅ্যাকটিভ ফিচারগুলো আরও ভালোভাবে কাস্টমাইজ এবং কন্ট্রোল করতে পারেন।

Materialize এর ইভেন্টস

Materialize CSS বিভিন্ন কনট্রোল এবং উপাদান প্রয়োগের জন্য ইভেন্ট হ্যান্ডলার সরবরাহ করে। কিছু সাধারণ ইভেন্ট যা আপনি ব্যবহার করতে পারেন:

১. Modal Events

Modals (পপ-আপ উইন্ডো) এর সাথে ইভেন্ট হ্যান্ডলিং করার জন্য বিভিন্ন ইভেন্ট ব্যবহার করা যেতে পারে, যেমন open, close, এবং opened।

$(document).ready(function(){
  // Modal open event
  $('.modal').modal({
    onOpenStart: function() {
      console.log("Modal is opening...");
    },
    onOpenEnd: function() {
      console.log("Modal opened.");
    },
    onCloseStart: function() {
      console.log("Modal is closing...");
    },
    onCloseEnd: function() {
      console.log("Modal closed.");
    }
  });
});

এখানে:

• onOpenStart: যখন modal খোলা শুরু হয়।
• onOpenEnd: যখন modal পুরোপুরি খোলা হয়।
• onCloseStart: যখন modal বন্ধ হতে শুরু করে।
• onCloseEnd: যখন modal পুরোপুরি বন্ধ হয়ে যায়।

২. Tooltip Events

Tooltips সাধারণত কোনো উপাদানে মাউস হোভার বা ফোকাসের মাধ্যমে প্রদর্শিত হয়। আপনি open এবং close ইভেন্টগুলো ব্যবহার করতে পারেন।

$(document).ready(function(){
  $('.tooltipped').tooltip({
    enterDelay: 300,
    outDelay: 300,
    onOpen: function() {
      console.log("Tooltip opened!");
    },
    onClose: function() {
      console.log("Tooltip closed!");
    }
  });
});

এখানে:

• onOpen: Tooltip যখন প্রদর্শিত হবে তখন কলব্যাক কার্যকর হবে।
• onClose: Tooltip যখন বন্ধ হবে তখন কলব্যাক কার্যকর হবে।

৩. Sidenav Events

Sidenav মেনুর জন্যও কিছু ইভেন্ট হ্যান্ডলিং অপশন রয়েছে, যেমন open এবং close ইভেন্ট।

$(document).ready(function(){
  $('.sidenav').sidenav({
    onOpenStart: function() {
      console.log("Sidenav is opening...");
    },
    onCloseStart: function() {
      console.log("Sidenav is closing...");
    }
  });
});

এখানে:

• onOpenStart: যখন sidenav খোলার প্রক্রিয়া শুরু হবে।
• onCloseStart: যখন sidenav বন্ধ হতে শুরু করবে।

৪. Collapsible Events

Collapsible এলিমেন্টের জন্য open এবং close ইভেন্ট ব্যবহার করা যেতে পারে।

$(document).ready(function(){
  $('.collapsible').collapsible({
    onOpenStart: function() {
      console.log("Collapsible item is opening...");
    },
    onCloseStart: function() {
      console.log("Collapsible item is closing...");
    }
  });
});

এখানে:

• onOpenStart: যখন collapsible আইটেমটি খোলার জন্য প্রস্তুত হবে।
• onCloseStart: যখন collapsible আইটেমটি বন্ধ হতে শুরু করবে।

Materialize Callback Functions

Callback functions হল এমন ফাংশন যা ইভেন্টের শেষে বা নির্দিষ্ট সময়ের পর কল হয়। Materialize CSS বিভিন্ন উইজেট বা উপাদানের জন্য কলব্যাক ফাংশন প্রদান করে, যাতে আপনি আপনার অ্যাপ্লিকেশনে প্রয়োজনীয় কাস্টম ফাংশনালিটি যোগ করতে পারেন।

১. Modal Callback Functions

Modal এর জন্য callback ফাংশন যেমন onOpenStart, onCloseEnd ইত্যাদি ব্যবহার করা যায়।

$(document).ready(function(){
  $('.modal').modal({
    onOpenStart: function() {
      alert("Modal is opening...");
    },
    onCloseEnd: function() {
      alert("Modal has closed!");
    }
  });
});

এখানে:

• onOpenStart: Modal খোলার সময় ট্রিগার হবে।
• onCloseEnd: Modal বন্ধ হওয়ার পর কলব্যাক ফাংশনটি চালু হবে।

২. Carousel Callback Functions

Carousel উইজেটের জন্যও কলব্যাক ফাংশন ব্যবহার করা যেতে পারে, যেমন যখন একটি স্লাইড পরিবর্তিত হয়।

$(document).ready(function(){
  $('.carousel').carousel({
    onCycleTo: function(current) {
      console.log("Currently showing slide number " + current);
    }
  });
});

এখানে:

• onCycleTo: স্লাইড পরিবর্তন হওয়ার সময় কলব্যাক ফাংশনটি চালু হবে এবং বর্তমান স্লাইডের নম্বরটি দেখাবে।

৩. Toast Callback Function

Toast notifications এর জন্যও callback ফাংশন ব্যবহার করা যেতে পারে, যেমন টোস্ট প্রদর্শিত হওয়ার পর কী হবে।

$(document).ready(function(){
  M.toast({
    html: 'This is a custom toast!',
    completeCallback: function() {
      console.log("Toast has been closed.");
    }
  });
});

এখানে:

• completeCallback: টোস্ট বন্ধ হওয়া পর কলব্যাক ফাংশনটি চালু হবে।

উপসংহার

Materialize CSS-এর events এবং callback functions ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তুলতে পারেন। Modals, tooltips, side navs, collapsibles, carousel, এবং toast notifications এর মতো উপাদানগুলির জন্য Materialize ইভেন্ট হ্যান্ডলিং এবং কাস্টম কলব্যাক ফাংশন প্রদান করে, যা আপনাকে ইউজার ইন্টারঅ্যাকশনের প্রতি সঠিকভাবে প্রতিক্রিয়া জানাতে সহায়তা করে। এই ফিচারগুলো আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করবে।