jQueryUI দিয়ে আপনি জটিল ইন্টারঅ্যাকশন তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে। একাধিক jQueryUI উইজেট এবং ইভেন্টের সমন্বয় ব্যবহার করে আপনি বিভিন্ন ধরনের ইন্টারঅ্যাকশন তৈরি করতে পারেন। উদাহরণস্বরূপ, ড্র্যাগ-এন্ড-ড্রপ (drag-and-drop), স্লাইডার, ডায়ালগ, টুলটিপ, অ্যানিমেশন ইত্যাদির সমন্বয়ে জটিল ইন্টারঅ্যাকশন তৈরি করা যায়।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে jQueryUI-এর বিভিন্ন ইভেন্ট এবং উইজেটকে একত্রিত করে জটিল ইন্টারঅ্যাকশন তৈরি করা যায়।
jQueryUI উইজেট এবং ইভেন্ট সমন্বয়ের প্রয়োজনীয়তা
jQueryUI-এর বিভিন্ন উইজেট যেমন Draggable, Droppable, Resizable, Sortable, Accordion, Dialog, Tabs, ইত্যাদি, তাদের নিজস্ব ইভেন্ট এবং কাস্টম কার্যকারিতা প্রদান করে। এই উইজেটগুলোকে একত্রিত করে আপনি এমন ইন্টারঅ্যাকশন তৈরি করতে পারেন যা একাধিক ইভেন্ট এবং কার্যকারিতা সম্পাদন করতে সহায়ক।
১. Draggable এবং Droppable উইজেটের সমন্বয়
Draggable এবং Droppable উইজেট একত্রে ব্যবহার করে আপনি একটি ড্র্যাগ-এন্ড-ড্রপ ইন্টারঅ্যাকশন তৈরি করতে পারেন, যেখানে একটি উপাদান ড্র্যাগ করা যাবে এবং অন্য একটি উপাদানে ড্রপ করা যাবে।
উদাহরণ: ড্র্যাগ-এন্ড-ড্রপ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable and Droppable 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>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
#droppable {
width: 200px;
height: 200px;
background-color: #f39c12;
color: white;
text-align: center;
line-height: 200px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="draggable">ড্র্যাগ করুন</div>
<div id="droppable">এখানে ড্রপ করুন</div>
<script>
$(document).ready(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).text("ড্রপ করা হয়েছে!");
$(this).css("background-color", "#2ecc71"); // ড্রপ করার পর রঙ পরিবর্তন
}
});
});
</script>
</body>
</html>
এখানে, draggable() ব্যবহার করে একটি এলিমেন্টকে ড্র্যাগযোগ্য করা হয়েছে এবং droppable() ব্যবহার করে নির্দিষ্ট এলিমেন্টে ড্রপ করার পর কাস্টম ইভেন্ট পরিচালিত হচ্ছে।
২. Resizable এবং Sortable উইজেটের সমন্বয়
Resizable এবং Sortable উইজেট ব্যবহার করে আপনি একটি এলিমেন্টের আকার পরিবর্তন এবং পুনর্বিন্যাস করতে পারবেন। এটি জটিল লেআউট এবং উপাদানগুলো পুনর্বিন্যাস করার জন্য কার্যকর।
উদাহরণ: রিসাইজ এবং সোর্ট
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable and Sortable 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>
<style>
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li {
margin: 5px;
padding: 10px;
background-color: #3498db;
color: white;
cursor: move;
}
.resizable {
width: 150px;
height: 150px;
background-color: #9b59b6;
color: white;
text-align: center;
line-height: 150px;
margin-top: 20px;
}
</style>
</head>
<body>
<ul id="sortable">
<li>আইটেম ১</li>
<li>আইটেম ২</li>
<li>আইটেম ৩</li>
<li>আইটেম ৪</li>
</ul>
<div class="resizable">রিসাইজ করুন</div>
<script>
$(document).ready(function() {
// Sortable functionality
$("#sortable").sortable();
// Resizable functionality
$(".resizable").resizable();
});
</script>
</body>
</html>
এখানে, sortable() মেথড ব্যবহার করে একটি তালিকার আইটেমগুলো পুনর্বিন্যাস করা হয়েছে এবং resizable() মেথড ব্যবহার করে একটি এলিমেন্টের আকার পরিবর্তন করা হয়েছে।
৩. Dialog এবং Button ইভেন্টের সমন্বয়
Dialog উইজেট ব্যবহার করে আপনি একটি পপ-আপ উইন্ডো তৈরি করতে পারেন, এবং Button উইজেট ব্যবহার করে আপনি ব্যবহারকারীর ইন্টারঅ্যাকশন ট্র্যাক করতে পারেন।
উদাহরণ: Dialog এবং Button
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog and Button 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>
<style>
#dialog {
display: none;
}
</style>
</head>
<body>
<button id="openDialog">ডায়ালগ খুলুন</button>
<div id="dialog" title="ডায়ালগ বক্স">
<p>এটি একটি ডায়ালগ বক্সের উদাহরণ।</p>
</div>
<script>
$(document).ready(function() {
// Dialog functionality
$("#dialog").dialog({
autoOpen: false // ডায়ালগটি প্রথমে বন্ধ থাকবে
});
// Button functionality
$("#openDialog").click(function() {
$("#dialog").dialog("open"); // ডায়ালগ ওপেন হবে
});
});
</script>
</body>
</html>
এখানে, dialog() ব্যবহার করে একটি পপ-আপ ডায়ালগ তৈরি করা হয়েছে এবং button() ব্যবহার করে ডায়ালগটি ওপেন করার জন্য একটি বাটন তৈরি করা হয়েছে।
৪. Multiple Interactions and Event Coordination
আপনি একাধিক jQueryUI উইজেট এবং ইভেন্টের সমন্বয় ব্যবহার করে আরও জটিল ইন্টারঅ্যাকশন তৈরি করতে পারেন। যেমন, একটি এলিমেন্ট ড্র্যাগ করার সময় অন্য একটি এলিমেন্টের অবস্থান পরিবর্তন করতে পারেন, অথবা একটি ডায়ালগ খোলার পর ব্যবহারকারী একটি স্লাইডার নিয়ন্ত্রণ করতে পারে।
উদাহরণ: Dragging and Sliding Together
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Slide 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>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: #e74c3c;
color: white;
text-align: center;
line-height: 100px;
cursor: move;
}
#slider {
width: 300px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="draggable">ড্র্যাগ করুন</div>
<div id="slider"></div>
<script>
$(document).ready(function() {
// Draggable
$("#draggable").draggable();
// Slider
$("#slider").slider({
slide: function(event, ui) {
console.log("Slider value: " + ui.value);
}
});
});
</script>
</body>
</html>
এখানে, একটি এলিমেন্টকে draggable() মেথড দিয়ে ড্র্যাগযোগ্য করা হয়েছে এবং একটি স্লাইডারের মান পরিবর্তন করার সময় কাস্টম ইভেন্ট তৈরি করা হয়েছে।
উপসংহার
jQueryUI এর বিভিন্ন উইজেট এবং ইভেন্টের সমন্বয়ে আপনি জটিল এবং ইন্টারঅ্যাকটিভ ইন্টারঅ্যাকশন তৈরি করতে পারেন। এই উইজেটগুলির মাধ্যমে আপনি ব্যবহারকারীদের জন্য আকর্ষণীয় এবং কার্যকরী অভিজ্ঞতা তৈরি করতে পারেন। Draggable, Droppable, Resizable, Sortable, Dialog, এবং Button এর মতো উইজেটের সমন্বয়ে আপনি একাধিক ইভেন্ট এবং কার্যকলাপ পরিচালনা করতে পারেন, যা আপনার ওয়েবসাইটের ইন্টারফেসে সমৃদ্ধি এবং ইন্টারঅ্যাকটিভতা যোগ করে।
Read more
