jQueryUI ব্যবহার করতে হলে আপনাকে দুটি গুরুত্বপূর্ণ উপাদান যুক্ত করতে হবে: CSS এবং JavaScript। এগুলো আপনার ওয়েব পেজে সঠিকভাবে লোড করা প্রয়োজন, যাতে jQueryUI-এর সমস্ত উইজেট এবং ইন্টারঅ্যাকটিভ ফিচার ঠিকভাবে কাজ করে।
jQueryUI এর জন্য CSS এবং JavaScript যুক্ত করার পদ্ধতি
১. jQuery এবং jQueryUI লাইব্রেরি লোড করা
প্রথমে, আপনাকে jQuery এবং jQueryUI এর CSS এবং JavaScript ফাইলগুলিকে আপনার HTML ফাইলে যুক্ত করতে হবে। আপনি এগুলো সরাসরি CDN (Content Delivery Network) থেকে লোড করতে পারেন।
HTML এর মধ্যে jQuery এবং jQueryUI লোড করতে নিচের কোডটি ব্যবহার করুন:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQueryUI উদাহরণ</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 JavaScript লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<!-- jQueryUI উইজেটের উদাহরণ -->
<div id="dialog" title="উদাহরণ ডায়ালগ">
<p>এটি একটি jQueryUI ডায়ালগ বক্স।</p>
</div>
<script>
$(document).ready(function(){
// jQueryUI ডায়ালগ উইজেট
$("#dialog").dialog();
});
</script>
</body>
</html>
২. কোড ব্যাখ্যা
- jQuery লোড:
https://code.jquery.com/jquery-3.7.1.min.jsথেকে jQuery লাইব্রেরিটি লোড করা হয়েছে। এটি jQueryUI এর কার্যকারিতা চালানোর জন্য প্রয়োজনীয়।
- jQueryUI CSS লোড:
https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.cssলিঙ্কটি jQueryUI-এর স্টাইলশীট লোড করে, যাতে উইজেটগুলোর আউটপুট সঠিকভাবে প্রদর্শিত হয়।
- jQueryUI JavaScript লোড:
https://code.jquery.com/ui/1.13.2/jquery-ui.min.jsথেকে jQueryUI এর জাভাস্ক্রিপ্ট ফাইল লোড করা হয়, যা jQueryUI এর উইজেট এবং ইন্টারঅ্যাকটিভ ফিচার কার্যকর করে।
৩. কাস্টমাইজড থিম ব্যবহার
jQueryUI বিভিন্ন প্রিসেট থিম সরবরাহ করে, কিন্তু আপনি চাইলে থিম কাস্টমাইজও করতে পারেন। jQueryUI Theme Roller টুলটি ব্যবহার করে আপনি আপনার পছন্দমতো থিম তৈরি করতে পারেন এবং তা ডাউনলোড করে আপনার প্রকল্পে যুক্ত করতে পারেন।
থিম কাস্টমাইজ করার জন্য আপনি jQueryUI Theme Roller ব্যবহার করতে পারেন।
উপসংহার
jQueryUI এর জন্য সঠিকভাবে CSS এবং JavaScript যুক্ত করতে হলে আপনাকে প্রথমে jQuery এবং jQueryUI-এর প্রয়োজনীয় ফাইলগুলো আপনার HTML পেজে লোড করতে হবে। CDN ব্যবহার করে আপনি খুব সহজে jQuery এবং jQueryUI ফাইলগুলো যুক্ত করতে পারবেন, যা আপনার ওয়েবসাইটে jQueryUI-এর সকল উইজেট এবং ফিচার ঠিকভাবে কাজ করতে সহায়তা করবে।
Read more
