জেকুয়েরি toggle() মেথড
সংজ্ঞা এবং ব্যবহার
toggle() মেথডটি নির্দিষ্ট এলিমেন্টের জন্য hide() এবং
show() মেথডের মধ্যে টোগল করে।
এই মেথডটি নির্দিষ্ট এলিমেন্টের ভিজিবিলিটি পরীক্ষা করে। যখন একটি এলিমেন্ট হিডেন থাকে তখন show() কাজ করে এবং যখন এলিমেন্টটি দৃশ্যমান থাকে, তখন hide() কাজ করে। এইভাবে একটি টোগল ইফেক্ট তৈরি করে।
হাইড হওয়া এলিমেন্ট প্রদর্শিত হবে না (এছাড়াও এটি পেজের লে-আউটে কোনো প্রভাব ফেলবে না)।
পরামর্শঃ এই মেথডটি কাস্টম ফাংশনের মধ্যেও ব্যবহার করা যায়।
সিনট্যাক্স
$(selector).toggle(speed,easing,callback)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে toggle() মেথডের প্যারামিটার এবং তাদের ভ্যালুগুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
speed |
ঐচ্ছিক। হাইড/সো ইফেক্টের স্পিড নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড।সম্ভাব্য ভ্যালুগুলো হলোঃ
|
easing |
ঐচ্ছিক। বিভিন্ন জায়গা থেকে কোন এলিমেন্টকে এনিমেশন করার স্পিডকে নির্ধারন করে। ডিফল্ট ভ্যালু হচ্ছে "swing"সম্ভাব্য ভ্যালুগুলো হলো:
|
callback |
ঐচ্ছিক। toggle() মেথডটি সম্পুর্ন হলে এই ফাংশনটি কাজ করবে।
কলব্যাক ফাংশন সম্পর্কে আরো জানতে আমাদের জেকুয়েরি কলব্যাক পেজে ভিজিট করুন। |
toggle() মেথড সংক্রান্ত উদাহরণ
এলিমেন্টেকে হাইড এবং সো এর মধ্যে টোগলঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>hide() এবং show() এর মধে টোগল</button>
</body>
</html>
ফলাফল
toggle() মেথডে স্পিড প্যারামিটারের ব্যবহার
হাইড/শো এর ইফেক্টে স্পিড যুক্ত করার জন্য কিভাবে স্পিড প্যারামিটারের ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(3000);
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>hide() এবং show() এর মধে টোগল</button>
</body>
</html>
ফলাফল
toggle() মেথডে কলব্যাক প্যারামিটারের ব্যবহার
হাইড/শো এর ইফেক্টে সম্পন্ন হওয়ার পর কিভাবে কলব্যাক প্যারামিটার ব্যবহার করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(3000, function(){
alert("toggle() মেথড সম্পন্ন হয়েছে!");
});
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>hide() এবং show() এর মধে টোগল</button>
</body>
</html>
ফলাফল