MooTools ব্যবহার করে Keyboard Navigation এবং Tab Order ব্যবস্থাপনা একটি গুরুত্বপূর্ণ অংশ, যা ওয়েব অ্যাপ্লিকেশন এবং ওয়েব পেজের accessibility এবং user experience (UX) উন্নত করতে সহায়তা করে। কীবোর্ড নেভিগেশন এবং ট্যাব অর্ডার ব্যবস্থাপনা আপনাকে কীবোর্ড ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং সহজ অ্যাপ্লিকেশন তৈরি করতে সাহায্য করবে। MooTools এ Tabindex এবং keyboard events হ্যান্ডলিংয়ের মাধ্যমে সহজেই এই ফিচারগুলি বাস্তবায়ন করা যায়।
1. Tab Order ব্যবস্থাপনা
Tab Order ব্যবস্থাপনা ওয়েব পেজের উপাদানগুলিতে কীবোর্ডের Tab কী দিয়ে সহজে নেভিগেশন করার সুযোগ দেয়। এর মাধ্যমে আপনি নির্দিষ্ট একটি অর্ডারে ইনপুট ফিল্ড, বাটন বা অন্য ফোকাসযোগ্য এলিমেন্টে ফোকাস সরিয়ে নিতে পারেন।
tabindex ব্যবহার
HTML-এ tabindex অ্যাট্রিবিউট ব্যবহার করে আপনি ওয়েব পেজের উপাদানগুলির জন্য ট্যাব অর্ডার নির্ধারণ করতে পারেন।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Tab Order Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
</head>
<body>
<input type="text" id="input1" tabindex="1" placeholder="First Input">
<input type="text" id="input2" tabindex="3" placeholder="Second Input">
<input type="text" id="input3" tabindex="2" placeholder="Third Input">
<button id="submitBtn" tabindex="4">Submit</button>
<script type="text/javascript">
window.addEvent('domready', function() {
var inputs = $$('input'); // সকল ইনপুট এলিমেন্ট সিলেক্ট করা
inputs.each(function(input) {
input.addEvent('focus', function() {
input.setStyle('border', '2px solid blue'); // ইনপুট ফোকাস হলে বর্ডার ব্লু হবে
});
input.addEvent('blur', function() {
input.setStyle('border', ''); // ইনপুট থেকে ফোকাস চলে গেলে বর্ডার মুছে যাবে
});
});
});
এখানে:
tabindex অ্যাট্রিবিউট ব্যবহার করে ইনপুট ফিল্ড এবং বাটনের ট্যাব অর্ডার নির্ধারণ করা হয়েছে।tabindex="1" থেকে শুরু করে প্রতিটি ইনপুটের জন্য ভিন্ন ভিন্ন ট্যাব ইনডেক্স নির্ধারণ করা হয়েছে, যার মাধ্যমে ব্যবহারকারী Tab কী চাপলে ইনপুটগুলো সঠিক অর্ডারে ফোকাস হবে।
2. Keyboard Navigation ব্যবস্থাপনা
MooTools দিয়ে আপনি keyboard navigation পরিচালনা করতে পারেন, যেখানে ব্যবহারকারী কীবোর্ডের মাধ্যমে বিভিন্ন উপাদানের মধ্যে নেভিগেট করতে সক্ষম হবে। সাধারণত keydown এবং keyup ইভেন্ট ব্যবহার করে কীবোর্ডের ইনপুট গ্রহণ করা হয়।
কীবোর্ড নেভিগেশন উদাহরণ:
Keyboard Navigation Example
('input'); // সকল ইনপুট এলিমেন্ট সিলেক্ট করা
var currentIndex = 0;
// কীবোর্ড নেভিগেশন হ্যান্ডল করা
window.addEvent('keydown', function(event) {
if (event.key === 'Tab') {
event.preventDefault(); // Tab key এর ডিফল্ট আচরণ বন্ধ করা
currentIndex = (currentIndex + 1) % inputs.length; // সঠিক ইনপুটে নেভিগেট করা
inputs[currentIndex].focus(); // নতুন ইনপুটে ফোকাস করা
inputs[currentIndex].addClass('focus'); // ফোকাস ইফেক্ট যোগ করা
}
});
});
</script>
</body>
</html>
এখানে:
keydownইভেন্ট ব্যবহার করে কীবোর্ডের ইনপুট শনাক্ত করা হচ্ছে, বিশেষ করেTabকী দিয়ে নেভিগেট করা হচ্ছে।event.preventDefault()ব্যবহার করে ট্যাব কীয়ের ডিফল্ট কার্যকলাপ (এলিমেন্টে ফোকাস দেওয়া) বন্ধ করা হয়েছে, এবং ম্যানুয়ালি কীবোর্ডের ইনপুট অনুযায়ী নেভিগেট করা হয়েছে।
3. Arrow Keys দিয়ে নেভিগেশন
কীবোর্ডের Arrow keys (যেমন: উপরের, নিচের, ডানে, বামে) ব্যবহার করে আপনি ওয়েব পেজের নির্দিষ্ট এলিমেন্টে নেভিগেট করতে পারেন। MooTools-এ আপনি কীবোর্ডের Arrow keys হ্যান্ডলিংয়ের জন্য keydown ইভেন্ট ব্যবহার করতে পারেন।
Arrow Keys দিয়ে নেভিগেশন উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Arrow Key Navigation</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<style>
.focus {
border: 2px solid green;
}
</style>
</head>
<body>
<input type="text" id="input1" placeholder="First Input">
<input type="text" id="input2" placeholder="Second Input">
<input type="text" id="input3" placeholder="Third Input">
<input type="text" id="input4" placeholder="Fourth Input">
<script type="text/javascript">
window.addEvent('domready', function() {
var inputs = $$('input'); // সকল ইনপুট এলিমেন্ট সিলেক্ট করা
var currentIndex = 0;
// কীবোর্ড Arrow keys দিয়ে নেভিগেশন হ্যান্ডল করা
window.addEvent('keydown', function(event) {
if (event.key === 'ArrowDown') {
event.preventDefault(); // ArrowDown key এর ডিফল্ট আচরণ বন্ধ করা
currentIndex = (currentIndex + 1) % inputs.length; // নীচে নেভিগেট করা
} else if (event.key === 'ArrowUp') {
event.preventDefault(); // ArrowUp key এর ডিফল্ট আচরণ বন্ধ করা
currentIndex = (currentIndex - 1 + inputs.length) % inputs.length; // উপরে নেভিগেট করা
}
inputs[currentIndex].focus(); // নতুন ইনপুটে ফোকাস করা
inputs[currentIndex].addClass('focus'); // ফোকাস ইফেক্ট যোগ করা
});
});
</script>
</body>
</html>
এখানে:
- ArrowDown এবং ArrowUp কী এর মাধ্যমে ইনপুট ফিল্ডগুলির মধ্যে নেভিগেশন করা হচ্ছে।
event.preventDefault()ব্যবহার করে কীবোর্ডের ডিফল্ট আচরণ (যেমন স্ক্রল করা) বন্ধ করা হচ্ছে এবংfocus()মেথড দিয়ে ইনপুট ফিল্ডে ফোকাস দেওয়া হচ্ছে।
সারাংশ
MooTools দিয়ে keyboard navigation এবং tab order ব্যবস্থাপনা খুবই সহজ এবং কার্যকর। tabindex এবং focus() মেথড ব্যবহার করে আপনি কীবোর্ডের মাধ্যমে পেজের উপাদানগুলিতে নেভিগেট করতে পারেন। এছাড়া, keydown ইভেন্ট ব্যবহার করে আপনি কীবোর্ডের ইনপুট অনুযায়ী উপাদানগুলিতে ফোকাস দিতে পারেন এবং Arrow keys ব্যবহার করে উপাদানগুলির মধ্যে সহজে নেভিগেট করতে পারেন। এগুলি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েব পেজের accessibility এবং user experience (UX) উন্নত করতে সহায়তা করে।
Read more
