Spinner উইজেট: সংখ্যা স্পিনার তৈরি এবং কনফিগার করা

Spinner উইজেট jQueryUI-এর একটি কার্যকরী উপাদান যা ব্যবহারকারীদের সংখ্যা নির্ধারণ করতে সহায়তা করে। এটি একটি ইনপুট ফিল্ডের মধ্যে একটি সংখ্যা প্রদর্শন করে এবং ব্যবহারকারী স্পিনার (উপরে বা নিচে যাওয়ার জন্য দুটি বাটন) ব্যবহার করে সংখ্যাটি বাড়াতে বা কমাতে পারে। এটি সাধারণত ফর্মের জন্য ব্যবহার হয়, যেমন পরিমাণ নির্ধারণ, দাম নির্বাচন ইত্যাদি।

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

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

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

<!-- 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="spinner">সংখ্যা নির্বাচন করুন:</label>
<input id="spinner" name="value" value="0" />

এখানে একটি ইনপুট ফিল্ড তৈরি করা হয়েছে, যেখানে স্পিনার হবে এবং ডিফল্ট মান হিসেবে 0 থাকবে।

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

এখন, jQuery কোড ব্যবহার করে আপনি স্পিনার উইজেটটি ইনিশিয়েট করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

$(document).ready(function() {
  // স্পিনার উইজেট ইনিশিয়েট করা
  $("#spinner").spinner({
    min: 0,      // ন্যূনতম সংখ্যা
    max: 100,    // সর্বোচ্চ সংখ্যা
    step: 1,     // প্রতিটি স্পিনে মান বৃদ্ধি বা হ্রাস হবে ১
    spin: function(event, ui) {
      // স্পিনার পরিবর্তনের সময় মান প্রদর্শন করা
      console.log("নতুন মান: " + ui.value);
    }
  });
});

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

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

• min: স্পিনারের ন্যূনতম মান।
• max: স্পিনারের সর্বোচ্চ মান।
• step: প্রতিটি স্পিনে মান কতটা বাড়বে বা কমবে।
• numberFormat: সংখ্যার প্রদর্শন ফরম্যাট (যেমন, দশমিক স্থান বা বড় সংখ্যা বিন্যাস)।

কাস্টম উদাহরণ:

$(document).ready(function() {
  $("#spinner").spinner({
    min: 10,       // ন্যূনতম মান ১০
    max: 500,      // সর্বোচ্চ মান ৫০০
    step: 5,       // প্রতি স্পিনে ৫ এর গুণে মান বাড়বে বা কমবে
    numberFormat: "n",  // সংখ্যা সাধারণ ফরম্যাটে প্রদর্শিত হবে (যেমন: 1000, 1500)
    spin: function(event, ui) {
      $("#spinner-value").text("বর্তমান মান: " + ui.value);  // মান পরিবর্তন হলে তা প্রদর্শন
    }
  });
});

৫. ডিজাইন কাস্টমাইজেশন

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

#spinner {
  width: 100px;   /* স্পিনারের প্রস্থ */
  padding: 5px;   /* প্যাডিং */
}

.ui-spinner-button {
  background-color: #4CAF50;  /* বাটনের ব্যাকগ্রাউন্ড রঙ */
  color: white;                /* বাটনের টেক্সট রঙ */
}

এটি স্পিনারের বাটন এবং ইনপুট ফিল্ডের ডিজাইন কাস্টমাইজ করতে সাহায্য করবে।

৬. বিশেষ বৈশিষ্ট্য

• ডিফল্ট মান পরিবর্তন: আপনি স্পিনারের ডিফল্ট মান পরিবর্তন করতে পারেন।

  $("#spinner").spinner("value", 50);  // স্পিনার এর মান ৫০ করা হবে
  

• স্পিনারের মান আপডেট করা:

  $("#spinner").spinner("stepUp", 10);  // স্পিনারের মান ১০ বাড়ানো হবে
  $("#spinner").spinner("stepDown", 5);  // স্পিনারের মান ৫ কমানো হবে
  

৭. ইভেন্ট হ্যান্ডলিং

আপনি স্পিনারের কিছু নির্দিষ্ট ইভেন্টও হ্যান্ডল করতে পারেন, যেমন start, stop, এবং spin ইভেন্টগুলি।

উদাহরণ:

$(document).ready(function() {
  $("#spinner").spinner({
    start: function(event, ui) {
      console.log("স্পিনার শুরু হয়েছে");
    },
    stop: function(event, ui) {
      console.log("স্পিনার থেমে গেছে, মান: " + ui.value);
    }
  });
});

উপসংহার

jQueryUI Spinner উইজেট একটি সহজ এবং কার্যকরী উপাদান যা ব্যবহারকারীদের একটি সংখ্যা নির্বাচন করতে সহায়তা করে। আপনি এটি সহজেই কাস্টমাইজ করতে পারেন, যেমন মানের পরিসীমা (min/max), increment (step), এবং ডিজাইন কাস্টমাইজেশন। এটি ওয়েব ফর্মগুলির জন্য খুবই উপকারী, যেখানে ব্যবহারকারীরা নির্দিষ্ট মানের মধ্যে সংখ্যা নির্বাচন করতে পারে।