jQueryUI এর বেসিক উইজেটস

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

১. ডেটাপিকার (Datepicker)

ডেটাপিকার উইজেট ব্যবহারকারীদের একটি নির্দিষ্ট তারিখ নির্বাচন করতে সহায়তা করে। এটি একটি পপ-আপ ক্যালেন্ডার হিসাবে কাজ করে, যা ব্যবহারকারীকে একটি নির্দিষ্ট তারিখ নির্বাচন করার সুবিধা দেয়। ডেটাপিকার সাধারণত ফর্মে ব্যবহার করা হয়, যেখানে তারিখ ইনপুট প্রয়োজন।

উদাহরণ:

<input type="text" id="datepicker">
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

২. ডায়ালগ (Dialog)

ডায়ালগ উইজেট একটি পপ-আপ বক্স তৈরি করে যা সাধারণত বার্তা প্রদর্শন, ফর্ম সাবমিট বা অন্যান্য কার্যকলাপের জন্য ব্যবহৃত হয়। এটি ব্যবহারের জন্য একটি মোডাল উইন্ডো হিসেবে কাজ করে, যা ব্যবহারকারীর সঙ্গে ইন্টারঅ্যাকশন করতে সহায়তা করে।

উদাহরণ:

<div id="dialog" title="Basic Dialog">
  <p>This is a simple dialog box!</p>
</div>

<script>
  $(function() {
    $("#dialog").dialog();
  });
</script>

৩. স্লাইডার (Slider)

স্লাইডার উইজেট ব্যবহারকারীদের একটি পরিসীমার মধ্যে মান নির্বাচন করতে সাহায্য করে। এটি সাধারণত মূল্য, পরিমাণ, বা কোনো নির্দিষ্ট স্কেলের মধ্যে মান নির্ধারণ করতে ব্যবহৃত হয়।

উদাহরণ:

<div id="slider"></div>
<p>Value: <span id="value">50</span></p>

<script>
  $(function() {
    $("#slider").slider({
      value: 50,
      slide: function(event, ui) {
        $("#value").text(ui.value);
      }
    });
  });
</script>

৪. ট্যাবস (Tabs)

ট্যাবস উইজেট বিভিন্ন কনটেন্ট প্যানেলকে ট্যাব আকারে উপস্থাপন করে। এটি ব্যবহারকারীদের জন্য একটি ক্লিন এবং অর্গানাইজড লেআউট প্রদান করে, যেখানে একাধিক পৃষ্ঠা বা সেকশন ট্যাব আকারে সাজানো থাকে।

উদাহরণ:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content for Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab 3</p>
  </div>
</div>

<script>
  $(function() {
    $("#tabs").tabs();
  });
</script>

৫. অ্যাকর্ডিয়ান (Accordion)

অ্যাকর্ডিয়ান উইজেট ব্যবহারকারীদের একাধিক প্যানেল থেকে একটির কনটেন্ট প্রদর্শন করতে সহায়তা করে। এটি মূলত একটি টগলেবল কন্টেইনার হিসেবে কাজ করে, যেখানে প্রতিটি প্যানেল খুলে বা বন্ধ করা যায়।

উদাহরণ:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>This is the first section content.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>This is the second section content.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>This is the third section content.</p>
  </div>
</div>

<script>
  $(function() {
    $("#accordion").accordion();
  });
</script>

৬. প্রগ্রেসবার (Progressbar)

প্রগ্রেসবার উইজেট সাধারণত কোন প্রক্রিয়া বা কাজের অগ্রগতি দেখানোর জন্য ব্যবহৃত হয়। এটি একটি ভিজ্যুয়াল ইনডিকেটর হিসেবে কাজ করে, যা ব্যবহারকারীকে জানায় কতটুকু কাজ সম্পন্ন হয়েছে।

উদাহরণ:

<div id="progressbar"></div>

<script>
  $(function() {
    $("#progressbar").progressbar({
      value: 50
    });
  });
</script>

উপসংহার

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

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

কাস্টম Button উইজেট তৈরি করা

jQueryUI Button উইজেট ব্যবহার করে কাস্টম বাটন তৈরি করার জন্য প্রথমে আপনাকে jQuery এবং jQueryUI সঠিকভাবে অন্তর্ভুক্ত করতে হবে। তারপর, আপনি HTML বাটন তৈরি করে সেটির উপর jQueryUI Button উইজেট প্রয়োগ করবেন।

নিচে কিভাবে কাস্টম বাটন তৈরি করবেন তা দেখানো হল:

১. HTML এবং jQueryUI অন্তর্ভুক্ত করা

প্রথমে আপনার HTML পেজে jQuery এবং jQueryUI লোড করতে হবে। উদাহরণস্বরূপ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryUI Button Example</title>
    <!-- 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">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>

    <!-- বাটন উপাদান -->
    <button id="myButton">Click Me</button>

    <script>
        // jQueryUI Button উইজেট প্রয়োগ
        $(document).ready(function(){
            $("#myButton").button();
        });
    </script>
</body>
</html>

এখানে, আমরা একটি সাধারণ HTML বাটন তৈরি করেছি যার id="myButton" এবং jQueryUI-এর button() মেথড ব্যবহার করে সেটির স্টাইলিং ও কার্যকারিতা যোগ করেছি।

২. কাস্টম Button তৈরি করা

আপনি কাস্টম স্টাইলিং এবং অ্যাকশন যোগ করতে button() মেথডের সাথে অন্যান্য অপশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

<button id="myButton">Click Me</button>

<script>
    $(document).ready(function(){
        // jQueryUI Button উইজেট কাস্টমাইজ করা
        $("#myButton").button({
            icons: {
                primary: "ui-icon-gear"  // আইকন যোগ করা
            },
            text: false  // শুধু আইকন দেখানোর জন্য
        });
    });
</script>

এই কোডে, আমরা একটি আইকন যোগ করেছি এবং বাটনে শুধুমাত্র আইকন দেখানোর জন্য text: false সেট করেছি। jQueryUI বিভিন্ন বিল্ট-ইন আইকন সরবরাহ করে, যেমন ui-icon-gear, ui-icon-home, ইত্যাদি।

৩. CSS দিয়ে কাস্টম স্টাইলিং

আপনি CSS ব্যবহার করে বাটনের ডিজাইন আরও কাস্টমাইজ করতে পারেন। যেমন:

<style>
    #myButton {
        background-color: #4CAF50; /* সবুজ ব্যাকগ্রাউন্ড */
        color: white; /* সাদা টেক্সট */
        padding: 15px 32px; /* প্যাডিং */
        font-size: 16px; /* ফন্ট সাইজ */
        border-radius: 8px; /* গোলাকার কোণ */
    }
</style>

এই CSS কোডের মাধ্যমে আপনি বাটনের ব্যাকগ্রাউন্ড কালার, টেক্সট, প্যাডিং, ফন্ট সাইজ এবং বর্ডার রেডিয়াস কাস্টমাইজ করতে পারেন।

৪. কাস্টম Button এ ইভেন্ট যোগ করা

jQueryUI Button উইজেট ব্যবহার করে আপনি কাস্টম বাটনে ইভেন্ট হ্যান্ডলার যোগ করতে পারেন। উদাহরণস্বরূপ:

<script>
    $(document).ready(function(){
        $("#myButton").button().on("click", function() {
            alert("Button clicked!");
        });
    });
</script>

এখানে, আমরা বাটন ক্লিক করার সময় একটি পপ-আপ এলার্ট শো করিয়েছি, যা "Button clicked!" বার্তা প্রদর্শন করবে।

উপসংহার

jQueryUI Button উইজেট ব্যবহার করে আপনি কাস্টম বাটন তৈরি করতে পারেন এবং এটি আপনার ওয়েবসাইটে আকর্ষণীয় ও ইন্টারেক্টিভ উপাদান হিসেবে কাজ করবে। আপনি সহজেই স্টাইলিং, আইকন, এবং ইভেন্ট হ্যান্ডলিং যোগ করে বাটনকে কাস্টমাইজ করতে পারবেন। jQueryUI এর মাধ্যমে আপনি আপনার ওয়েব পেজে অত্যন্ত কার্যকরী এবং ব্যবহারকারী-বান্ধব বাটন তৈরি করতে সক্ষম হবেন।

Datepicker উইজেট jQueryUI-এর একটি জনপ্রিয় ফিচার যা ব্যবহারকারীদের নির্দিষ্ট একটি তারিখ নির্বাচন করতে সহায়তা করে। এটি ফর্মের জন্য একটি অত্যন্ত কার্যকরী উপাদান, যা ব্যবহারকারীদের তারিখের জন্য একটি ক্যালেন্ডার প্রদর্শন করে। এখানে আমরা আলোচনা করব কিভাবে একটি সহজ ডেটাপিকার তৈরি করা যায় jQueryUI ব্যবহার করে।

jQueryUI Datepicker উইজেট ব্যবহার করার পদক্ষেপ

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

প্রথমে, আপনাকে jQuery এবং jQueryUI লাইব্রেরি লোড করতে হবে। এই দুটি স্ক্রিপ্ট আপনার HTML পৃষ্ঠায় অন্তর্ভুক্ত করতে হবে। উদাহরণস্বরূপ:

<!-- 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 ফর্ম তৈরি

ডেটাপিকার উইজেট কাজ করার জন্য একটি ইনপুট ফিল্ড প্রয়োজন, যেখানে ব্যবহারকারী তারিখ নির্বাচন করবেন। উদাহরণস্বরূপ:

<label for="datepicker">তারিখ নির্বাচন করুন:</label>
<input type="text" id="datepicker">

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

এখন, আপনি jQuery ব্যবহার করে Datepicker উইজেটটি ইনপুট ফিল্ডে যুক্ত করতে পারবেন। নিচের কোডটি আপনার স্ক্রিপ্ট সেকশনে যোগ করুন:

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

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

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

jQueryUI Datepicker উইজেট অনেক কাস্টমাইজেশন অপশন প্রদান করে। কিছু সাধারণ কাস্টমাইজেশন হলো:

• ডেট ফরম্যাট পরিবর্তন: আপনি ডেটাপিকার উইজেটের তারিখের প্রদর্শন ফরম্যাট পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:

  $(document).ready(function() {
    $("#datepicker").datepicker({
      dateFormat: "dd-mm-yy"  // তারিখের ফরম্যাট পরিবর্তন
    });
  });
  

• সীমিত তারিখ নির্বাচন: আপনি ব্যবহারকারীদের শুধুমাত্র নির্দিষ্ট রেঞ্জের তারিখ নির্বাচন করতে দিতে পারেন:

  $(document).ready(function() {
    $("#datepicker").datepicker({
      minDate: new Date(),  // আজকের পরের তারিখ থেকে নির্বাচন
      maxDate: "+1M"        // এক মাস পর পর্যন্ত নির্বাচন
    });
  });
  

• ডেটাপিকার পরিবর্তনশীল ভাষা: আপনি ডেটাপিকার উইজেটের ভাষা পরিবর্তন করতে পারেন:

  $(document).ready(function() {
    $("#datepicker").datepicker({
      regional: "bn"  // বাংলা ভাষায় ডেটাপিকার প্রদর্শন
    });
  });
  

৫. ব্যবহারকারী ইন্টারফেস

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

উপসংহার

jQueryUI Datepicker উইজেট ব্যবহার করে খুব সহজেই একটি তারিখ নির্বাচনকারী ইনপুট ফিল্ড তৈরি করা যায়। এটি ব্যবহারকারীর জন্য তারিখ নির্বাচন প্রক্রিয়া সহজ ও সুবিধাজনক করে তোলে। কাস্টমাইজেশন অপশনের মাধ্যমে আপনি এটি আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন, যেমন ডেট ফরম্যাট, সীমিত তারিখ রেঞ্জ, ভাষা পরিবর্তন ইত্যাদি।

jQueryUI Dialog উইজেট একটি পপ-আপ ডায়লগ বক্স তৈরি করতে ব্যবহৃত হয়, যা সাধারণত ব্যবহারকারীর সাথে যোগাযোগের জন্য বার্তা, কনফার্মেশন, বা ফর্ম প্রদর্শনের জন্য ব্যবহৃত হয়। এটি ওয়েব পেজের অন্যান্য কন্টেন্টের উপরে আসে এবং ব্যবহারকারীর মনোযোগ আকর্ষণ করে।

Dialog উইজেট এর বৈশিষ্ট্য

• আনইনট্রাগিং UI: Dialog উইজেটটি ব্যবহারকারীদের কাজের প্রবাহে বাধা না দিয়ে ইন্টারঅ্যাকশন সরবরাহ করে।
• কমপ্যাক্ট এবং মোবাইল ফ্রেন্ডলি: Dialog বক্সগুলি রেসপন্সিভ এবং বিভিন্ন স্ক্রীন সাইজে ভালভাবে কাজ করে।
• কাস্টমাইজেশন: ডায়লগ বক্সের কন্টেন্ট, শিরোনাম, বাটন ইত্যাদি কাস্টমাইজ করা যায়।

Dialog উইজেট ব্যবহার করার ধাপ

১. প্রয়োজনীয় লাইব্রেরি লোড করা

প্রথমে 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">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

২. HTML কোড তৈরি করা

এখন একটি সাধারণ HTML ডায়লগ বক্স তৈরি করা যাক। নিচে একটি উদাহরণ দেওয়া হলো:

<!-- ডায়লগ বক্সের HTML -->
<div id="dialog" title="Sample Dialog">
  <p>এই একটি ডায়লগ বক্সের উদাহরণ।</p>
</div>

<!-- বাটন যা ডায়লগ চালু করবে -->
<button id="openDialog">ডায়লগ খুলুন</button>

৩. jQuery দিয়ে Dialog উইজেট ইনিশিয়ালাইজ করা

এখন jQuery ব্যবহার করে ডায়লগ উইজেটটি চালু করতে হবে। নিচে কীভাবে এটি করা যায় তা দেখানো হলো:

$(document).ready(function() {
  // Dialog উইজেট ইনিশিয়ালাইজ করা
  $("#dialog").dialog({
    autoOpen: false, // ডায়লগ শুরুতে বন্ধ থাকবে
    modal: true,     // মডাল ডায়লগ, অর্থাৎ, পেজের অন্যান্য কন্টেন্ট অসামঞ্জস্যপূর্ণ থাকবে
    buttons: {
      "ঠিক আছে": function() {
        $(this).dialog("close"); // "ঠিক আছে" বাটনে ক্লিক করলে ডায়লগ বন্ধ হবে
      }
    }
  });

  // ডায়লগ খুলতে ক্লিক করার জন্য বাটন
  $("#openDialog").click(function() {
    $("#dialog").dialog("open");
  });
});

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

আপনি dialog() ফাংশনটি ব্যবহার করে ডায়লগের বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন:

• autoOpen: ডায়লগ বক্সটি পেজ লোডের সাথে স্বয়ংক্রিয়ভাবে খোলা হবে কিনা তা নির্ধারণ করে।
• modal: যদি মডাল সেট করা হয়, তাহলে ডায়লগের বাইরে ক্লিক করা যাবে না।
• buttons: ডায়লগে কী কী বাটন থাকবে, তা নির্ধারণ করে।

যেমন:

$("#dialog").dialog({
  autoOpen: false,
  modal: true,
  width: 400, // ডায়লগের প্রস্থ
  height: 200, // ডায়লগের উচ্চতা
  position: { my: "center", at: "center", of: window } // পেজের কেন্দ্রস্থলে ডায়লগ অবস্থান করবে
});

৫. ডায়লগে কন্টেন্ট এবং অন্যান্য ফিচার যোগ করা

আপনি ডায়লগের কন্টেন্ট কাস্টমাইজ করতে পারেন, যেমন টেক্সট, ফর্ম, বা ছবি যোগ করা। উদাহরণস্বরূপ:

<div id="dialog" title="ডায়লগ বক্স">
  <form>
    <label for="username">ইউজারনেম:</label>
    <input type="text" id="username" name="username"><br><br>
    <input type="submit" value="সাবমিট">
  </form>
</div>

এভাবে আপনি একটি ডায়লগ বক্সে একটি ফর্মও যুক্ত করতে পারেন। এর সাথে আপনি ডায়লগের কাস্টম বাটনও যুক্ত করতে পারেন, যেমন "Cancel", "Submit" ইত্যাদি।

উপসংহার

jQueryUI Dialog উইজেট ব্যবহার করে আপনি সহজেই পপ-আপ ডায়লগ বক্স তৈরি করতে পারেন, যা ওয়েব অ্যাপ্লিকেশনে বিভিন্ন প্রয়োজনে ব্যবহার করা যায়। এটি অত্যন্ত কাস্টমাইজযোগ্য এবং ইন্টারেক্টিভ, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। dialog() ফাংশনটি ব্যবহার করে আপনি ডায়লগের আউটপুট, শিরোনাম, বাটন, মোডাল এবং অন্যান্য বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

Progressbar উইজেট jQueryUI এর একটি গুরুত্বপূর্ণ উপাদান যা ব্যবহারকারীদের একটি কার্যক্রমের অগ্রগতি প্রদর্শন করতে সহায়তা করে। এটি বিশেষ করে লোডিং, ডাউনলোড বা অন্য কোনো সময়সীমার কার্যক্রম চলাকালে ব্যবহৃত হয়। প্রগ্রেসবারের মাধ্যমে ব্যবহারকারীকে জানান দেওয়া হয় যে কাজটি চলমান আছে এবং কতটুকু শেষ হয়েছে।

Progressbar উইজেট ব্যবহার

Progressbar উইজেটটি ব্যবহার করে আপনি একটি গতিশীল বার তৈরি করতে পারেন যা সময়ের সাথে সাথে পূর্ণতা অর্জন করে। এটি সাধারণত AJAX রিকোয়েস্টের অগ্রগতি বা ফাইল আপলোডের ক্ষেত্রে ব্যবহৃত হয়। এর মাধ্যমে ব্যবহারকারী একটি ইন্টারঅ্যাকটিভ উপায়ে কার্যক্রমের অগ্রগতি দেখতে পায়।

প্রগ্রেসবার উইজেট ব্যবহারের জন্য প্রথমে 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">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

এখন আপনি HTML এবং jQuery কোডের মাধ্যমে একটি প্রগ্রেসবার তৈরি করতে পারেন:

<div id="progressbar"></div>

<script>
  $( function() {
    $( "#progressbar" ).progressbar({
      value: 50 // 50% প্রগ্রেস
    });
  });
</script>

এটি একটি বেসিক প্রগ্রেসবার তৈরি করবে যেখানে value প্রপার্টি দিয়ে আপনি কতটুকু প্রগ্রেস দেখাতে চান তা নির্ধারণ করতে পারবেন। এখানে 50 মানে হচ্ছে প্রগ্রেসবারটি ৫০% পূর্ণ হবে।

Progressbar কাস্টমাইজেশন

Progressbar উইজেটটি বেশ কাস্টমাইজযোগ্য এবং আপনি এর বিভিন্ন বৈশিষ্ট্য পরিবর্তন করতে পারেন। নিচে কিছু কাস্টমাইজেশন পদ্ধতি দেওয়া হলো:

১. Minimum এবং Maximum Value সেট করা

প্রগ্রেসবারের value প্রপার্টি 0 থেকে 100 এর মধ্যে থাকে, তবে আপনি এর min এবং max প্রপার্টি দিয়ে এটি কাস্টমাইজ করতে পারেন।

$( "#progressbar" ).progressbar({
  value: 30,
  min: 0,
  max: 100
});

এখানে min 0 এবং max 100 সেট করা হয়েছে, অর্থাৎ প্রগ্রেসবারের পরিসীমা 0 থেকে 100 পর্যন্ত হবে।

২. অনুগ্রহ এবং অটো-আপডেট

প্রগ্রেসবারকে আপনি একটি নির্দিষ্ট সময়ে আপডেট করতে পারেন, যেমন স্লাইড বা অটোমেটিক অগ্রগতি তৈরি করা।

$( function() {
  var progress = 0;
  var progressInterval = setInterval(function() {
    progress += 1;
    $( "#progressbar" ).progressbar( "value", progress );
    
    if (progress >= 100) {
      clearInterval(progressInterval);
    }
  }, 100);
});

এখানে setInterval ফাংশন ব্যবহার করা হয়েছে যা প্রতি 100 মিলিসেকেন্ডে প্রগ্রেসবারের মান 1% বৃদ্ধি করে এবং 100% হওয়া পর্যন্ত এটি চলতে থাকে।

৩. স্টাইল এবং থিম কাস্টমাইজেশন

আপনি প্রগ্রেসবারের ডিজাইন এবং স্টাইল CSS এর মাধ্যমে কাস্টমাইজ করতে পারেন। এটি jQueryUI-এর থিমিং সিস্টেমের সাহায্যে আরও সহজ করা যায়।

#progressbar {
  height: 30px;
  background-color: #e6e6e6;
  border-radius: 5px;
}

.ui-progressbar-value {
  background: #4caf50; /* Green color */
}

এখানে প্রগ্রেসবারের উচ্চতা এবং ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা হয়েছে। .ui-progressbar-value সিলেক্টর দিয়ে প্রগ্রেসবারের পূর্ণ অংশের রঙ পরিবর্তন করা হয়েছে।

৪. ডায়ালগ বা পপ-আপ উইজেটের সাথে প্রগ্রেসবার

প্রগ্রেসবারকে dialog উইজেটের সঙ্গে একত্রে ব্যবহার করতে পারেন, যাতে লোডিং বা আপলোড প্রক্রিয়ার সময় একটি পপ-আপ উইন্ডো প্রদর্শিত হয়।

$( function() {
  $( "#dialog" ).dialog();
  $( "#progressbar" ).progressbar({
    value: 60
  });
});

এখানে প্রগ্রেসবারের সঙ্গে একটি ডায়ালগ উইজেট যুক্ত করা হয়েছে যাতে পপ-আপ উইন্ডোতে প্রগ্রেস প্রদর্শিত হয়।

উপসংহার

Progressbar উইজেট jQueryUI-এর একটি অত্যন্ত কার্যকরী উপাদান, যা ব্যবহারকারীদের জন্য একটি কার্যক্রমের অগ্রগতি দেখতে সাহায্য করে। এটি কাস্টমাইজ করা খুবই সহজ এবং এটি বিভিন্ন প্রকারের ওয়েব অ্যাপ্লিকেশনে যেমন ফাইল আপলোড, ডাউনলোড বা লোডিং প্রক্রিয়ার জন্য ব্যবহার করা যেতে পারে। আপনি value, min, max এবং setInterval এর মাধ্যমে প্রগ্রেসবারের আচরণ পরিবর্তন করতে পারেন এবং CSS দিয়ে এর ডিজাইন কাস্টমাইজ করতে পারেন। jQueryUI-এর থিমিং সিস্টেমের মাধ্যমে আপনি আরও উন্নত এবং আকর্ষণীয় ডিজাইন তৈরি করতে পারবেন।