jQueryUI এর রিসাইজ এবং সিলেকশন

জেকুয়েরি ইউআই (jqueryUI) - Web Development

295

jQueryUI কিছু শক্তিশালী ইন্টারেক্টিভ উইজেট সরবরাহ করে, যার মধ্যে অন্যতম হলো রিসাইজ (Resize) এবং সিলেকশন (Selectable) উইজেট। এই দুটি ফিচার আপনাকে ইউজারদের সঙ্গে আরও ইন্টারঅ্যাকটিভ ও কাস্টমাইজড উপায়ে ওয়েব পৃষ্ঠার উপাদানগুলো ম্যানিপুলেট করতে সহায়তা করে।

১. jQueryUI রিসাইজ (Resize)

রিসাইজ উইজেট ব্যবহারকারীদের একটি DOM উপাদান (যেমন ডিভ) আকার পরিবর্তন করতে দেয়। এটি একটি খুবই কার্যকরী টুল বিশেষভাবে যদি আপনি ড্র্যাগ-এন্ড-ড্রপ ফিচার সংযুক্ত করে উপাদানের আকার পরিবর্তন করতে চান।

রিসাইজ উইজেট ব্যবহার করা

<div id="resizeBox" style="width: 200px; height: 200px; background-color: lightblue;">
  রিসাইজ করুন
</div>

<script>
  $(document).ready(function() {
    $("#resizeBox").resizable();  // রিসাইজ উইজেট যোগ করা
  });
</script>

রিসাইজ উইজেট কাস্টমাইজেশন

minWidth এবং minHeight: রিসাইজারের সর্বনিম্ন আকার নির্ধারণ করতে ব্যবহৃত হয়।
```
$("#resizeBox").resizable({
  minWidth: 100,
  minHeight: 100
});
```
maxWidth এবং maxHeight: রিসাইজারের সর্বোচ্চ আকার নির্ধারণ করতে ব্যবহৃত হয়।
```
$("#resizeBox").resizable({
  maxWidth: 500,
  maxHeight: 500
});
```
aspectRatio: আপনি যদি চান যে উপাদানটির দৈর্ঘ্য এবং প্রস্থ একই অনুপাতে রিসাইজ হোক, তবে aspectRatio ব্যবহার করতে পারেন।
```
$("#resizeBox").resizable({
  aspectRatio: true
});
```

২. jQueryUI সিলেকশন (Selectable)

সিলেকশন উইজেট ব্যবহারকারীদের একটি DOM উপাদান থেকে এক বা একাধিক আইটেম নির্বাচন করতে দেয়। এটি সাধারণত তালিকা, চেকবক্স বা ছবির গ্যালারি ইত্যাদিতে ব্যবহৃত হয়, যেখানে ব্যবহারকারী একাধিক আইটেম নির্বাচন করতে পারে।

সিলেকশন উইজেট ব্যবহার করা

<ul id="selectable">
  <li>আইটেম 1</li>
  <li>আইটেম 2</li>
  <li>আইটেম 3</li>
  <li>আইটেম 4</li>
  <li>আইটেম 5</li>
</ul>

<script>
  $(document).ready(function() {
    $("#selectable").selectable();  // সিলেকশন উইজেট যোগ করা
  });
</script>

সিলেকশন উইজেট কাস্টমাইজেশন

selected: ব্যবহারকারী যখন একটি আইটেম নির্বাচন করেন, তখন এর উপর ভিত্তি করে একটি ফাংশন ট্রিগার করা যেতে পারে।
```
$("#selectable").selectable({
  selected: function(event, ui) {
    alert("নির্বাচিত আইটেম: " + ui.selected);
  }
});
```
filter: আপনি যদি চান যে শুধু কিছু নির্দিষ্ট আইটেমই নির্বাচনযোগ্য হোক, তাহলে filter ব্যবহার করতে পারেন।
```
$("#selectable").selectable({
  filter: "li"  // শুধুমাত্র <li> আইটেমগুলি নির্বাচনযোগ্য হবে
});
```

৩. সিলেকশন এবং রিসাইজ একসাথে ব্যবহার করা

আপনি যদি একই পৃষ্ঠায় সিলেকশন এবং রিসাইজ উইজেট ব্যবহার করতে চান, তবে এটি খুব সহজেই সম্ভব। উদাহরণস্বরূপ, নিচের কোডে একটি সিলেক্টেবল আইটেমের ভিতরে রিসাইজার যোগ করা হয়েছে:

<div id="resizeBox" style="width: 200px; height: 200px; background-color: lightblue;">
  <ul id="selectable">
    <li>আইটেম 1</li>
    <li>আইটেম 2</li>
    <li>আইটেম 3</li>
    <li>আইটেম 4</li>
  </ul>
</div>

<script>
  $(document).ready(function() {
    // সিলেকশন উইজেট
    $("#selectable").selectable();

    // রিসাইজ উইজেট
    $("#resizeBox").resizable();
  });
</script>

এখানে, সিলেকশন উইজেট ব্যবহারকারীকে একটি তালিকা নির্বাচন করতে সাহায্য করবে, এবং রিসাইজ উইজেট সেই তালিকার চারপাশের ডিভটি রিসাইজ করার সুযোগ দেবে।

উপসংহার

jQueryUI রিসাইজ এবং সিলেকশন উইজেটগুলি ইন্টারঅ্যাকটিভ এবং কাস্টমাইজেবল উপাদান প্রদান করে, যা আপনার ওয়েব পেজের ইউজার এক্সপিরিয়েন্সকে আরও উন্নত করতে সাহায্য করে। রিসাইজ উইজেট ব্যবহারকারীকে একটি DOM উপাদান আকার পরিবর্তন করতে সাহায্য করে, এবং সিলেকশন উইজেট ব্যবহারকারীদের এক বা একাধিক আইটেম নির্বাচন করতে দেয়। এই উইজেটগুলো ব্যবহার করে আপনি একটি অত্যন্ত ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ তৈরি করতে পারবেন যা ব্যবহারকারীদের আরও ভালো অভিজ্ঞতা প্রদান করবে।

Content added By

Rezwan Siddiki Tamim

Resizable উইজেট: এলিমেন্ট রিসাইজ করা

296

jQueryUI Resizable উইজেট ব্যবহার করে আপনি আপনার ওয়েব পেজের এলিমেন্টগুলোকে রিসাইজ করার সুবিধা দিতে পারেন। এর মাধ্যমে ব্যবহারকারীরা একটি নির্দিষ্ট এলিমেন্টের আকার পরিবর্তন করতে পারেন, যেমন একটি ডিভ, ইমেজ বা অন্য কোন কনটেইনার। এটি ইউজার ইন্টারফেসে ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য উপাদান যুক্ত করতে সাহায্য করে।

jQueryUI Resizable উইজেট ব্যবহার করে এলিমেন্ট রিসাইজ করা

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

প্রথমে, আপনাকে jQuery এবং jQueryUI এর CSS এবং JavaScript ফাইলগুলো আপনার HTML পৃষ্ঠায় লোড করতে হবে। উদাহরণস্বরূপ:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryUI Resizable উদাহরণ</title>

    <!-- 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>
</head>
<body>

    <!-- রিসাইজেবল এলিমেন্ট -->
    <div id="resizable" style="width: 200px; height: 150px; background-color: lightblue;">
        <p>এটি একটি রিসাইজেবল এলিমেন্ট।</p>
    </div>

    <script>
        $(document).ready(function() {
            // এলিমেন্ট রিসাইজেবল করা
            $("#resizable").resizable();  // রিসাইজ ফিচার চালু করা
        });
    </script>

</body>
</html>

২. কোড ব্যাখ্যা

HTML এলিমেন্ট:
- #resizable আইডি সহ একটি ডিভ তৈরি করা হয়েছে, যার মধ্যে কিছু কনটেন্ট রয়েছে।
- এই ডিভটি রিসাইজেবল হবে, অর্থাৎ ব্যবহারকারী তার আকার পরিবর্তন করতে পারবেন।
jQueryUI Resizable উইজেট ইনিশিয়েট করা:
- $("#resizable").resizable(); কোডটি ব্যবহার করে আমরা ডিভটি রিসাইজেবল করেছি।
- এটি এলিমেন্টটির সীমানায় হ্যান্ডলগুলি যোগ করবে, যেগুলি ব্যবহারকারীরা টেনে এনে এলিমেন্টটির আকার পরিবর্তন করতে পারবেন।

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

আপনি jQueryUI Resizable উইজেটটি কাস্টমাইজ করতে পারেন, যেমন ন্যূনতম এবং সর্বোচ্চ আকার সেট করা, এলিমেন্টটির প্রোপোরশনাল সাইজিং, এবং অন্যান্য ফিচারস।

উদাহরণ: ন্যূনতম এবং সর্বোচ্চ আকার সীমাবদ্ধ করা

$(document).ready(function() {
    $("#resizable").resizable({
        minWidth: 100,    // ন্যূনতম প্রস্থ
        minHeight: 100,   // ন্যূনতম উচ্চতা
        maxWidth: 500,    // সর্বোচ্চ প্রস্থ
        maxHeight: 400    // সর্বোচ্চ উচ্চতা
    });
});

এই কাস্টমাইজেশন দ্বারা, আপনি ডিভের আকার একটি নির্দিষ্ট রেঞ্জের মধ্যে সীমাবদ্ধ করতে পারবেন।

উদাহরণ: প্রোপোরশনাল রিসাইজিং সক্ষম করা

$(document).ready(function() {
    $("#resizable").resizable({
        aspectRatio: true   // আকার প্রোপোরশনাল হবে
    });
});

এটি ব্যবহারকারীদেরকে একটি নির্দিষ্ট অনুপাতে এলিমেন্টের আকার পরিবর্তন করতে সহায়তা করবে, যেমন উচ্চতা এবং প্রস্থের অনুপাত বজায় রাখবে।

৪. রিসাইজিংয়ের পরে ইভেন্ট ট্রিগার করা

আপনি চাইলে রিসাইজ করার পরে কিছু নির্দিষ্ট কাজ করতে পারেন, যেমন স্লাইডার ভ্যালু আপডেট করা বা কোনো কাস্টম ফাংশন ট্রিগার করা। এর জন্য resize ইভেন্ট ব্যবহার করা যেতে পারে।

উদাহরণ: রিসাইজ হওয়ার পরে মান আপডেট করা

$(document).ready(function() {
    $("#resizable").resizable({
        resize: function(event, ui) {
            console.log("Width: " + ui.size.width + ", Height: " + ui.size.height);
        }
    });
});

এই কোডটি ব্যবহারকারীর রিসাইজিংয়ের সময় এলিমেন্টের নতুন প্রস্থ এবং উচ্চতা কনসোল-এ প্রদর্শন করবে।

৫. অন্যান্য কাস্টমাইজেশন

Grid alignment: এলিমেন্টটির রিসাইজিং একটি নির্দিষ্ট গ্রিডে অ্যালাইন করার জন্য আপনি grid অপশন ব্যবহার করতে পারেন।

$(document).ready(function() {
    $("#resizable").resizable({
        grid: [20, 20]  // রিসাইজিং 20px প্রতি অ্যালাইন হবে
    });
});

এটি এলিমেন্টের আকার ২০ পিক্সেল পর পর পরিবর্তন করবে।

উপসংহার

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

Content added By

Rezwan Siddiki Tamim

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

270

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 তৈরি করতে সহায়তা করে। কাস্টমাইজেশন অপশনের মাধ্যমে আপনি নির্বাচিত আইটেমের ডিজাইন পরিবর্তন করতে পারেন, একাধিক আইটেম নির্বাচন করতে সহায়তা করতে পারেন এবং আরও অনেক কিছু করতে পারেন।

Content added By

Rezwan Siddiki Tamim

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

241

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 বাটনের সাহায্যে ব্যবহারকারীর ইন্টারঅ্যাকশন উন্নত করতে পারেন।

Content added By

Rezwan Siddiki Tamim

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

260

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() মেথড ব্যবহার করে আপনি নিজেও কাস্টম ইভেন্ট তৈরি করতে পারেন, যা আরও কাস্টমাইজেশন এবং ফাংশনালিটি প্রদান করে।

Content added By

Rezwan Siddiki Tamim

jQueryUI এর পরিচিতি jQueryUI সেটআপ এবং ইনস্টলেশন jQueryUI এর বেসিক উইজেটস jQueryUI এর অ্যাডভান্সড উইজেটস jQueryUI এর স্লাইডার এবং স্পিনার

jQueryUI এর রিসাইজ এবং সিলেকশন

১. jQueryUI রিসাইজ (Resize)

রিসাইজ উইজেট ব্যবহার করা

রিসাইজ উইজেট কাস্টমাইজেশন

২. jQueryUI সিলেকশন (Selectable)

সিলেকশন উইজেট ব্যবহার করা

সিলেকশন উইজেট কাস্টমাইজেশন

৩. সিলেকশন এবং রিসাইজ একসাথে ব্যবহার করা

উপসংহার

Resizable উইজেট: এলিমেন্ট রিসাইজ করা

jQueryUI Resizable উইজেট ব্যবহার করে এলিমেন্ট রিসাইজ করা

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

২. কোড ব্যাখ্যা

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

উদাহরণ: ন্যূনতম এবং সর্বোচ্চ আকার সীমাবদ্ধ করা

উদাহরণ: প্রোপোরশনাল রিসাইজিং সক্ষম করা

৪. রিসাইজিংয়ের পরে ইভেন্ট ট্রিগার করা

উদাহরণ: রিসাইজ হওয়ার পরে মান আপডেট করা

৫. অন্যান্য কাস্টমাইজেশন

উপসংহার

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

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

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

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

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

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

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

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

উপসংহার

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

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

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

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

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

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

১. Selected Class

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

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

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

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

৬. Select All Button তৈরি

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

উদাহরণ:

উপসংহার

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

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

১. resize ইভেন্ট

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

৩. Custom Event Triggering

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

১. selected ইভেন্ট

২. unselected ইভেন্ট

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

৪. Custom Event Triggering

উপসংহার

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!