jQueryUI Resizable উইজেট ব্যবহার করে আপনি আপনার ওয়েব পেজের এলিমেন্টগুলোকে রিসাইজ করার সুবিধা দিতে পারেন। এর মাধ্যমে ব্যবহারকারীরা একটি নির্দিষ্ট এলিমেন্টের আকার পরিবর্তন করতে পারেন, যেমন একটি ডিভ, ইমেজ বা অন্য কোন কনটেইনার। এটি ইউজার ইন্টারফেসে ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য উপাদান যুক্ত করতে সাহায্য করে।
jQueryUI Resizable উইজেট ব্যবহার করে এলিমেন্ট রিসাইজ করা
১. প্রাথমিক সেটআপ
প্রথমে, আপনাকে jQuery এবং jQueryUI এর CSS এবং JavaScript ফাইলগুলো আপনার HTML পৃষ্ঠায় লোড করতে হবে। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQueryUI Resizable উদাহরণ</title>
<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQueryUI CSS লোড -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQueryUI JS লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<!-- রিসাইজেবল এলিমেন্ট -->
<div id="resizable" style="width: 200px; height: 150px; background-color: lightblue;">
<p>এটি একটি রিসাইজেবল এলিমেন্ট।</p>
</div>
<script>
$(document).ready(function() {
// এলিমেন্ট রিসাইজেবল করা
$("#resizable").resizable(); // রিসাইজ ফিচার চালু করা
});
</script>
</body>
</html>
২. কোড ব্যাখ্যা
- HTML এলিমেন্ট:
#resizableআইডি সহ একটি ডিভ তৈরি করা হয়েছে, যার মধ্যে কিছু কনটেন্ট রয়েছে।- এই ডিভটি রিসাইজেবল হবে, অর্থাৎ ব্যবহারকারী তার আকার পরিবর্তন করতে পারবেন।
- jQueryUI Resizable উইজেট ইনিশিয়েট করা:
$("#resizable").resizable();কোডটি ব্যবহার করে আমরা ডিভটি রিসাইজেবল করেছি।- এটি এলিমেন্টটির সীমানায় হ্যান্ডলগুলি যোগ করবে, যেগুলি ব্যবহারকারীরা টেনে এনে এলিমেন্টটির আকার পরিবর্তন করতে পারবেন।
৩. কাস্টমাইজেশন
আপনি jQueryUI Resizable উইজেটটি কাস্টমাইজ করতে পারেন, যেমন ন্যূনতম এবং সর্বোচ্চ আকার সেট করা, এলিমেন্টটির প্রোপোরশনাল সাইজিং, এবং অন্যান্য ফিচারস।
উদাহরণ: ন্যূনতম এবং সর্বোচ্চ আকার সীমাবদ্ধ করা
$(document).ready(function() {
$("#resizable").resizable({
minWidth: 100, // ন্যূনতম প্রস্থ
minHeight: 100, // ন্যূনতম উচ্চতা
maxWidth: 500, // সর্বোচ্চ প্রস্থ
maxHeight: 400 // সর্বোচ্চ উচ্চতা
});
});
এই কাস্টমাইজেশন দ্বারা, আপনি ডিভের আকার একটি নির্দিষ্ট রেঞ্জের মধ্যে সীমাবদ্ধ করতে পারবেন।
উদাহরণ: প্রোপোরশনাল রিসাইজিং সক্ষম করা
$(document).ready(function() {
$("#resizable").resizable({
aspectRatio: true // আকার প্রোপোরশনাল হবে
});
});
এটি ব্যবহারকারীদেরকে একটি নির্দিষ্ট অনুপাতে এলিমেন্টের আকার পরিবর্তন করতে সহায়তা করবে, যেমন উচ্চতা এবং প্রস্থের অনুপাত বজায় রাখবে।
৪. রিসাইজিংয়ের পরে ইভেন্ট ট্রিগার করা
আপনি চাইলে রিসাইজ করার পরে কিছু নির্দিষ্ট কাজ করতে পারেন, যেমন স্লাইডার ভ্যালু আপডেট করা বা কোনো কাস্টম ফাংশন ট্রিগার করা। এর জন্য resize ইভেন্ট ব্যবহার করা যেতে পারে।
উদাহরণ: রিসাইজ হওয়ার পরে মান আপডেট করা
$(document).ready(function() {
$("#resizable").resizable({
resize: function(event, ui) {
console.log("Width: " + ui.size.width + ", Height: " + ui.size.height);
}
});
});
এই কোডটি ব্যবহারকারীর রিসাইজিংয়ের সময় এলিমেন্টের নতুন প্রস্থ এবং উচ্চতা কনসোল-এ প্রদর্শন করবে।
৫. অন্যান্য কাস্টমাইজেশন
- Grid alignment: এলিমেন্টটির রিসাইজিং একটি নির্দিষ্ট গ্রিডে অ্যালাইন করার জন্য আপনি
gridঅপশন ব্যবহার করতে পারেন।
$(document).ready(function() {
$("#resizable").resizable({
grid: [20, 20] // রিসাইজিং 20px প্রতি অ্যালাইন হবে
});
});
এটি এলিমেন্টের আকার ২০ পিক্সেল পর পর পরিবর্তন করবে।
উপসংহার
jQueryUI Resizable উইজেট ব্যবহার করে আপনি সহজেই আপনার ওয়েব পেজের এলিমেন্টগুলিকে রিসাইজযোগ্য করতে পারেন, যা ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ উপাদান হিসেবে কাজ করে। বিভিন্ন কাস্টমাইজেশন অপশনের মাধ্যমে আপনি রিসাইজিংয়ের সীমা, প্রোপোরশনাল রিসাইজিং, এবং অন্যান্য ফিচার যুক্ত করতে পারেন। এটি ওয়েবসাইটে আরো ইউজার-বান্ধব এবং ফাংশনাল ডিজাইন তৈরি করতে সাহায্য করে।
Read more
