Multiple Selection এর কনফিগারেশন এবং Events

Multiple Selection একটি গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীদের একাধিক আইটেম নির্বাচন করতে সহায়তা করে। jQueryUI-তে Selectable উইজেটটি ব্যবহার করে একাধিক আইটেম নির্বাচন করা যেতে পারে। এটি সাধারণত তালিকা, টেবিল বা গ্যালারির মধ্যে ব্যবহারকারীকে একাধিক আইটেম নির্বাচন করতে সহায়তা করার জন্য ব্যবহৃত হয়।

jQueryUI Selectable উইজেট ব্যবহার

Selectable উইজেট ব্যবহার করে আপনি সহজেই একাধিক আইটেম নির্বাচন করার কার্যকারিতা যোগ করতে পারেন। এটি একটি এলিমেন্টের মধ্যে একাধিক আইটেমকে নির্বাচনযোগ্য করে তোলে এবং ব্যবহারকারীরা সেগুলি মাউস দিয়ে নির্বাচন করতে পারে।

১. প্রাথমিক সেটআপ

প্রথমে, jQuery এবং jQueryUI লোড করতে হবে:

<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- jQueryUI স্টাইল শীট -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQueryUI স্ক্রিপ্ট -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

২. HTML স্ট্রাকচার

এখন, আপনি যে এলিমেন্টটি নির্বাচনযোগ্য করতে চান, সেটি HTML-এ তৈরি করুন। নিচে একটি তালিকার উদাহরণ দেওয়া হলো:

<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

এখানে ul এলিমেন্টের মধ্যে থাকা প্রতিটি li আইটেম নির্বাচনযোগ্য হবে।

৩. jQuery কোড ব্যবহার

Selectable উইজেট সক্রিয় করতে, নিচে দেওয়া কোডটি ব্যবহার করুন:

$(document).ready(function() {
  $("#selectable").selectable();
});

এটি সহজভাবে #selectable আইডি সহ এলিমেন্টটিকে নির্বাচনযোগ্য করে তুলবে, এবং ব্যবহারকারী মাউস দিয়ে একাধিক আইটেম নির্বাচন করতে পারবে।

৪. কনফিগারেশন এবং কাস্টমাইজেশন

Selectable উইজেটটি বিভিন্ন কনফিগারেশন অপশন প্রদান করে, যা আপনাকে তার কার্যকারিতা কাস্টমাইজ করতে সহায়তা করে। কিছু সাধারণ কনফিগারেশন নিচে আলোচনা করা হলো:

১. Selected Class

প্রতিটি নির্বাচিত আইটেমের জন্য একটি CSS ক্লাস যোগ করা যাবে। ডিফল্টভাবে এটি ui-selected ক্লাস ব্যবহার করে, তবে আপনি এটি কাস্টমাইজ করতে পারেন।

$(document).ready(function() {
  $("#selectable").selectable({
    selected: function(event, ui) {
      $(ui.selected).css("background-color", "yellow");  // নির্বাচিত আইটেমের ব্যাকগ্রাউন্ড হল হলুদ
    }
  });
});

২. Filter: কেবল নির্দিষ্ট আইটেম নির্বাচন করতে অনুমতি দিন

$(document).ready(function() {
  $("#selectable").selectable({
    filter: "li"  // শুধুমাত্র li ট্যাগের মধ্যে নির্বাচিত আইটেম হবে
  });
});

৩. Auto-Deselect: স্বয়ংক্রিয়ভাবে নির্বাচন অপসারণ করা

$(document).ready(function() {
  $("#selectable").selectable({
    autoDeselect: true  // এটি ব্যবহারকারী যখন মাউসের বাইরে ক্লিক করবে তখন নির্বাচিত আইটেম অপসারণ হবে
  });
});

৪. Selecting ও Unselecting Events: যখন কোনো আইটেম নির্বাচন বা অপ্রত্যাশিতভাবে নির্বাচিত হয় তখন ইভেন্ট ট্রিগার হবে।

$(document).ready(function() {
  $("#selectable").selectable({
    selecting: function(event, ui) {
      console.log("নির্বাচন করা হচ্ছে: " + ui.selecting.innerHTML);  // নির্বাচিত আইটেমের নাম
    },
    unselecting: function(event, ui) {
      console.log("অপ্রত্যাশিতভাবে নির্বাচন করা হচ্ছে: " + ui.unselecting.innerHTML);  // অপ্রত্যাশিতভাবে নির্বাচিত আইটেমের নাম
    }
  });
});

৫. Multiple Selection: একাধিক আইটেম নির্বাচন

Selectable উইজেটটি ব্যবহারকারীকে একাধিক আইটেম নির্বাচন করতে সহায়তা করে। ব্যবহারকারী একটি আইটেমে ক্লিক করলে, সেটি নির্বাচিত হবে এবং আবার ক্লিক করলে তা অপ্রত্যাশিত হয়ে যাবে।

এছাড়া, আপনি Shift বা Ctrl/Cmd কী ব্যবহার করে একাধিক আইটেম নির্বাচন করতে পারেন। এই কনফিগারেশনটি ডিফল্টভাবে সমর্থিত।

৬. Select All Button তৈরি

একটি Select All বাটন যোগ করে আপনি ব্যবহারকারীদের সকল আইটেম একসাথে নির্বাচন করার সুবিধা দিতে পারেন। উদাহরণস্বরূপ:

<button id="selectAll">Select All</button>

$(document).ready(function() {
  $("#selectAll").click(function() {
    $("#selectable li").addClass("ui-selected");  // সমস্ত আইটেম নির্বাচন
  });
});

৭. Events: Selectable উইজেটের সাথে সম্পর্কিত কিছু সাধারণ ইভেন্ট:

• selected: যখন কোনো আইটেম নির্বাচন করা হয়।
• unselected: যখন কোনো আইটেম নির্বাচন বাতিল হয়।
• selecting: যখন কোনো আইটেম নির্বাচন করা হচ্ছে।
• unselecting: যখন কোনো আইটেমের নির্বাচন বাতিল হচ্ছে।

উদাহরণ:

$(document).ready(function() {
  $("#selectable").selectable({
    selected: function(event, ui) {
      alert("নির্বাচিত হয়েছে: " + ui.selected.innerHTML);
    },
    unselected: function(event, ui) {
      alert("নির্বাচন বাতিল হয়েছে: " + ui.unselected.innerHTML);
    }
  });
});

উপসংহার

jQueryUI Selectable উইজেট একটি শক্তিশালী এবং সহজ উপায়, যা ব্যবহারকারীদের একাধিক আইটেম নির্বাচন করতে সহায়তা করে। এটি বিভিন্ন কনফিগারেশন এবং কাস্টমাইজেশন অপশন প্রদান করে, যেমন selected class, filter, auto-deselect এবং বিভিন্ন ইভেন্ট হ্যান্ডলিং অপশন। আপনি Multiple Selection এবং Select All বাটনের সাহায্যে ব্যবহারকারীর ইন্টারঅ্যাকশন উন্নত করতে পারেন।