জেকোয়েরি একাধিক ইভেন্টে একই হ্যান্ডলার ব্যবহার (jQuery bind method)
ধরুন
আপনি চান যে একটা ফাংশন এক্সিকিউট হোক যখন কেউ আপনার সাইটের Go বাটনে
ক্লিক করবে অথবা এই বাটনের উপর মাউস নিয়ে গেলেও এই একই ফাংশন এক্সিকিউট
হবে।অর্থ্যাৎ দুটি ইভেন্টে একই ফাংশন চলবে।bind মেথড দিয়ে এটা করা
যায়।একসাথে যতগুলি ইচ্ছা ইভেন্ট স্পেস দিয়ে লিখবেন এরপর যেকোন ফাংশন
লিখবেন।যেমন
index.html ফাইল
css ফাইল
script.js ফাইল
আউটপুট:
ব্যাখ্যা:myheader ক্লাস সম্বলিত হেডারে এখন মাউস হোভার,ক্লিক বা মাউস সরিয়ে নিয়ে আসলে changeColor নামে একটি টগল ক্লাস যুক্ত হবে।আপনি চাইলে আরও ইভেন্ট এভাবে স্পেস দিয়ে সবগুলির জন্য এই ফাংশনটি চালাতে পারেন।
*এই মেথডের বড় সুবিধা হচ্ছে কোড কম লিখতে হয়।যদি উপরের কোডটুকুই নিচের মত লিখতেন তাহলে এখানে তিনটি ইভেন্টের জন্য তিনবার একই কোড লিখতে হত।
*toggleClass()
মেথড দিয়ে এভাবে এমন একটি ক্লাস যোগ করা যায় (সিলেক্টেড এলিমেন্টে) যেটা
প্রথমবার ক্লিক করলে ক্লাসটি (এখানে changeColor) যোগ হবে এবং পরেরবার
ক্লিক করলে মুছে যাবে।এরুপ অন্যান্য ইভেন্টের ক্ষেত্রেও।
unbind() মেথড:
bind মেথড দিয়ে যে হ্যান্ডলার টি যুক্ত হয়, unbind মেথড দিয়ে সেটা সরানো যায়।যেমন
index.html
css ফাইল
script.js ফাইল
প্রয়োগ দেখুন
buttonA তে ক্লিক করলে myPara ক্লাস সম্বলিত প্যারাগ্রাফে ৩টি ইভেন্ট
bind করেছি এবং এই ৩টি ইভেন্টের যেকোনটি ঘটলে handlerFn নামে ফাংশনটি
এক্সিকিউট হবে।আর buttonB তে ক্লিক করলে হ্যান্ডলার ফাংশনটি unbind হবে
অর্থ্যাৎ এখন আর প্যারাগ্রাফের উপর ৩টি ইভেন্টের যেটিই ঘটুকনা কেন,কোন কাজ
হবেনা।আপনি ইচ্ছে করলে ৩টি ইভেন্ট থেকে শুধু ২/১ টি unbind করতে
পারেন।যেটা যেটা unbind করবেন তাদের নাম স্পেস দিয়ে লিখলেই হবে।
index.html ফাইল
01.<!doctype html>02. 03.<head>04. 05.<title>Webcoachbd Jquery tutorials!</title>06.<link rel="stylesheet" href="/style.css" type="text/css"/>07. 08.<script src="/jquery_latest.js" type="text/javascript"></script>09.<script src="/script.js" type="text/javascript"></script>10.</head>11.<body>12.<h2 class="myheader">JQUERY tutorials</h2>13.<p>Webcoachbd is nice tutorial site</p>14.</body>15.</html>1..changeColor{2.background:#ddd;3.color:#000;4.font-weight:bold;5.}1.$(document).ready(function(){2.$('.myheader').bind('click mouseenter mouseleave',function(){3.$(this).toggleClass('changeColor');4.});5.});JQUERY tutorials
Webcoachbd is nice tutorial siteব্যাখ্যা:myheader ক্লাস সম্বলিত হেডারে এখন মাউস হোভার,ক্লিক বা মাউস সরিয়ে নিয়ে আসলে changeColor নামে একটি টগল ক্লাস যুক্ত হবে।আপনি চাইলে আরও ইভেন্ট এভাবে স্পেস দিয়ে সবগুলির জন্য এই ফাংশনটি চালাতে পারেন।
*এই মেথডের বড় সুবিধা হচ্ছে কোড কম লিখতে হয়।যদি উপরের কোডটুকুই নিচের মত লিখতেন তাহলে এখানে তিনটি ইভেন্টের জন্য তিনবার একই কোড লিখতে হত।
1.$(document).ready(function(){2.$('.myheader').click(function(){3.$(this).toggleClass('changeColor');4.});5.});unbind() মেথড:
bind মেথড দিয়ে যে হ্যান্ডলার টি যুক্ত হয়, unbind মেথড দিয়ে সেটা সরানো যায়।যেমন
index.html
01.<!doctype html>02. 03.<head>04. 05.<title>Webcoachbd Jquery tutorials!</title>06.<link rel="stylesheet" href="/style.css" type="text/css"/>07. 08. 09.<script src="/jquery_latest.js" type="text/javascript" ></script>10.<script src="/script.js" type="text/javascript"></script>11.</head>12.<body>13.<h2>JQUERY tutorials</h2>14.<p class="myPara">Webcoachbd provide massive tutorials on Web Development</p>15.<button id="buttonA">Binder</button>16.<button id="buttonB">UnBinder</button>17.</body>18.</html>1..changeColor{2.background:#ddd;3.color:#000;4.font-weight:bold;5.}01.$(document).ready(function(){02.function handlerFn(){03.$('.myPara').toggleClass('changeColor');04.}05.$('#buttonA').click(function(){06.$('.myPara').bind('click mouseenter mouseleave',handlerFn);07.});08.$('#buttonB').click(function(){09.$('.myPara').unbind('click mouseenter mouseleave',handlerFn);10.});11.});
0 মন্তব্য(গুলি):
Post a Comment