Selectable উইজেট: এক বা একাধিক এলিমেন্ট সিলেকশন

jQueryUI Selectable উইজেট ব্যবহারকারীদের এক বা একাধিক এলিমেন্ট নির্বাচন করতে সহায়তা করে। এটি সাধারণত তালিকা বা গ্রিডভিত্তিক UI উপাদানগুলিতে ব্যবহৃত হয়, যেখানে ব্যবহারকারী বিভিন্ন আইটেম বা এলিমেন্ট নির্বাচন করতে পারে। এটি ইন্টারেক্টিভ এবং ইউজার-বান্ধব, এবং এমন সিস্টেমে ব্যবহৃত হতে পারে যেখানে ব্যবহারকারীরা একাধিক আইটেম চিহ্নিত করে বা নির্বাচন করে।

jQueryUI Selectable উইজেট তৈরি করার প্রক্রিয়া

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

প্রথমে, আপনাকে jQuery এবং jQueryUI এর সিএসএস ও জাভাস্ক্রিপ্ট ফাইলগুলো আপনার HTML ফাইলে যুক্ত করতে হবে।

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

<!-- jQueryUI CSS লোড -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQueryUI JS লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

২. HTML এলিমেন্ট তৈরি

এখন, আপনি একটি সাধারণ তালিকা বা গ্রিড তৈরি করবেন যেখানে এলিমেন্টগুলো সিলেক্ট করা যাবে। উদাহরণস্বরূপ, একটি তালিকা তৈরি করা হলো:

<ul id="selectable">
  <li class="ui-widget-content">আইটেম ১</li>
  <li class="ui-widget-content">আইটেম ২</li>
  <li class="ui-widget-content">আইটেম ৩</li>
  <li class="ui-widget-content">আইটেম ৪</li>
  <li class="ui-widget-content">আইটেম ৫</li>
</ul>

<p>নির্বাচিত আইটেম সংখ্যা: <span id="selected-count">0</span></p>

এখানে একটি ul তালিকা রয়েছে, যেখানে পাঁচটি li আইটেম রয়েছে। আপনি চাইলে এটি গ্রিড বা অন্য কোনো কনটেইনারেও ব্যবহার করতে পারেন।

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

এখন, আমরা jQueryUI Selectable উইজেট ব্যবহার করে এই তালিকার আইটেমগুলোকে সিলেক্টেবল বানাবো। নিচের কোডটি ব্যবহার করুন:

$(document).ready(function() {
  $("#selectable").selectable({
    stop: function() {
      // সিলেক্ট করা আইটেমের সংখ্যা আপডেট করা
      var selectedItems = $("#selectable .ui-selected").length;
      $("#selected-count").text(selectedItems);
    }
  });
});

এখানে #selectable এলিমেন্টটি selectable() ফাংশন দ্বারা সিলেক্টেবল করা হয়েছে। stop ইভেন্ট ব্যবহার করে সিলেক্ট করা আইটেমের সংখ্যা গণনা করা হয় এবং এটি UI তে প্রদর্শন করা হয়।

৪. কাস্টমাইজেশন

jQueryUI Selectable উইজেটটি কিছু কাস্টমাইজেশন অপশন সরবরাহ করে, যেমন:

• filter: আপনি কোন উপাদান নির্বাচন করতে চান তা নির্দিষ্ট করতে পারেন। উদাহরণস্বরূপ, শুধুমাত্র .selectable-item ক্লাসযুক্ত এলিমেন্টগুলো নির্বাচনযোগ্য হতে পারে।

  $("#selectable").selectable({
    filter: ".selectable-item"  // শুধুমাত্র .selectable-item ক্লাসযুক্ত এলিমেন্ট সিলেক্ট করা যাবে
  });
  

• selectedClass: আপনি সিলেক্ট করা আইটেমের জন্য CSS ক্লাস কাস্টমাইজ করতে পারেন।

  $("#selectable").selectable({
    selectedClass: "custom-selected-class"
  });
  

  এরপর আপনি এই ক্লাসের মাধ্যমে সিলেক্টেড আইটেমের ডিজাইন কাস্টমাইজ করতে পারবেন।

  .custom-selected-class {
    background-color: #4CAF50;
    color: white;
  }
  

• multiple selection: আপনি একাধিক আইটেম সিলেক্ট করতে চাইলে shift বা ctrl কি সহ ব্যবহার করতে পারবেন।

৫. ব্যবহারকারীর ইন্টারঅ্যাকশন

এখন, আপনি যখন তালিকা আইটেমগুলোর উপর ক্লিক করবেন, তখন সেই আইটেমটি নির্বাচিত হবে। একাধিক আইটেম নির্বাচন করতে আপনি shift বা ctrl কী ধরে রাখতে পারেন। সিলেক্ট করা আইটেমগুলোর উপর ক্লিক করলে তাদের ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হবে এবং নির্বাচন করা আইটেমের সংখ্যা প্রদর্শিত হবে।

৬. অন্যান্য উদাহরণ

আপনি jQueryUI Selectable উইজেটটি অন্যান্য UI উপাদান যেমন ছবি বা টেবিলের সেলেও ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

<div id="image-gallery">
  <img src="image1.jpg" class="ui-widget-content" />
  <img src="image2.jpg" class="ui-widget-content" />
  <img src="image3.jpg" class="ui-widget-content" />
</div>

<script>
  $(document).ready(function() {
    $("#image-gallery").selectable({
      stop: function() {
        var selectedImages = $("#image-gallery .ui-selected").length;
        alert("নির্বাচিত ছবি সংখ্যা: " + selectedImages);
      }
    });
  });
</script>

উপসংহার

jQueryUI Selectable উইজেট ব্যবহার করে আপনি সহজেই এক বা একাধিক আইটেম সিলেক্ট করতে পারেন। এটি তালিকা, গ্রিড, বা অন্যান্য এলিমেন্টগুলিতে ব্যবহৃত হতে পারে এবং ব্যবহারকারী-বান্ধব UI তৈরি করতে সহায়তা করে। কাস্টমাইজেশন অপশনের মাধ্যমে আপনি নির্বাচিত আইটেমের ডিজাইন পরিবর্তন করতে পারেন, একাধিক আইটেম নির্বাচন করতে সহায়তা করতে পারেন এবং আরও অনেক কিছু করতে পারেন।