script.aculo.us এবং Controls.Tooltip সম্পর্কে
script.aculo.us হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা Ajax এবং DOM ইফেক্টগুলির জন্য উন্নত এবং ব্যবহারকারী বন্ধুত্বপূর্ণ টুলস সরবরাহ করে। এটি Prototype.js লাইব্রেরির উপরে ভিত্তি করে তৈরি এবং ওয়েব ডেভেলপারদের জন্য বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ ইউআই উপাদান তৈরি করতে সাহায্য করে। এর মধ্যে tooltip তৈরির ফিচারটি অন্যতম।
Controls.Tooltip হল script.aculo.us লাইব্রেরির একটি অংশ যা আপনাকে পেজে একটি ছোট টুলটিপ উইন্ডো বা তথ্য বক্স তৈরি করতে সাহায্য করে। টুলটিপগুলি সাধারণত ব্যবহারকারীর কাছে অতিরিক্ত তথ্য প্রদানের জন্য ব্যবহৃত হয় যখন তারা কোন এলিমেন্টের উপর মাউস হভার করেন বা একটি নির্দিষ্ট একশন সম্পাদন করেন।
Controls.Tooltip ব্যবহার করে Tooltip তৈরি করা
Tooltip সাধারণত পেজের কোন এলিমেন্টের উপর মাউস হোভার করা হলে একটি ছোট বক্সের মতো প্রদর্শিত হয়। এটি ব্যবহারকারীকে অতিরিক্ত তথ্য প্রদানের জন্য একটি সরল এবং কার্যকরী উপায়।
script.aculo.us এর Controls.Tooltip ব্যবহার করার জন্য, আপনাকে Prototype.js এবং script.aculo.us ইনস্টল করা থাকতে হবে। নিচে এই লাইব্রেরি দুটি ইনস্টল ও ব্যবহার করার একটি উদাহরণ দেওয়া হলো।
1. Dependencies ইনস্টল করা
প্রথমে, আপনি Prototype.js এবং script.aculo.us লাইব্রেরি দুটি আপনার প্রোজেক্টে অন্তর্ভুক্ত করতে হবে। এটি করতে, আপনাকে তাদের সিডিএন লিঙ্ক ব্যবহার করতে হবে।
<!-- Include Prototype.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<!-- Include script.aculo.us -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/script.aculo.us/1.9.0/scriptaculous.js"></script>
2. HTML তৈরি করা
এখন একটি সাধারণ HTML উপাদান তৈরি করা হবে যেখানে টুলটিপ প্রদর্শিত হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/script.aculo.us/1.9.0/scriptaculous.js"></script>
<style>
#info {
display: inline-block;
padding: 10px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="info">Hover over me!</div>
<script>
// Tooltip Initialization
document.observe("dom:loaded", function() {
new Control.Tooltip("info", {
content: "This is a tooltip with more information!",
width: 200,
opacity: 0.8
});
});
</script>
</body>
</html>
3. ব্যাখ্যা
- HTML এলিমেন্ট:
div#infoহল সেই এলিমেন্ট যা আপনি টুলটিপ প্রদর্শন করতে চান। এখানে,Hover over me!টেক্সট থাকবে, যেটি হোভার করলে টুলটিপটি দেখাবে। - Prototype.js এবং script.aculo.us: এই দুটি লাইব্রেরি সিডিএন লিঙ্কে অন্তর্ভুক্ত করা হয়েছে। Prototype.js বেসিক JavaScript কাজ করার জন্য এবং script.aculo.us টুলটিপ তৈরি করার জন্য প্রয়োজনীয় ফাংশন সরবরাহ করে।
- Control.Tooltip: এই ফাংশনটি
div#infoএলিমেন্টের উপর tooltip তৈরি করবে। এখানে টুলটিপের কনটেন্ট, প্রস্থ এবং অপাসিটি সেট করা হয়েছে।
4. বিকল্প কনফিগারেশন
Control.Tooltip ডেকোরেটরের মাধ্যমে আপনি আরও কিছু কনফিগারেশন দিতে পারেন যেমন:
- content: টুলটিপে প্রদর্শিত হতে যাওয়া তথ্য।
- width: টুলটিপের প্রস্থ নির্ধারণ করা।
- opacity: টুলটিপের স্বচ্ছতা নির্ধারণ করা।
- delay: হোভার করার পর কত সময় পর টুলটিপটি প্রদর্শিত হবে তা নির্ধারণ করা।
উদাহরণ:
new Control.Tooltip("info", {
content: "This is a custom tooltip with a longer delay!",
width: 250,
opacity: 0.9,
delay: 0.5 // Half second delay before tooltip shows up
});
5. টুলটিপের অবস্থান নিয়ন্ত্রণ
আপনি tooltip এর অবস্থানও কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি টুলটিপটি এলিমেন্টের কোথায় দেখাতে চান তা নির্ধারণ করতে পারবেন (উপর, নিচ, বাম, ডান)।
new Control.Tooltip("info", {
content: "Tooltip with position control",
width: 200,
opacity: 0.8,
position: "top" // This will show the tooltip above the element
});
এখানে, position: "top" দ্বারা টুলটিপটি এলিমেন্টের উপরে প্রদর্শিত হবে।
সারাংশ
script.aculo.us এর Controls.Tooltip একটি সহজ এবং কার্যকরী উপায় tooltip তৈরি করার জন্য। এটি ওয়েব পেজে ইনফরমেশন প্রদানের জন্য ব্যবহারকারীকে সহায়তা করে। আপনি এটি কাস্টমাইজ করতে পারেন টুলটিপের কনটেন্ট, প্রস্থ, অপাসিটি, ডিলে, এবং অবস্থান নির্ধারণ করে। এই লাইব্রেরি ব্যবহার করে আপনি সহজে একটি ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে পারেন।
Read more
