Dialog উইজেট: কিভাবে ডায়লগ বক্স তৈরি করবেন

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() ফাংশনটি ব্যবহার করে আপনি ডায়লগের আউটপুট, শিরোনাম, বাটন, মোডাল এবং অন্যান্য বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।