Foundation এর Equalizer Plugin একটি অত্যন্ত কার্যকরী টুল যা বিভিন্ন ডিভ বা উপাদানের উচ্চতাকে সমান করে দেয়। এটি বিশেষভাবে ব্যবহার করা হয় যখন একাধিক উপাদান এক সারিতে সাজানো থাকে এবং তাদের উচ্চতা স্বাভাবিকভাবে অসমান হয়। Equalizer স্বয়ংক্রিয়ভাবে সকল উপাদানের উচ্চতা সমান করে দেয়, যাতে একটি সুসংগঠিত এবং সুশৃঙ্খল লেআউট তৈরি হয়।
এটি বিশেষত তখন ব্যবহারী হয় যখন Grid System এর কলামগুলোতে ইনপুট বা কনটেন্ট থাকে এবং আপনি চান যে, সমস্ত কলামের উচ্চতা সমান হোক।
Equalizer Plugin ব্যবহার করে সমান হাইটের ডিভ তৈরি করার পদ্ধতি
Foundation এ Equalizer Plugin ব্যবহারের জন্য JavaScript এবং কিছু HTML কাস্টমাইজেশন করতে হয়। এটি মূলত data-equalizer এবং data-equalizer-watch অ্যাট্রিবিউট ব্যবহার করে কাজ করে।
Equalizer Plugin কিভাবে কাজ করে?
data-equalizer: এটি Equalizer কার্যকর করতে রো বা কনটেইনারের উপরে অ্যাপ্লাই করা হয়।data-equalizer-watch: এটি সকল উপাদানে অ্যাপ্লাই করা হয়, যা ঐ রো বা কনটেইনারের মধ্যে থাকবে এবং তার উচ্চতা সমান করবে।
এখন, চলুন একটি উদাহরণ দেখি যেখানে Foundation Equalizer Plugin ব্যবহার করে সমান উচ্চতার ডিভ তৈরি করা হয়েছে।
উদাহরণ: Equalizer Plugin ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equalizer Plugin Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
</head>
<body>
<div class="row" data-equalizer>
<div class="small-12 medium-4 columns" data-equalizer-watch>
<div class="panel">
<h4>Block 1</h4>
<p>এই ব্লকটির উচ্চতা অবশ্যই অন্য ব্লকগুলির সাথে সমান হবে।</p>
</div>
</div>
<div class="small-12 medium-4 columns" data-equalizer-watch>
<div class="panel">
<h4>Block 2</h4>
<p>এখানে কিছু কন্টেন্ট রয়েছে এবং এর উচ্চতা সমান হবে।</p>
</div>
</div>
<div class="small-12 medium-4 columns" data-equalizer-watch>
<div class="panel">
<h4>Block 3</h4>
<p>এটি তৃতীয় ব্লক এবং এর উচ্চতাও সমান হবে।</p>
</div>
</div>
</div>
<script>
$(document).foundation(); // Foundation initialization
</script>
</body>
</html>
ব্যাখ্যা:
<div class="row" data-equalizer>: এই রো (row) ট্যাগের উপরেdata-equalizerঅ্যাট্রিবিউট ব্যবহার করা হয়েছে। এর মাধ্যমে এই রোতে থাকা সমস্ত কলাম (columns) একে অপরের সাথে উচ্চতায় সমান হবে।<div class="small-12 medium-4 columns" data-equalizer-watch>: প্রতিটি কলামেdata-equalizer-watchঅ্যাট্রিবিউট ব্যবহার করা হয়েছে, যার মাধ্যমে Foundation Equalizer Plugin সেই কলামের উচ্চতা সমান করে দিবে।- Foundation ফাইলগুলি ইনক্লুড করা: Foundation CSS এবং JavaScript ফাইলগুলো সিডিএন (CDN) থেকে লোড করা হয়েছে, যা Equalizer Plugin কার্যকর করতে সাহায্য করে।
$(document).foundation();: এই কোডটি Foundation ফ্রেমওয়ার্কটি ইনিশিয়ালাইজ করতে ব্যবহৃত হয়, যাতে সমস্ত ফিচার এবং প্লাগইন কাজ করতে পারে।
Equalizer Plugin এর সুবিধা:
- সমান উচ্চতা: এটি কলামগুলোর উচ্চতা স্বয়ংক্রিয়ভাবে সমান করে, যাতে লেআউট সুন্দর ও সুশৃঙ্খল হয়।
- রেসপনসিভ: Foundation Equalizer Plugin রেসপনসিভ, তাই এটি মোবাইল, ট্যাবলেট এবং ডেস্কটপের স্ক্রীনে ভাল কাজ করবে।
- সহজ কনফিগারেশন: কেবলমাত্র
data-equalizerএবংdata-equalizer-watchঅ্যাট্রিবিউট ব্যবহার করেই এটি কাজ করতে পারে, তাই এতে অতিরিক্ত জটিলতা নেই। - ডাইনামিক কন্টেন্ট: যখন আপনার কন্টেন্ট ডায়নামিক বা পরিবর্তনশীল হয়, তখনও Equalizer স্বয়ংক্রিয়ভাবে উপাদানগুলির উচ্চতা সমান করে রাখে।
Foundation Equalizer Plugin ব্যবহার করে Foundation গ্রিড সিস্টেমে সমান উচ্চতার ডিভ তৈরি করা খুবই সহজ এবং কার্যকরী। এটি আপনাকে একটি সুন্দর এবং সুশৃঙ্খল লেআউট তৈরি করতে সহায়তা করে, বিশেষত যখন আপনি একাধিক কলাম বা ব্লক একই সারিতে ব্যবহার করছেন। এর মাধ্যমে আপনি আপনার ওয়েবসাইটের ডিজাইনকে আরও রেসপনসিভ এবং ইউজার-বান্ধব করে তুলতে পারেন।
Read more
