Slider এবং Spinner এর মধ্যে Events পরিচালনা

jQueryUI বিভিন্ন ইন্টারেক্টিভ উইজেট সরবরাহ করে, যার মধ্যে Slider এবং Spinner অন্যতম। এই দুটি উইজেট ব্যবহারকারীদের ইনপুট নেওয়ার জন্য একটি গ্রাফিক্যাল উপায় প্রদান করে, এবং প্রতিটি ইনপুটের জন্য কিছু events বা ইভেন্ট হ্যান্ডলিং প্রয়োজন হতে পারে। নিচে আমরা দেখব কিভাবে Slider এবং Spinner এর মধ্যে events পরিচালনা করা যায়।

Slider উইজেট এবং Events

Slider উইজেট ব্যবহারকারীকে একটি পরিসরের মধ্যে মান নির্বাচন করতে সাহায্য করে। এটি সাধারণত একটি বার বা লাইনের উপর চলমান একটি পয়েন্ট (থাম্ব) দ্বারা নিয়ন্ত্রণ করা হয়। jQueryUI Slider উইজেটটি বিভিন্ন ধরনের ইভেন্ট হ্যান্ডলিং সমর্থন করে, যেমন:

১. slide ইভেন্ট

slide ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী স্লাইডারটি টেনে নেন এবং মান পরিবর্তন হয়।

$(function() {
  $( "#slider" ).slider({
    slide: function(event, ui) {
      $( "#slider-value" ).text( ui.value ); // মান প্রদর্শন
    }
  });
});

এখানে, slide ইভেন্টের মাধ্যমে আমরা স্লাইডারটি টেনে মান পরিবর্তন করার সময় স্লাইডারের মান ui.value দিয়ে বের করি এবং সেটি একটি এলিমেন্টে দেখাই।

২. change ইভেন্ট

change ইভেন্টটি তখন ট্রিগার হয় যখন স্লাইডারটি কোন নতুন মানে পৌঁছায় (যতক্ষণ না ব্যবহারকারী থামান)।

$(function() {
  $( "#slider" ).slider({
    change: function(event, ui) {
      $( "#slider-change-value" ).text( ui.value ); // পরিবর্তিত মান দেখানো
    }
  });
});

এখানে change ইভেন্টটি ব্যবহৃত হচ্ছে, যা স্লাইডার মান পরিবর্তন হওয়ার পর কার্যকর হবে।

৩. start এবং stop ইভেন্ট

start ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী স্লাইডারটি টেনে শুরু করেন, এবং stop ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী স্লাইডিং থামান।

$(function() {
  $( "#slider" ).slider({
    start: function(event, ui) {
      console.log("Slider started");
    },
    stop: function(event, ui) {
      console.log("Slider stopped at: " + ui.value);
    }
  });
});

এখানে, start এবং stop ইভেন্ট ব্যবহার করে স্লাইডারটি শুরু এবং শেষ হওয়ার সময় কনসোল লগ তৈরি করা হচ্ছে।

Spinner উইজেট এবং Events

Spinner উইজেটটি ব্যবহারকারীদের জন্য একটি ইনপুট ফিল্ড প্রদান করে, যেখানে তারা সংখ্যার মান বাড়াতে বা কমাতে পারেন। এটি সাধারণত ব্যবহারকারীকে নির্দিষ্ট পরিসরে মান বাড়াতে বা কমাতে সাহায্য করে। Spinner উইজেটেও বেশ কিছু ইভেন্ট হ্যান্ডলিং করা যায়, যেমন:

১. spin ইভেন্ট

spin ইভেন্টটি তখন ট্রিগার হয় যখন Spinner ইনপুটের মান পরিবর্তন হয়, অর্থাৎ ব্যবহারকারী "+" বা "-" বাটন ক্লিক করেন।

$(function() {
  $( "#spinner" ).spinner({
    spin: function(event, ui) {
      $( "#spinner-value" ).text( ui.value ); // মান প্রদর্শন
    }
  });
});

এখানে, spin ইভেন্ট ব্যবহারকারী যখন Spinner বাটন ক্লিক করেন, তখন নতুন মান ui.value দ্বারা আনা হয় এবং সেটি প্রদর্শন করা হয়।

২. change ইভেন্ট

change ইভেন্টটি তখন ট্রিগার হয় যখন Spinner ইনপুটের মান পরিবর্তিত হয় এবং ব্যবহারকারী ইনপুট ফিল্ডটি পরিবর্তন করেন।

$(function() {
  $( "#spinner" ).spinner({
    change: function(event, ui) {
      $( "#spinner-change-value" ).text( ui.value ); // পরিবর্তিত মান দেখানো
    }
  });
});

এখানে change ইভেন্ট ব্যবহার করে ইনপুট মান পরিবর্তন হওয়ার পর আমরা নতুন মান দেখাচ্ছি।

৩. focus এবং blur ইভেন্ট

focus ইভেন্টটি তখন ট্রিগার হয় যখন Spinner ইনপুট ফিল্ডে ফোকাস করা হয়, এবং blur ইভেন্টটি তখন ট্রিগার হয় যখন ফোকাস হারানো হয়।

$(function() {
  $( "#spinner" ).spinner({
    focus: function() {
      console.log("Spinner input focused");
    },
    blur: function() {
      console.log("Spinner input blurred");
    }
  });
});

এখানে, focus এবং blur ইভেন্ট ব্যবহৃত হচ্ছে ফোকাস এবং ব্লার ইভেন্ট ট্র্যাক করার জন্য।

উপসংহার

Slider এবং Spinner উইজেটগুলি jQueryUI এর অন্যতম শক্তিশালী ইন্টারফেস উপাদান। এগুলির সাথে ইভেন্ট পরিচালনা করার মাধ্যমে আপনি ওয়েব পৃষ্ঠার ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং উন্নত অভিজ্ঞতা তৈরি করতে পারেন। slide, change, spin, start, এবং stop ইভেন্টের মাধ্যমে আপনি এগুলির কার্যকলাপ নিরীক্ষণ এবং নিয়ন্ত্রণ করতে পারেন। jQueryUI এর ইভেন্ট হ্যান্ডলিং সহজ এবং কার্যকর, যা আপনার ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও স্মুথ এবং প্রাকৃতিক করে তোলে।