Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা বিভিন্ন ধরনের UI উপাদান প্রদান করে, যেমন Modal, Tooltip, এবং Tabs। এগুলোর জন্য আপনি JavaScript এর মাধ্যমে ইন্টারঅ্যাকশন কন্ট্রোল করতে পারেন, যেমন open, close, activate ইত্যাদি। এখানে আমরা দেখব কীভাবে JavaScript এর মাধ্যমে এই উপাদানগুলো কন্ট্রোল করা যায়।
Modal কন্ট্রোল করা
Modal হলো একটি পপ-আপ উইন্ডো যা সাধারণত ব্যবহারকারীকে কোনো নির্দিষ্ট একশন সম্পন্ন করতে বা গুরুত্বপূর্ণ তথ্য দেখানোর জন্য ব্যবহার করা হয়। Materialize CSS-এ Modal তৈরি এবং কন্ট্রোল করা খুবই সহজ।
১. Modal তৈরি করা:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Modal</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Trigger Button -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Open Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>This is a simple modal example.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
<a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
</div>
</div>
<!-- Materialize JS Link -->
<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>
<!-- Initialize Modal -->
<script>
$(document).ready(function(){
$('.modal').modal(); // Initialize modal
});
</script>
</body>
</html>
এখানে:
- modal-trigger: এটি modal খোলার জন্য ব্যবহৃত হয়।
- modal: modal এর মূল স্ট্রাকচার।
- modal-close: এটি modal বন্ধ করার জন্য ব্যবহৃত হয়।
২. JavaScript এর মাধ্যমে Modal কন্ট্রোল করা:
<script>
$(document).ready(function(){
// Modal open
$('#openModal').click(function(){
$('#modal1').modal('open');
});
// Modal close
$('#closeModal').click(function(){
$('#modal1').modal('close');
});
});
</script>
এখানে:
- $('#modal1').modal('open'): এটি modal টি খোলার জন্য ব্যবহার করা হয়।
- $('#modal1').modal('close'): এটি modal টি বন্ধ করার জন্য ব্যবহার করা হয়।
Tooltip কন্ট্রোল করা
Tooltip হলো একটি ছোট পপ-আপ যা সাধারণত উপাদানের উপর মাউস হোভার করলে প্রদর্শিত হয়। Materialize CSS-এ tooltip তৈরি এবং কন্ট্রোল করা সহজ।
১. Tooltip তৈরি করা:
<a class="waves-effect waves-light btn tooltipped" data-tooltip="This is a tooltip">Hover me</a>
<!-- Materialize JS Link -->
<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>
<script>
$(document).ready(function(){
$('.tooltipped').tooltip(); // Initialize tooltip
});
</script>
এখানে:
- tooltipped: এটি tooltip সক্রিয় করার জন্য ক্লাস।
- data-tooltip: এটি tooltip এর কনটেন্ট বা বার্তা।
২. JavaScript এর মাধ্যমে Tooltip কন্ট্রোল করা:
<script>
$(document).ready(function(){
// Tooltip open
$('.tooltipped').tooltip('open');
// Tooltip close
$('.tooltipped').tooltip('close');
});
</script>
এখানে:
- $('.tooltipped').tooltip('open'): এটি tooltip কে খোলার জন্য ব্যবহার করা হয়।
- $('.tooltipped').tooltip('close'): এটি tooltip বন্ধ করার জন্য ব্যবহৃত হয়।
Tabs কন্ট্রোল করা
Tabs হল এমন একটি উপাদান যা পৃষ্ঠায় বিভিন্ন সেকশন বা কনটেন্টের মধ্যে সুইচ করার জন্য ব্যবহার করা হয়। Materialize CSS-এ 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</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Tabs Structure -->
<div class="row">
<div class="col s12">
<ul 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>
<li class="tab col s3"><a href="#test4">Tab 4</a></li>
</ul>
<div id="test1" class="col s12">Content for Tab 1</div>
<div id="test2" class="col s12">Content for Tab 2</div>
<div id="test3" class="col s12">Content for Tab 3</div>
<div id="test4" class="col s12">Content for Tab 4</div>
</div>
</div>
<!-- Materialize JS Link -->
<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>
<script>
$(document).ready(function(){
$('.tabs').tabs(); // Initialize tabs
});
</script>
</body>
</html>
এখানে:
- tabs: এই ক্লাসটি ট্যাবের জন্য প্রয়োজনীয়।
- tab: এই ক্লাসটি প্রতিটি ট্যাবের জন্য ব্যবহৃত হয়।
- href="#test1": এটি ট্যাবের কন্টেন্টের সাথে সম্পর্কিত।
২. JavaScript এর মাধ্যমে Tabs কন্ট্রোল করা:
<script>
$(document).ready(function(){
// Activate Tab
$('.tabs').tabs('select', 'test2'); // Activate Tab 2
});
</script>
এখানে:
- $('.tabs').tabs('select', 'test2'): এটি ট্যাব ২ কে সক্রিয় করে।
উপসংহার
Materialize CSS এ Modal, Tooltip, এবং Tabs ব্যবহার করা অত্যন্ত সহজ এবং এগুলোর ইন্টারঅ্যাকশন কন্ট্রোল করা JavaScript দিয়ে আরও সহজ হয়ে যায়। আপনি open, close, select এবং initialize ইত্যাদি কমান্ড ব্যবহার করে এই উপাদানগুলোর নিয়ন্ত্রণ করতে পারেন। এর মাধ্যমে আপনি আপনার ওয়েবসাইটে একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারবেন।
Read more
