Progressbar উইজেট: প্রগ্রেসবার ব্যবহার এবং কাস্টমাইজেশন

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-এর থিমিং সিস্টেমের মাধ্যমে আপনি আরও উন্নত এবং আকর্ষণীয় ডিজাইন তৈরি করতে পারবেন।