জেকুয়েরি toggle() মেথড
সংজ্ঞা এবং ব্যবহার
জেকুয়েরি ভার্সন ১.৮ এ toggle() মেথডের অনুমোদন বাতিল করা হয়, ভার্সন ১.৯ এ একে সম্পূর্ণ বাদ দেওয়া হয়।
নির্বাচিত এলিমেন্টের জন্য toggle() মেথড দুই বা ততোধিক ফাংশন যোগ করে যারা ক্লিক ইভেন্টে টোগল করে।
যখন একটি এলিমেন্টে ক্লিক করা হয়, প্রথম ফাংশনটি ট্রিগার হয়, আবার ঐ এলিমেন্টে ক্লিক করা হলে দ্বিতীয় ফাংশনটি ট্রিগার হয় এবং এই ভাবে পরবর্তীতেও হতে থাকবে।
নোট: toggle() মেথড নামে জেকুয়েরি ইফেক্টেও একটি মেথড রয়েছে। প্যারামিটারের উপর নির্ভর করে বুঝা যায় কোনটিকে কল করা হয়েছে।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).toggle(function)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে toggle() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| function | আবশ্যক। নির্বাচিত এলিমেন্টে প্রতিবার ক্লিক করা হলে যে ফাংশনগুলো রান করবে সেটিনে নির্দেশ করছে। |
toggle() মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে যখন <p> এলিমেন্টের উপর ক্লিক করবে, তখন কালার টোগল হবে:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
</script>
<script>
$(document).ready(function(){
$("p").toggle(
function(){$("p").css({"color": "aqua"});},
function(){$("p").css({"color": "green"});},
function(){$("p").css({"color": "teal"});
});
});
</script>
</head>
<body>
<p style="font-size:40px">আমাকে ক্লিক করুন </p>
<div> <b>নোট: </b> toggle() মেথডটি জেকুয়েরি ভার্সন ১.৮ এ অনুমোদিত ছিল এবং জেকুয়েরি ভার্সন ১.৯ এ রিমুভ করা হইেছে। তাই আমরা আগের জেকুয়েরির আগের ভার্সনতি ব্যবহার করেছি এই উদাহরণটির জন্য। </div>
</body>
</html>
ফলাফল
একাধিক ফাংশনের মধ্যে টোগল
toggle() মেথড ব্যবহার করে কিভাবে একাধিক ফাংশনের মধ্যে টোগল করা যায় তা নিচের উদাহরনে দেখানো হলো।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("li").toggle(
function(){$(this).css({"color": "aqua"});},
function(){$(this).css({"color": "green"});},
function(){$(this).css({"color": "blue"});},
function(){$(this).css({"color": "red"});
});
});
</script>
</head>
<body>
<p>নিচের প্রত্যেক লিস্ট আইটেমে কয়েকবার করে ক্লিক করুন: </p>
<ul>
<li>জিহাদুল ইসলাম </li>
<li>সালেহ আহমদ </li>
</ul>
<div> <b>নোট: </b> টোগল মেথডটি জেকুয়েরির 1.8 ভার্সনে বাদ দেওয়া হয়েছে, এবং 1.9 ভার্সনে রিমুভ করা হয়েছে। এখানে আমরা জেকুয়েরির আগের ভার্সন (1.8) ব্যবহার করেছি। </div>
</body>
</html>
ফলাফল