jQuery bind method |SP Foundationbd

ধরুন আপনি চান যে একটা function execute হোক যখন কেউ আপনার সাইটের Go বাটনে ক্লিক করবে অথবা এই বাটনের উপর mouse নিয়ে গেলেও এই একই  function  execute  হবে।অর্থ্যাৎ দুটি ইভেন্টে একই function  চলবে।bind মেথড দিয়ে এটা করা যায়।একসাথে যতগুলি ইচ্ছা ইভেন্ট স্পেস দিয়ে লিখবেন এরপর যেকোন function  লিখবেন। যেমন

index.html ফাইল

01.<!doctype html>

  1. 03.<head>

04.05.<title> Spfoundationbd Jquery tutorials!</title>

06.<link rel="stylesheet" href="/style.css" type="text/css"/>

  1. 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>Spfoundationbd is nice tutorial site</p>

14.</body>

15.</html>

css ফাইল

1..changeColor{

2.background:#ddd;

3.color:#000;

4.font-weight:bold;

5.}

script.js ফাইল

1.$(document).ready(function(){

2.$('.myheader').bind('click mouseenter mouseleave',function(){

3.$(this).toggleClass('changeColor');

4.});

5.});

আউটপুট:

JQUERY tutorials

Spfoundationbd is nice tutorial site

 

ব্যাখ্যা: myheader  ক্লাস সম্বলিত হেডারে এখন mouse Hover, click বা mouse সরিয়ে নিয়ে আসলে changeColor নামে একটি  toggle class যুক্ত হবে।আপনি চাইলে আরও event এভাবে স্পেস দিয়ে সবগুলির জন্য এই function টি চালাতে পারেন।

 

 

 

*এই মেথডের বড় সুবিধা হচ্ছে code কম লিখতে হয়।যদি উপরের কোডটুকুই নিচের মত লিখতেন তাহলে এখানে তিনটি ইভেন্টের জন্য তিনবার একই code লিখতে হত।

1.$(document).ready(function(){

2.$('.myheader').click(function(){

3.$(this).toggleClass('changeColor');

4.});

5.});

*toggleClass() method দিয়ে এভাবে এমন একটি  class যোগ করা যায় (সিলেক্টেড এলিমেন্টে) যেটা প্রথমবার ক্লিক করলে ক্লাসটি (এখানে changeColor) যোগ হবে এবং পরেরবার ক্লিক করলে মুছে যাবে।এরুপ অন্যান্য ইভেন্টের ক্ষেত্রেও।

unbind() মেথড:

bind মেথড দিয়ে যে হ্যান্ডলার টি যুক্ত হয়, unbind মেথড দিয়ে সেটা সরানো যায়।যেমন

index.html

01.<!doctype html>

  1. 03.<head>

04.05.

<title> Spfoundationbd Jquery tutorials!</title>

06.<link rel="stylesheet" href="/style.css" type="text/css"/>

  1. 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"> Spfoundationbd provide massive tutorials on Web Development</p>

15.<button id="buttonA">Binder</button>

16.<button id="buttonB">UnBinder</button>

17.</body>

18.</html>

css ফাইল

1..changeColor{

2.background:#ddd;

3.color:#000;

4.font-weight:bold;

5.}

script.js ফাইল

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.});

প্রয়োগ দেখুন

buttonA তে ক্লিক করলে myPara ক্লাস সম্বলিত প্যারাগ্রাফে ৩টি ইভেন্ট bind করেছি এবং এই ৩টি ইভেন্টের যেকোনটি ঘটলে handlerFn নামে ফাংশনটি এক্সিকিউট হবে।আর buttonB তে ক্লিক করলে হ্যান্ডলার ফাংশনটি unbind হবে অর্থ্যাৎ এখন আর প্যারাগ্রাফের উপর ৩টি ইভেন্টের যেটিই ঘটুকনা কেন,কোন কাজ হবেনা।আপনি ইচ্ছে করলে ৩টি ইভেন্ট থেকে শুধু ২/১ টি unbind করতে পারেন।যেটা যেটা unbind করবেন তাদের নাম স্পেস দিয়ে লিখলেই হবে।