jQueryUI এর অ্যাডভান্সড উইজেটস

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

১. ড্র্যাগ-এন্ড-ড্রপ (Drag and Drop)

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

• ড্র্যাগ: উপাদানকে মাউস দিয়ে ধরুন এবং ইচ্ছামতো স্থানান্তর করুন।
• ড্রপ: নির্দিষ্ট স্থানে উপাদানটি ছেড়ে দিন।

উদাহরণ:

<div id="draggable" class="ui-widget-content">
  <p>এটি একটি ড্র্যাগেবল উপাদান</p>
</div>

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

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

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

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

উদাহরণ:

<div id="dialog" title="নোটিফিকেশন">
  <p>এটি একটি ডায়ালগ উইন্ডো।</p>
</div>

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

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

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

• স্লাইডারটি সংখ্যার মান, তারিখ বা অন্যান্য যেকোনো পরিসরের জন্য ব্যবহার করা যেতে পারে।
• এটি ব্যবহারকারীর পছন্দ অনুযায়ী শূন্য থেকে শুরু করে সর্বোচ্চ মানে পৌঁছাতে পারে।

উদাহরণ:

<div id="slider"></div>

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

৪. ট্যাব (Tabs)

ট্যাব উইজেটটি একটি নির্দিষ্ট পৃষ্ঠার মধ্যে একাধিক কনটেন্ট সেকশন দেখানোর জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীকে সহজে এক ট্যাব থেকে অন্য ট্যাব পরিবর্তন করতে সক্ষম করে।

• প্রতিটি ট্যাব একটি নতুন কনটেন্ট সেকশন প্রদর্শন করে।
• jQueryUI এর ট্যাব উইজেটের মাধ্যমে আপনি খুব সহজেই কনটেন্ট নেভিগেশন ব্যবস্থা তৈরি করতে পারেন।

উদাহরণ:

<div id="tabs">
  <ul>
    <li><a href="#tab-1">ট্যাব ১</a></li>
    <li><a href="#tab-2">ট্যাব ২</a></li>
  </ul>
  <div id="tab-1">
    <p>এটি প্রথম ট্যাবের কনটেন্ট।</p>
  </div>
  <div id="tab-2">
    <p>এটি দ্বিতীয় ট্যাবের কনটেন্ট।</p>
  </div>
</div>

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

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

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

• ব্যবহারকারী একটি নির্দিষ্ট তারিখ নির্বাচন করার জন্য ক্যালেন্ডারে ক্লিক করতে পারে।
• ডেটাপিকার উইজেটের মাধ্যমে আপনি তারিখ ফরম্যাট এবং অন্যান্য অপশন কাস্টমাইজ করতে পারেন।

উদাহরণ:

<input type="text" id="datepicker">

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

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

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

• এটি স্ট্যাটিক বা ডাইনামিক অবস্থায় আপডেট করা যায়।
• প্রগ্রেসবারটি সম্পূর্ণ হওয়া পর্যন্ত ব্যবহৃত হয় এবং এটি ব্যবহারকারীর অপেক্ষার অভিজ্ঞতা উন্নত করে।

উদাহরণ:

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

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

উপসংহার

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

Accordion উইজেট jQueryUI এর একটি জনপ্রিয় ফিচার, যা অনেক প্যানেল বা সেকশনের মধ্যে একসাথে শুধুমাত্র একটি প্যানেল খুলে দেখানোর সুবিধা প্রদান করে। এটি সাধারণত ওয়েব পেজে দীর্ঘ কন্টেন্ট প্রদর্শন করার জন্য ব্যবহার করা হয়, যেখানে ব্যবহারকারীরা একটি সেকশন খুলে বাকিটা বন্ধ রাখতে পারে।

এখানে আমরা দেখবো কিভাবে একটি সহজ Accordion প্যানেল তৈরি করা যায় jQueryUI ব্যবহার করে।

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

প্রথমে, আপনাকে 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 স্ট্রাকচার

Accordion প্যানেল তৈরি করার জন্য, HTML এর মধ্যে প্রতিটি সেকশনকে একটি div ট্যাগের মাধ্যমে সজ্জিত করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Content for section 1.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Content for section 2.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Content for section 3.</p>
  </div>
</div>

এখানে, প্রতিটি h3 ট্যাগ হলো Accordion প্যানেলের হেডার এবং div ট্যাগ হলো কন্টেন্টের অংশ।

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

Accordion উইজেটের কার্যকারিতা যোগ করার জন্য, jQuery কোড ব্যবহার করতে হবে। কোডটি নিচে দেওয়া হলো:

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

এই কোডটি #accordion আইডি সহ এলিমেন্টে Accordion উইজেট অ্যাপ্লাই করবে, এবং এটি স্বয়ংক্রিয়ভাবে প্রতিটি সেকশনের মধ্যে একটির ওপেন থাকা নিশ্চিত করবে।

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

jQueryUI Accordion উইজেট বেশ কিছু কাস্টমাইজেশন অপশন প্রদান করে, যা ব্যবহার করে আপনি এটি আরো নিয়ন্ত্রণ করতে পারেন। নিচে কিছু সাধারণ কাস্টমাইজেশন দেখানো হলো:

• অ্যাকর্ডিয়ন অটোমেটিকভাবে খোলা থাকবে:

  $(document).ready(function() {
    $("#accordion").accordion({
      active: 0  // প্রথম সেকশনটি ডিফল্টভাবে ওপেন থাকবে
    });
  });
  

• একাধিক সেকশন খোলা থাকতে পারে:

  $(document).ready(function() {
    $("#accordion").accordion({
      collapsible: true,  // একাধিক সেকশন খুলে রাখা যাবে
      active: false       // ডিফল্টভাবে কোন সেকশন খোলা থাকবে না
    });
  });
  

• অ্যানিমেশন ইফেক্ট:

  $(document).ready(function() {
    $("#accordion").accordion({
      animate: 200  // অ্যানিমেশন টাইম (মিলিসেকেন্ডে)
    });
  });
  

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

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

উপসংহার

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

Autocomplete উইজেট jQueryUI এর একটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের জন্য একটি সহজ এবং দ্রুত অনুসন্ধান অভিজ্ঞতা তৈরি করে। এটি ইনপুট ফিল্ডে ব্যবহারকারীর টাইপ করা শব্দের উপর ভিত্তি করে প্রাসঙ্গিক সাজেস্টেশন দেখায়। এই উইজেটটি সাধারণত সার্চ বক্স বা অনুসন্ধান বার তৈরির জন্য ব্যবহৃত হয়।

এখানে আমরা দেখাবো কিভাবে jQueryUI Autocomplete উইজেট ব্যবহার করে একটি স্বয়ংক্রিয় অনুসন্ধান বার তৈরি করা যায়।

১. HTML ফাইল তৈরি করা

প্রথমে একটি HTML ফাইল তৈরি করুন যেখানে আপনি অনুসন্ধান বার তৈরি করবেন। নিচে একটি উদাহরণ দেখানো হলো:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete উদাহরণ</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 JavaScript লোড -->
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>

    <label for="search">অনুসন্ধান করুন:</label>
    <input type="text" id="search" placeholder="প্রোডাক্ট নাম লিখুন">

    <script>
        // jQueryUI Autocomplete উইজেট ব্যবহার করা
        $(document).ready(function() {
            var availableTags = [
                "Apple", "Banana", "Cherry", "Date", "Grape", 
                "Kiwi", "Lemon", "Mango", "Orange", "Papaya", 
                "Pineapple", "Strawberry", "Watermelon"
            ];
            $("#search").autocomplete({
                source: availableTags  // ডেটার উৎস
            });
        });
    </script>

</body>
</html>

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

• jQuery এবং jQueryUI লোড করা: প্রথমে আমরা jQuery এবং jQueryUI এর CSS ও JavaScript ফাইল লোড করেছি, যা Autocomplete উইজেট ব্যবহার করতে সাহায্য করবে।
• HTML ইনপুট ফিল্ড: #search নামক একটি ইনপুট ফিল্ড তৈরি করা হয়েছে যেখানে ব্যবহারকারী তাদের অনুসন্ধান শব্দটি টাইপ করবেন।
• Autocomplete উইজেটের জন্য স্ক্রিপ্ট:
  • আমরা একটি availableTags নামক অ্যারে তৈরি করেছি, যেখানে বিভিন্ন ফলের নাম রয়েছে। আপনি এই অ্যারে-টি নিজের প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন (যেমন ডাটাবেস থেকে ডেটা ফেচ করা বা অন্য কোনো সূত্র থেকে ডেটা নেয়া)।
  • $("#search").autocomplete() ফাংশনটি ইনপুট ফিল্ডে Autocomplete উইজেটটি প্রয়োগ করবে। এখানে source প্রপার্টি দিয়ে আমরা সেই ডেটার উৎস উল্লেখ করেছি, যা প্রদর্শিত হবে যখন ব্যবহারকারী ইনপুট ফিল্ডে কিছু লিখবে।

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

autocomplete() ফাংশনের মাধ্যমে আপনি বেশ কিছু কাস্টমাইজেশন করতে পারেন। নিচে কিছু কাস্টম অপশন দেখানো হলো:

• minLength: এই অপশনটি দিয়ে আপনি সেট করতে পারেন, কতটা কিরকম টাইপ করার পর সাজেস্টশন দেখানো শুরু হবে।

  minLength: 3  // তিনটি অক্ষর টাইপ করার পর সাজেস্টশন দেখাবে
  

• select: এটি ব্যবহারকারী যদি একটি সাজেস্টেশন সিলেক্ট করেন, তাহলে কোনো নির্দিষ্ট কাজ করতে পারবেন। উদাহরণস্বরূপ:

  select: function(event, ui) {
    alert("আপনি নির্বাচিত করেছেন: " + ui.item.value);
  }
  

• source from a server: আপনি যদি একটি রিমোট সার্ভার থেকে ডেটা চান, তাহলে AJAX কল ব্যবহার করে ডেটা পাঠাতে পারেন:

  source: function(request, response) {
    $.ajax({
      url: "search.php",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function(data) {
        response(data);  // সার্ভার থেকে প্রাপ্ত ডেটা
      }
    });
  }
  

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

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

উপসংহার

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

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

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

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

প্রথমে আপনাকে jQuery এবং jQueryUI এর প্রয়োজনীয় CSS এবং JavaScript ফাইল আপনার 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 JavaScript লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

২. HTML মেনু তৈরি করা

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

<ul id="menu">
  <li><a href="#">হোম</a></li>
  <li><a href="#">সেবা</a>
    <ul>
      <li><a href="#">ওয়েব ডিজাইন</a></li>
      <li><a href="#">অ্যাপ ডেভেলপমেন্ট</a></li>
      <li><a href="#">SEO সেবা</a></li>
    </ul>
  </li>
  <li><a href="#">যোগাযোগ</a></li>
</ul>

এই কোডটি একটি সাধারণ unordered list (UL) তৈরি করে, যেখানে প্রধান মেনুর আইটেমগুলো রয়েছে এবং একটি ড্রপডাউন সাবমেনু তৈরি করা হয়েছে।

৩. jQueryUI Menu উইজেট সক্রিয় করা

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

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

এই কোডটি #menu আইডি সহ mএনুকে jQueryUI Menu উইজেট ব্যবহার করে ড্রপডাউন মেনু হিসেবে সক্রিয় করবে।

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

আপনি যদি মেনুর স্টাইল পরিবর্তন করতে চান, তবে CSS ব্যবহার করে আপনি মেনুর ডিজাইন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

#menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline-block;
  position: relative;
}

#menu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
}

#menu li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #f9f9f9;
  min-width: 150px;
}

#menu li:hover > ul {
  display: block;
}

#menu li ul li {
  display: block;
}

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

৫. কাস্টমাইজড ড্রপডাউন মেনু

আপনি মেনুর আচরণ পরিবর্তন করতে পারেন যেমন:

• মেনুতে ক্লিক করলে ড্রপডাউন খুলবে,
• মেনুর ট্রানজিশন অ্যানিমেশন যোগ করা,
• সাবমেনুর অবস্থান পরিবর্তন করা, ইত্যাদি।

$(document).ready(function(){
  $("#menu").menu({
    items: "> :not(.ui-widget-header)"  // আইটেম নির্বাচন করতে ফিল্টার
  });
});

উপসংহার

jQueryUI Menu উইজেট ব্যবহার করে খুব সহজে ড্রপডাউন মেনু তৈরি করা যায়। আপনি HTML, CSS এবং jQuery ব্যবহার করে এটি কাস্টমাইজ করে আপনার ওয়েবসাইটে ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব মেনু তৈরি করতে পারেন। jQueryUI Menu উইজেটটি ড্রপডাউন মেনু, সাবমেনু এবং অন্যান্য মেনু উপাদানগুলোর জন্য কার্যকরী এবং সাশ্রয়ী একটি সমাধান।

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

jQueryUI Tabs উইজেট ব্যবহার করে ট্যাবযুক্ত ইন্টারফেস তৈরি করা

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

প্রথমে আপনাকে 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 Tabs উদাহরণ</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="tabs">
        <ul>
            <li><a href="#tab-1">ট্যাব ১</a></li>
            <li><a href="#tab-2">ট্যাব ২</a></li>
            <li><a href="#tab-3">ট্যাব ৩</a></li>
        </ul>
        <div id="tab-1">
            <h3>ট্যাব ১ কনটেন্ট</h3>
            <p>এটি ট্যাব ১ এর কনটেন্ট।</p>
        </div>
        <div id="tab-2">
            <h3>ট্যাব ২ কনটেন্ট</h3>
            <p>এটি ট্যাব ২ এর কনটেন্ট।</p>
        </div>
        <div id="tab-3">
            <h3>ট্যাব ৩ কনটেন্ট</h3>
            <p>এটি ট্যাব ৩ এর কনটেন্ট।</p>
        </div>
    </div>

    <script>
        // jQueryUI Tabs উইজেট ইনিশিয়েট করা
        $(document).ready(function() {
            $("#tabs").tabs();  // ট্যাব উইজেট চালু করা
        });
    </script>

</body>
</html>

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

• HTML Structure:
  • এখানে #tabs নামে একটি div তৈরি করা হয়েছে যা মূল ট্যাব প্যানেল হিসেবে কাজ করবে।
  • <ul> ট্যাবগুলো ধারণ করবে এবং প্রতিটি <li> আইটেম একটি ট্যাবের লিংক হিসেবে কাজ করবে।
  • প্রতিটি <a> ট্যাবের নাম এবং কনটেন্টের সেকশনকে <div> দিয়ে আচ্ছাদিত করা হয়েছে।
• jQueryUI Tabs Initialization:
  • $(document).ready() দিয়ে পেজ লোড হওয়ার পর #tabs কে tabs() ফাংশন দিয়ে ইনিশিয়েট করা হয়েছে, যা ট্যাবসের কার্যকারিতা চালু করবে।

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

jQueryUI Tabs উইজেটটি বেশ কিছু কাস্টমাইজেশন অপশন প্রদান করে। এখানে কিছু সাধারণ কাস্টমাইজেশন দেয়া হলো:

• অটোমেটিকাল ট্যাব একটিভ: আপনি প্রথমে কোন ট্যাবটি দেখাতে চান সেটি নির্ধারণ করতে পারেন।

  $(document).ready(function() {
      $("#tabs").tabs({ active: 1 });  // দ্বিতীয় ট্যাব (ট্যাব ২) অ্যাকটিভ থাকবে
  });
  

• ডিফল্ট ট্যাব পরিবর্তন: আপনি চাইলে কোনও বিশেষ ট্যাব লোডের সময় প্রথমে প্রদর্শিত হবে তা পরিবর্তন করতে পারেন।

  $(document).ready(function() {
      $("#tabs").tabs({
          active: 2  // তৃতীয় ট্যাব (ট্যাব ৩) একটিভ হবে
      });
  });
  

• ট্যাবের স্টাইল পরিবর্তন: আপনি ট্যাবের স্টাইল CSS দিয়ে পরিবর্তন করতে পারেন। যেমন, ব্যাকগ্রাউন্ড রঙ পরিবর্তন:

  #tabs .ui-tabs-nav li a {
      background-color: #f2f2f2;  /* ট্যাবের ব্যাকগ্রাউন্ড রঙ */
      color: #333;  /* ট্যাবের টেক্সট রঙ */
  }
  
  #tabs .ui-tabs-nav li.ui-state-active a {
      background-color: #4CAF50;  /* একটিভ ট্যাবের ব্যাকগ্রাউন্ড রঙ */
      color: white;  /* একটিভ ট্যাবের টেক্সট রঙ */
  }
  

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

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

$(document).ready(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            alert("ট্যাব পরিবর্তন হয়েছে: " + ui.newTab.text());
        }
    });
});

উপসংহার

jQueryUI Tabs উইজেট ব্যবহার করে আপনি সহজেই একটি ট্যাবযুক্ত ইন্টারফেস তৈরি করতে পারেন, যা ওয়েবসাইটের কনটেন্টকে আরও কার্যকরীভাবে সংগঠিত করে। আপনি একাধিক ট্যাব ব্যবহার করে বিভিন্ন ধরনের কনটেন্ট দেখাতে পারবেন এবং ব্যবহারকারীরা সহজে তাদের প্রয়োজনীয় তথ্য খুঁজে পাবে। এই উইজেটের কাস্টমাইজেশন অপশনগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইটের ডিজাইন এবং ইউজার ইন্টারফেস আরও উন্নত করতে পারবেন।