বুটস্ট্রাপ জেএস ট্যাব রেফারেন্স - bootstrap JS Tab Reference
বুটস্ট্রাপ JS ট্যাব (tab.js)
একটি কন্টেন্টকে বিভিন্ন অংশে ভাগ করতে ট্যাব ব্যবহার করা হয় যেখানে প্রত্যেকটি অংশের যেকোন একটি অংশই একবারে দেখা যাবে।
বুটস্ট্রাপ ট্যাব সর্ম্পকিত টিউটরিয়ালের জন্য আমাদের বুটস্ট্রাপ ট্যাব/পিল টিউটোরিয়ালটি পড়ুন।
বুটস্ট্রাপ ট্যাব প্লাগইন ক্লাসসমূহ
| ক্লাস | বর্ণনা |
|---|---|
.nav nav-tabs |
ন্যাভিগেশন ট্যাব তৈরী করে। |
.nav-justified |
যখন স্ক্রীন 768px থেকে বড় থাকে,ন্যাভিগেশন ট্যাব/পিল কে তাদের পেরেন্টের দৈঘ্যের সমান রাখে। আর ছোট স্ক্রীনের ক্ষেত্রে, ন্যাভিগেশন ট্যাব গুলো stack আকারে থাকে। |
.tab-content |
.tab-pane ক্লাস এবং data-toggle="tab" এট্রিবিউট একত্রে ট্যাবকে টোগলেবল করে। |
.tab-pane |
.tab-content ক্লাস এবং data-toggle="tab" এট্রিবিউটের সাহায্যে একত্রে টোগলেবল করে। |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
ট্যাবের মধ্যে data-toggle="tab" এট্রিবিউট যুক্ত করুন এবং প্রত্যেকটি ট্যাব আইটেমের মধ্যে ইউনিক আইডি সহ .tab-pane ক্লাস যুক্ত করুন তারপর পুরোটাকে .tab-content ক্লাসের আওতায় অন্তর্ভূক্ত করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tab Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>data-* এট্রিবিউট মাধ্যম</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#service">Service</a></li>
<li><a data-toggle="tab" href="#about-us">About us</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>স্যাট একাডেমী</h3>
<p>দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।</p>
</div>
<div id="service" class="tab-pane fade">
<h3>Service</h3>
<p>এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।</p>
</div>
<div id="about-us" class="tab-pane fade">
<h3>About us</h3>
<p>শিক্ষাতে বানিজ্য নয়। শিক্ষা বানিজ্যকে না বলি।</p>
</div>
</div>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়ালি সক্রিয় করার জন্যঃ
// সকল ট্যাবকে একসাথে সিলেক্ট করার জন্য
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// নামের মাধ্যমে সিলেক্টের জন্য
$('.nav-tabs a[href="#home"]').tab('show')
// প্রথম ট্যাবকে সিলেক্ট করার জন্য
$('.nav-tabs a:first').tab('show')
// সর্বশেষ ট্যাব সিলেক্ট করার জন্য
$('.nav-tabs a:last').tab('show')
// চতুর্থ ট্যাবকে সিলেক্ট করার জন্য (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tab Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>জাভাস্ক্রিপ্ট মাধ্যম</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#service">Service</a></li>
<li><a data-toggle="tab" href="#about-us">About us</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>স্যাট একাডেমী</h3>
<p>দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।</p>
</div>
<div id="service" class="tab-pane fade">
<h3>Service</h3>
<p>এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।</p>
</div>
<div id="about-us" class="tab-pane fade">
<h3>About us</h3>
<p>শিক্ষাতে বানিজ্য নয়। শিক্ষা বানিজ্যকে না বলি।</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
</body>
</html>
ফলাফল
বুটস্ট্রাপ ট্যাব মেথড
ট্যাব মেথড নিচের টেবিলে দেখানো হলো।
| মেথড | বর্ণনা | উদাহরণ |
|---|---|---|
.tab("show") |
ট্যাব প্রদর্শন করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ ট্যাব ইভেন্ট
ট্যাব ইভেন্ট নিম্নোক্ত টেবিল দেখানো হলো।
| ইভেন্ট | বর্ণনা | উদাহরণ |
|---|---|---|
show.bs.tab |
যখন ট্যাব প্রদর্শন করা হয় তখন সম্পন্ন হয়। | উদাহরণ দেখুন |
shown.bs.tab |
যখন ট্যাবটি সম্পূর্ন প্রদর্শিত হয় হয় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
hide.bs.tab |
যখন ট্যাব হাইড করা হয় তখন ঘটে। | উদাহরণ দেখুন |
hidden.bs.tab |
যখন ট্যাবটি সম্পূর্ন হাইড হয়ে যায় তখন এই ইভেন্টটি ঘটে (সিএসএস ট্রানজিশন সম্পন্ন হওয়ার পর)। | উদাহরণ দেখুন |
টিপসঃ একটিভ ট্যাব এবং পূর্ববর্তী একটিভ ট্যাব পেতে জেকুয়েরির event.target এবং event.relatedTarget ইভেন্ট গুলো ব্যবহার করুন।