Foundation ফ্রেমওয়ার্কে শুধুমাত্র CSS এবং HTML স্টাইলিং নয়, এর JavaScript Componentsও ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে। JavaScript কম্পোনেন্টগুলো ওয়েব পেজে ইন্টারঅ্যাকটিভিটি এবং ডাইনামিক ফিচার যোগ করতে সহায়তা করে, যেমন মডাল, ড্রপডাউন, স্লাইডার, টুলটিপ ইত্যাদি। Foundation-এর JavaScript কম্পোনেন্টগুলো ব্যবহার করে ডেভেলপাররা তাদের ওয়েবসাইট বা অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারেন।
Foundation এর JavaScript Components
Foundation-এর JavaScript কম্পোনেন্টগুলি বিশেষভাবে UI উপাদান এবং ইন্টারঅ্যাকটিভ ফিচার তৈরির জন্য ডিজাইন করা হয়েছে। এই কম্পোনেন্টগুলো ব্যবহার করে ওয়েব পেজগুলোকে ইন্টারঅ্যাকটিভ, রেসপনসিভ, এবং ব্যবহারকারী-বান্ধব করা যায়। Foundation এর JavaScript কম্পোনেন্টগুলোর মধ্যে বেশ কিছু জনপ্রিয় এবং ব্যবহারযোগ্য কম্পোনেন্ট রয়েছে:
১. Modal
Modal একটি পপ-আপ উইন্ডো, যা সাধারণত ইউজারকে গুরুত্বপূর্ণ বার্তা দেখাতে বা ফর্ম পূরণ করতে ব্যবহার করা হয়। Modal ব্যবহারকারীর মেইন কন্টেন্টের উপর ফোকাস করে এবং তাকে অ্যাকশন নেওয়ার জন্য প্রম্পট দেয়।
ব্যবহার:
<button class="button" data-open="myModal">Open Modal</button>
<div class="reveal" id="myModal" data-reveal>
<h1>Here's a Modal!</h1>
<p>Some content inside the modal window.</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
এখানে, data-open এবং data-reveal অ্যাট্রিবিউটগুলো ব্যবহারকারীর জন্য মডাল উইন্ডো তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়।
২. Dropdown
Dropdown হচ্ছে একটি লিস্ট বা মেনু, যা সাধারণত একাধিক অপশন বা ফাংশন প্রদর্শনের জন্য ব্যবহৃত হয়। ওয়েবসাইটে এটি সাধারণত ন্যাভিগেশন মেনু বা ফিল্টার মেনুর জন্য ব্যবহৃত হয়।
ব্যবহার:
<button class="button" data-toggle="dropdown1">Dropdown</button>
<ul class="dropdown menu" id="dropdown1" data-dropdown-menu>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
data-toggle এবং data-dropdown-menu ব্যবহার করে dropdown মেনু তৈরি করা হয়, যা ক্লিক করলে ড্রপডাউন মেনু প্রদর্শিত হবে।
৩. Tooltip
Tooltip হল একটি ছোট টেক্সট বক্স, যা কোনো এলিমেন্টের উপর মাউস রাখা হলে প্রদর্শিত হয়। এটি সাধারণত বোতাম, আইকন, বা লিঙ্কের জন্য সহায়িক তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়।
ব্যবহার:
<button class="button" data-tooltip aria-haspopup="true" class="has-tip" title="This is a tooltip!">Hover over me!</button>
data-tooltip ব্যবহার করে সহজেই টুলটিপ তৈরি করা যায়, যা মাউস হোভার করলে প্রদর্শিত হবে।
৪. Accordion
Accordion একটি ইন্টারঅ্যাকটিভ কম্পোনেন্ট, যা একাধিক সেকশন বা কন্টেন্টের মধ্যে শুধুমাত্র একটিকে খোলার সুযোগ দেয়। এটি সাধারণত FAQ (Frequently Asked Questions) বা একাধিক কন্টেন্ট সেকশনের জন্য ব্যবহৃত হয়।
ব্যবহার:
<div class="accordion" data-accordion>
<div class="accordion-item">
<a href="#" class="accordion-title">Section 1</a>
<div class="accordion-content" data-tab-content>
<p>Content for section 1</p>
</div>
</div>
<div class="accordion-item">
<a href="#" class="accordion-title">Section 2</a>
<div class="accordion-content" data-tab-content>
<p>Content for section 2</p>
</div>
</div>
</div>
এখানে data-accordion এবং data-tab-content ব্যবহার করা হয় যাতে একাধিক সেকশন থাকে এবং শুধুমাত্র একটি সেকশন খোলা থাকে।
৫. Carousel (Slick Slider)
Carousel বা Slick Slider একটি স্লাইডিং গ্যালারি বা ছবি পরিবর্তন করার কম্পোনেন্ট, যা সাধারণত ইমেজ গ্যালারী বা প্রোডাক্ট স্লাইডশো তৈরি করার জন্য ব্যবহৃত হয়।
ব্যবহার:
<div class="carousel" data-carousel>
<div class="carousel-item">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Image 2">
</div>
</div>
data-carousel ব্যবহার করে একটি স্লাইডশো তৈরি করা যায়, যা ব্যবহারকারীকে একের পর এক ইমেজ দেখতে সাহায্য করে।
৬. Tabs
Tabs কম্পোনেন্টটি ব্যবহারকারীর জন্য একাধিক পেজ বা কনটেন্ট সেকশন একসাথে প্রদর্শন করার উপায় দেয়। সাধারণত এটি কন্টেন্ট বিভাগ বা সেটিংস প্যানেল তৈরি করার জন্য ব্যবহৃত হয়।
ব্যবহার:
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1">Panel 1</a></li>
<li class="tabs-title"><a href="#panel2">Panel 2</a></li>
<li class="tabs-title"><a href="#panel3">Panel 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Content for panel 1</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Content for panel 2</p>
</div>
<div class="tabs-panel" id="panel3">
<p>Content for panel 3</p>
</div>
</div>
data-tabs এবং data-tabs-content ব্যবহার করে সহজেই ট্যাব তৈরি করা যায়, যা কন্টেন্টকে বিভিন্ন প্যানেলে ভাগ করে।
Foundation এর JavaScript Components এর ভূমিকা
Foundation এর JavaScript কম্পোনেন্টগুলো ওয়েবসাইটে ইন্টারঅ্যাকটিভিটি, ফাংশনালিটি, এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়ক। এই কম্পোনেন্টগুলির সাহায্যে ওয়েব ডেভেলপাররা সহজেই মডাল, ড্রপডাউন, স্লাইডার, টুলটিপ, একর্ডিয়ন ইত্যাদি যোগ করতে পারেন, যা একদিকে যেমন ওয়েব পেজকে আরও প্রফেশনাল ও ব্যবহারকারী-বান্ধব করে তোলে, অন্যদিকে এগুলি ওয়েব পেজের পারফরম্যান্সও উন্নত করে।
Foundation এর JavaScript কম্পোনেন্টগুলি একটি ওয়েবসাইটের ডিজাইনকে ডায়নামিক এবং ইন্টারঅ্যাকটিভ করে তোলে, যার ফলে ব্যবহারকারীরা ওয়েবসাইটের সাথে সহজে ইন্টারঅ্যাক্ট করতে পারে।
