Resizable এবং Selectable এর জন্য কাস্টম Events

jQueryUI এর Resizable এবং Selectable উইজেটগুলো ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এগুলি ব্যবহারকারীদের ইনপুট এবং ইন্টারঅ্যাকশন পরিচালনা করতে সাহায্য করে। এই উইজেটগুলির জন্য কাস্টম ইভেন্ট তৈরি করা যায়, যা ডেভেলপারদের আরও কাস্টমাইজেশন এবং ইন্টারঅ্যাকটিভ উপাদান তৈরি করতে সহায়তা করে। চলুন, আমরা দেখি কিভাবে Resizable এবং Selectable উইজেটগুলির জন্য কাস্টম ইভেন্ট ব্যবহার করা যায়।

Resizable উইজেট এবং কাস্টম Events

Resizable উইজেট ব্যবহারকারীদের একটি DOM উপাদান আকার পরিবর্তন করতে দেয়। jQueryUI এর Resizable উইজেটের মাধ্যমে আপনি একটি উপাদান (যেমন একটি ডিভ) এর আকার পরিবর্তন করতে পারবেন, এবং আপনি এর জন্য কাস্টম ইভেন্ট তৈরি করতে পারেন।

১. resize ইভেন্ট

resize ইভেন্টটি তখন ট্রিগার হয় যখন উপাদানটির আকার পরিবর্তিত হয়। এটি ব্যবহার করে আপনি যখন কোনো উপাদান আকার পরিবর্তন করবেন, তখন একটি কাস্টম ইভেন্ট চালু করতে পারবেন।

$(function() {
  $( "#resizable" ).resizable({
    resize: function(event, ui) {
      // কাস্টম ইভেন্ট
      $( "#resize-status" ).text("Width: " + ui.size.width + ", Height: " + ui.size.height);
    }
  });
});

এখানে, resize ইভেন্টে আমরা ui.size.width এবং ui.size.height দিয়ে পরিবর্তিত উপাদানের আকারটি দেখাচ্ছি। আপনি এই তথ্যগুলো ব্যবহার করে আরও কাস্টম লজিক বা কাস্টম ইভেন্ট তৈরি করতে পারেন।

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

start ইভেন্টটি তখন ট্রিগার হয় যখন রিসাইজিং শুরু হয়, এবং stop ইভেন্টটি তখন ট্রিগার হয় যখন রিসাইজিং শেষ হয়।

$(function() {
  $( "#resizable" ).resizable({
    start: function(event, ui) {
      console.log("Resize started");
    },
    stop: function(event, ui) {
      console.log("Resize stopped at Width: " + ui.size.width + ", Height: " + ui.size.height);
    }
  });
});

এখানে start এবং stop ইভেন্টগুলির মাধ্যমে রিসাইজিং প্রক্রিয়ার শুরু এবং শেষ ট্র্যাক করা হচ্ছে।

৩. Custom Event Triggering

আপনি যদি নিজে একটি কাস্টম ইভেন্ট ট্রিগার করতে চান, তবে trigger() মেথড ব্যবহার করতে পারেন।

$(function() {
  $( "#resizable" ).resizable();

  // কাস্টম ইভেন্ট ট্রিগার করা
  $( "#trigger-resize" ).click(function() {
    $( "#resizable" ).trigger("resize");
  });
});

এখানে একটি trigger-resize বাটন ক্লিক করার মাধ্যমে কাস্টম resize ইভেন্ট ট্রিগার করা হচ্ছে।

Selectable উইজেট এবং কাস্টম Events

Selectable উইজেট ব্যবহারকারীদের একাধিক উপাদান নির্বাচন করার জন্য একটি সরঞ্জাম সরবরাহ করে। এটি সাধারণত তালিকা বা গ্রিডের মধ্যে ব্যবহারকারীকে এক বা একাধিক আইটেম নির্বাচন করতে সক্ষম করে।

১. selected ইভেন্ট

selected ইভেন্টটি তখন ট্রিগার হয় যখন একটি নতুন উপাদান নির্বাচিত হয়। এটি সিলেকশন বা নির্বাচনের কাস্টম ইভেন্ট পরিচালনা করতে ব্যবহৃত হয়।

$(function() {
  $( "#selectable" ).selectable({
    selected: function(event, ui) {
      // কাস্টম ইভেন্ট
      $( "#selected-items" ).append("<p>Selected: " + ui.selected.id + "</p>");
    }
  });
});

এখানে selected ইভেন্টে ui.selected.id ব্যবহার করা হচ্ছে, যাতে সিলেক্ট করা আইটেমটির আইডি পাওয়া যায় এবং সেটি প্রদর্শন করা হয়।

২. unselected ইভেন্ট

unselected ইভেন্টটি তখন ট্রিগার হয় যখন একটি নির্বাচিত উপাদান নির্বাচন থেকে সরিয়ে নেওয়া হয়।

$(function() {
  $( "#selectable" ).selectable({
    unselected: function(event, ui) {
      // কাস্টম ইভেন্ট
      $( "#unselected-items" ).append("<p>Unselected: " + ui.unselected.id + "</p>");
    }
  });
});

এখানে, unselected ইভেন্ট ব্যবহার করে আমরা সেই আইটেমের আইডি দেখাচ্ছি যেটি আর নির্বাচিত নয়।

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

start এবং stop ইভেন্টগুলি selectable উইজেটে ব্যবহার করা যেতে পারে, যেখানে start ইভেন্টটি তখন ট্রিগার হয় যখন নির্বাচনের প্রক্রিয়া শুরু হয় এবং stop ইভেন্টটি তখন ট্রিগার হয় যখন নির্বাচন শেষ হয়।

$(function() {
  $( "#selectable" ).selectable({
    start: function(event, ui) {
      console.log("Selection started");
    },
    stop: function(event, ui) {
      console.log("Selection stopped");
    }
  });
});

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

৪. Custom Event Triggering

আপনি যদি নিজে একটি কাস্টম ইভেন্ট ট্রিগার করতে চান, তাহলে আপনি trigger() মেথড ব্যবহার করতে পারেন।

$(function() {
  $( "#selectable" ).selectable();

  // কাস্টম ইভেন্ট ট্রিগার করা
  $( "#trigger-select" ).click(function() {
    $( "#selectable" ).trigger("selected");
  });
});

এখানে, trigger-select বাটন ক্লিক করার মাধ্যমে কাস্টম selected ইভেন্ট ট্রিগার করা হচ্ছে।

উপসংহার

Resizable এবং Selectable উইজেটগুলির জন্য কাস্টম ইভেন্ট ব্যবহারের মাধ্যমে আপনি আপনার ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করতে পারেন। resize, start, stop, selected, এবং unselected ইভেন্টের মাধ্যমে আপনি ব্যবহারকারীর ইন্টারঅ্যাকশন ট্র্যাক করতে পারেন এবং তা অনুযায়ী কাস্টম লজিক বা ইভেন্ট পরিচালনা করতে পারেন। trigger() মেথড ব্যবহার করে আপনি নিজেও কাস্টম ইভেন্ট তৈরি করতে পারেন, যা আরও কাস্টমাইজেশন এবং ফাংশনালিটি প্রদান করে।