Materialize CSS ফ্রেমওয়ার্কে Tabs ব্যবহার করা সহজ এবং এটি ওয়েব পেজে বিভিন্ন কনটেন্ট বা সেকশনকে সুগমভাবে উপস্থাপন করতে সহায়ক। আপনি যখন Tabs ব্যবহার করেন, তখন প্রতি ট্যাবের জন্য একটি নির্দিষ্ট কনটেন্ট প্রদর্শিত হয়। তবে, কখনো কখনো, আপনি চাইবেন যে প্রতিটি ট্যাবের জন্য ডাইনামিক কনটেন্ট লোড করা হোক, যেমন API থেকে ডেটা আনা বা বিভিন্ন ইন্টারঅ্যাকটিভ কন্টেন্ট দেখানো।
এখানে Materialize CSS এর মাধ্যমে Tabs ব্যবহার করে ডাইনামিক কনটেন্ট লোড করার পদ্ধতি তুলে ধরা হলো।
Materialize Tabs তৈরি করা
প্রথমে, Materialize Tabs এর সাধারণ কাঠামো তৈরি করতে হবে। এখানে একটি সাধারণ Tabs তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Tabs Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<!-- Tabs Structure -->
<div class="container">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3"><a href="#test1">Tab 1</a></li>
<li class="tab col s3"><a href="#test2">Tab 2</a></li>
<li class="tab col s3"><a href="#test3">Tab 3</a></li>
</ul>
<div id="test1" class="col s12">
<!-- Dynamic content will be loaded here -->
</div>
<div id="test2" class="col s12">
<!-- Dynamic content will be loaded here -->
</div>
<div id="test3" class="col s12">
<!-- Dynamic content will be loaded here -->
</div>
</div>
<script>
$(document).ready(function() {
$('.tabs').tabs(); // Initialize Tabs
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- Tabs Structure: এখানে একটি ট্যাবের কাঠামো তৈরি করা হয়েছে যেখানে তিনটি ট্যাব রয়েছে: Tab 1, Tab 2, এবং Tab 3।
- প্রতিটি ট্যাবের জন্য একটি div আছে যা col s12 ক্লাসের সাথে যুক্ত এবং এতে ডাইনামিক কনটেন্ট লোড হবে।
- $('.tabs').tabs();: এটি Materialize এর tabs ফিচারকে সক্রিয় করে।
Dynamic Content লোড করা
এখন, আমরা Tabs এর জন্য ডাইনামিক কনটেন্ট লোড করতে একটি AJAX রিকোয়েস্ট ব্যবহার করব। ধরুন, আপনি প্রতিটি ট্যাবের জন্য আলাদা ডেটা লোড করতে চান। আপনি jQuery বা Vanilla JavaScript ব্যবহার করে এটি করতে পারেন।
১. AJAX Request দিয়ে Dynamic Content লোড করা:
<script>
$(document).ready(function() {
// Initialize Tabs
$('.tabs').tabs();
// Load dynamic content for Tab 1
$('#test1').load('https://api.example.com/content1', function() {
console.log('Tab 1 content loaded');
});
// Load dynamic content for Tab 2
$('#test2').load('https://api.example.com/content2', function() {
console.log('Tab 2 content loaded');
});
// Load dynamic content for Tab 3
$('#test3').load('https://api.example.com/content3', function() {
console.log('Tab 3 content loaded');
});
});
</script>
কোড ব্যাখ্যা:
- $('#test1').load(url, callback): এখানে
loadমেথডটি ব্যবহার করা হচ্ছে, যা একটি URL থেকে কনটেন্ট লোড করবে এবং callback ফাংশনটি তখন কল হবে যখন কনটেন্ট লোড সম্পূর্ণ হবে। প্রতিটি ট্যাবের জন্য একটি API এন্ডপয়েন্ট নির্দিষ্ট করা হয়েছে (এখানেhttps://api.example.com/content1,content2, এবংcontent3উদাহরণস্বরূপ দেওয়া হয়েছে)। - console.log(): কনটেন্ট লোড হওয়া পর একটি মেসেজ কনসোলে প্রদর্শিত হবে।
২. Content লোড হওয়ার পর Callback ফাংশন ব্যবহার করা:
আপনি যখন ডাইনামিক কনটেন্ট লোড করবেন, তখন আপনি সেই কনটেন্টকে callback function এর মাধ্যমে প্রসেস বা ইন্টারঅ্যাকটিভ করতে পারেন। উদাহরণস্বরূপ:
<script>
$(document).ready(function() {
$('.tabs').tabs();
// Load content for Tab 1 dynamically
$('#test1').load('https://api.example.com/content1', function() {
$(this).append('<p>Additional content loaded!</p>');
});
// Similarly for other tabs...
});
</script>
এখানে, $('#test1').append() ব্যবহার করে আপনি লোড হওয়া কনটেন্টের পরে আরো কন্টেন্ট অ্যাড করতে পারেন।
উপসংহার
Materialize CSS এর Tabs ব্যবহার করে আপনি সহজেই ডাইনামিক কনটেন্ট লোড করতে পারেন। AJAX বা API Requests ব্যবহার করে আপনি প্রতিটি ট্যাবের জন্য আলাদা কনটেন্ট ডাইনামিকভাবে লোড করতে পারবেন। এটি ওয়েব অ্যাপ্লিকেশন বা সাইটের ইউজার ইন্টারফেসকে আরো ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে, কারণ আপনি শুধুমাত্র প্রয়োজনীয় ডেটা লোড করেন এবং তা ব্যবহারকারীর সামনে তুলে ধরেন।
Read more
