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 উইজেট ব্যবহার করে আপনি সহজেই একটি ট্যাবযুক্ত ইন্টারফেস তৈরি করতে পারেন, যা ওয়েবসাইটের কনটেন্টকে আরও কার্যকরীভাবে সংগঠিত করে। আপনি একাধিক ট্যাব ব্যবহার করে বিভিন্ন ধরনের কনটেন্ট দেখাতে পারবেন এবং ব্যবহারকারীরা সহজে তাদের প্রয়োজনীয় তথ্য খুঁজে পাবে। এই উইজেটের কাস্টমাইজেশন অপশনগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইটের ডিজাইন এবং ইউজার ইন্টারফেস আরও উন্নত করতে পারবেন।
Read more
