Tooltip এবং Positioning হল jQueryUI এর দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা ওয়েব ডেভেলপমেন্টে ইউজার ইন্টারফেসের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করে। Tooltip ব্যবহারের মাধ্যমে আপনি ব্যবহারকারীদের আইটেম বা এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য দিতে পারেন, এবং Positioning এর মাধ্যমে আপনি উপাদানগুলোর অবস্থান কাস্টমাইজ করতে পারেন। এই দুটি ফিচারের Events এবং ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হলো।
Tooltip উইজেট এবং এর Events
Tooltip উইজেট ব্যবহারকারীদের কাছে একটি উপাদান সম্পর্কে অতিরিক্ত তথ্য বা হেল্প টেক্সট প্রদর্শন করতে সহায়তা করে। যখন ব্যবহারকারী একটি এলিমেন্টের ওপর মাউস পয়েন্টার নিয়ে যায়, তখন একটি টুলটিপ প্রদর্শিত হয়।
Tooltip ব্যবহার
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<button title="এই বাটনে ক্লিক করুন">হেল্প বাটন</button>
<script>
$(document).ready(function() {
$(document).tooltip(); // Tooltip উইজেট অ্যাপ্লাই
});
</script>
</body>
</html>
এখানে, একটি button এলিমেন্টে title অ্যাট্রিবিউট ব্যবহার করে একটি টুলটিপ যোগ করা হয়েছে। যখন ব্যবহারকারী বাটনে মাউস নেবে, তখন টুলটিপটি প্রদর্শিত হবে।
Tooltip এর Events
jQueryUI Tooltip উইজেটে কয়েকটি কাস্টম ইভেন্ট রয়েছে যা আপনি ব্যবহার করতে পারেন, যেমন open, close, এবং focus ইভেন্ট।
- open ইভেন্ট: যখন টুলটিপ প্রদর্শিত হয়, তখন এটি ট্রিগার হয়।
$(document).tooltip({
open: function(event, ui) {
console.log("Tooltip opened!");
}
});
- close ইভেন্ট: যখন টুলটিপ বন্ধ হয়, তখন এটি ট্রিগার হয়।
$(document).tooltip({
close: function(event, ui) {
console.log("Tooltip closed!");
}
});
- focus ইভেন্ট: যখন একটি টুলটিপ এলিমেন্টে ফোকাস করা হয়, তখন এটি ট্রিগার হয়।
$(document).tooltip({
focus: function(event, ui) {
console.log("Tooltip focused!");
}
});
Tooltip কাস্টমাইজেশন
- position: আপনি টুলটিপের অবস্থান কাস্টমাইজ করতে পারেন।
$(document).tooltip({
position: { my: "left top", at: "right top" }
});
এখানে, টুলটিপের অবস্থান left top থেকে right top এ স্থানান্তরিত করা হয়েছে।
- tooltip class: আপনি টুলটিপের স্টাইলও কাস্টমাইজ করতে পারেন।
$(document).tooltip({
tooltipClass: "custom-tooltip"
});
.custom-tooltip {
background-color: #333;
color: white;
border-radius: 5px;
padding: 5px;
}
Positioning উইজেট এবং এর Events
Positioning একটি শক্তিশালী ফিচার যা আপনাকে উপাদানগুলোর অবস্থান কাস্টমাইজ করতে সহায়তা করে। আপনি position() ফাংশন ব্যবহার করে উপাদানগুলোর অবস্থান নির্ধারণ করতে পারেন এবং এটি মোডিফাই করতে পারেন।
Positioning ব্যবহার
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="element" style="width: 100px; height: 100px; background-color: #4CAF50;">
Position Me!
</div>
<button id="move-button">Move Element</button>
<script>
$(document).ready(function() {
// Positioning an element at specific coordinates
$("#move-button").click(function() {
$("#element").position({
my: "left top",
at: "right bottom",
of: window // Positioning relative to the window
});
});
});
</script>
</body>
</html>
এখানে, একটি এলিমেন্টকে right bottom অবস্থানে window থেকে কাস্টম পজিশন করা হয়েছে।
Positioning এর Events
Positioning উইজেটের জন্য কাস্টম ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি position ফাংশনের ব্যবহার অনুযায়ী কাস্টম লজিক প্রয়োগ করতে পারেন।
- positionchange ইভেন্ট: যখন একটি উপাদান তার অবস্থান পরিবর্তন করে, তখন এটি ট্রিগার হয়।
$("#element").on("positionchange", function(event, ui) {
console.log("Position changed!");
});
- positionstart ইভেন্ট: যখন একটি উপাদান তার পজিশন পরিবর্তন শুরু করে, তখন এটি ট্রিগার হয়।
$("#element").on("positionstart", function(event, ui) {
console.log("Position change started!");
});
উপসংহার
Tooltip এবং Positioning উইজেটের মাধ্যমে jQueryUI আপনার ওয়েব পেজের ইন্টারফেসে খুবই ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব উপাদান যোগ করতে সাহায্য করে। Tooltip ব্যবহার করে আপনি ব্যবহারকারীদের উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে পারেন এবং এর কাস্টম ইভেন্টের মাধ্যমে আপনি এটি আরও কাস্টমাইজ করতে পারেন। অন্যদিকে, Positioning উইজেট ব্যবহার করে আপনি উপাদানগুলোর অবস্থান কাস্টমাইজ করতে পারেন এবং position ফাংশনের মাধ্যমে একে আরও নির্দিষ্টভাবে নিয়ন্ত্রণ করতে পারেন।
এই দুটি উইজেটের ইভেন্ট এবং কাস্টমাইজেশন আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও স্মার্ট এবং ইন্টারঅ্যাকটিভ করতে সাহায্য করে।
Read more
