MooTools ব্যবহার করে আপনি HTML এলিমেন্টের সাথে Custom Data (অর্থাৎ কাস্টম অ্যাট্রিবিউট বা ভ্যালু) যোগ করতে পারেন। এটি খুবই সুবিধাজনক যখন আপনি নির্দিষ্ট HTML এলিমেন্টে ডেটা সংরক্ষণ করতে চান, যা JavaScript দ্বারা সহজে অ্যাক্সেস করা যায়।
MooTools-এ Element ক্লাসের মাধ্যমে আপনি HTML এলিমেন্টে কাস্টম ডেটা যোগ করতে পারবেন, এবং সেই ডেটা ব্যবহার করতে পারবেন যেকোনো ইন্টারঅ্যাকশন বা স্ক্রিপ্টের জন্য।
1. Custom Data যোগ করা set() এবং get() মেথড ব্যবহার করে
MooTools-এ set() এবং get() মেথড ব্যবহার করে আপনি কাস্টম ডেটা অ্যাট্রিবিউট সংযুক্ত করতে এবং অ্যাক্সেস করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Custom Data Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// এলিমেন্ট নির্বাচন করা
var element = document.id('myElement');
// কাস্টম ডেটা সেট করা
element.set('data-name', 'John Doe');
element.set('data-age', 30);
// কাস্টম ডেটা গেট করা
var name = element.get('data-name');
var age = element.get('data-age');
// কাস্টম ডেটা দেখানো
alert('Name: ' + name + ', Age: ' + age);
});
</script>
</head>
<body>
<div id="myElement">This is a div element</div>
</body>
</html>
এখানে:
element.set('data-name', 'John Doe')এবংelement.set('data-age', 30)এর মাধ্যমে কাস্টম ডেটা (অর্থাৎdata-nameএবংdata-age) এই এলিমেন্টের সাথে সংযুক্ত করা হয়েছে।element.get('data-name')এবংelement.get('data-age')এর মাধ্যমে সেই ডেটা উদ্ধার করা হয়েছে।
2. Custom Data যোগ করা HTML5 Data Attributes ব্যবহার করে
HTML5 এর data attributes ব্যবহার করে আপনি HTML এলিমেন্টে কাস্টম ডেটা যোগ করতে পারেন, যেগুলি MooTools-এর মাধ্যমে সহজেই অ্যাক্সেস করা যায়। HTML5-এর data-* অ্যাট্রিবিউট আপনাকে এলিমেন্টের সাথে কাস্টম ডেটা সংযুক্ত করার সুযোগ দেয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>HTML5 Data Attributes Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// এলিমেন্ট নির্বাচন করা
var element = document.id('myElement');
// HTML5 data attributes এর মাধ্যমে কাস্টম ডেটা অ্যাক্সেস করা
var name = element.get('data-name');
var age = element.get('data-age');
// কাস্টম ডেটা দেখানো
alert('Name: ' + name + ', Age: ' + age);
});
</script>
</head>
<body>
<div id="myElement" data-name="John Doe" data-age="30">
This is a div element with custom data attributes
</div>
</body>
</html>
এখানে:
data-name="John Doe"এবংdata-age="30"HTML5 data attributes এর মাধ্যমে কাস্টম ডেটা এই এলিমেন্টে সংযুক্ত করা হয়েছে।- MooTools-এ
element.get('data-name')এবংelement.get('data-age')এর মাধ্যমে সেই ডেটা অ্যাক্সেস করা হয়েছে।
3. Custom Data Set করার জন্য Object ব্যবহার করা
আপনি set() এবং get() মেথডের মাধ্যমে কাস্টম ডেটা ভ্যালু হিসেবে অবজেক্টও ব্যবহার করতে পারেন। এতে একাধিক কাস্টম ডেটা একত্রে রাখা যায়।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Custom Data Object Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// এলিমেন্ট নির্বাচন করা
var element = document.id('myElement');
// কাস্টম ডেটা অবজেক্ট তৈরি করা
var userData = {
name: 'John Doe',
age: 30,
occupation: 'Developer'
};
// অবজেক্ট ডেটা সেট করা
element.set('data-user', userData);
// কাস্টম ডেটা গেট করা
var retrievedData = element.get('data-user');
// কাস্টম ডেটা দেখানো
alert('User Data: ' + JSON.stringify(retrievedData));
});
</script>
</head>
<body>
<div id="myElement">This is a div element with custom data object</div>
</body>
</html>
এখানে:
set('data-user', userData)এর মাধ্যমে একটি অবজেক্টuserDataকাস্টম ডেটা হিসেবে যোগ করা হয়েছে।get('data-user')এর মাধ্যমে সেই অবজেক্টটি অ্যাক্সেস করা হয়েছে এবংJSON.stringify()ব্যবহার করে তা কনসোল বা এলার্টের মাধ্যমে দেখানো হয়েছে।
4. Custom Data এবং Event Listener এর সাথে একত্রে কাজ করা
আপনি কাস্টম ডেটা ব্যবহার করে ইভেন্ট হ্যান্ডলিংও করতে পারেন। যেমন, আপনি যখন একটি বাটন ক্লিক করবেন, তখন কাস্টম ডেটা ব্যবহার করে কোনো ডিনামিক কাজ করতে পারবেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Custom Data with Event Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// বাটন এলিমেন্ট নির্বাচন করা
var button = document.id('myButton');
// বাটনে কাস্টম ডেটা যোগ করা
button.set('data-user-id', 12345);
// ক্লিক ইভেন্ট হ্যান্ডলার
button.addEvent('click', function() {
var userId = button.get('data-user-id');
alert('Button clicked! User ID: ' + userId);
});
});
</script>
</head>
<body>
<button id="myButton">Click Me</button>
</body>
</html>
এখানে:
set('data-user-id', 12345)এর মাধ্যমে বাটনে কাস্টম ডেটা (যেমনdata-user-id) যোগ করা হয়েছে।addEvent('click')এর মাধ্যমে বাটনে ক্লিক করার সময় কাস্টম ডেটাdata-user-idঅ্যাক্সেস করা হচ্ছে এবং তা এলার্টের মাধ্যমে দেখানো হচ্ছে।
সারাংশ
MooTools-এ Custom Data যোগ করা খুবই সহজ এবং এটি আপনাকে HTML এলিমেন্টের সাথে ডাইনামিক ডেটা সংরক্ষণ করতে সাহায্য করে। আপনি set() এবং get() মেথড ব্যবহার করে কাস্টম ডেটা অ্যাট্রিবিউট যোগ করতে পারেন, যা পরবর্তীতে JavaScript দ্বারা সহজে অ্যাক্সেস করা যায়। HTML5 data-* attributes এবং object ফর্ম্যাটেও কাস্টম ডেটা সংরক্ষণ করা যেতে পারে। এই সুবিধাটি বিশেষভাবে ইন্টারঅ্যাকটিভ এবং ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে কাজে আসে।
Read more
