জেকুয়েরি ইভেন্ট । jQuery Events
ইভেন্ট কি??? সহজ কথায় এটা যেকোন কিছু যা আপনি একটি ওয়েব পেজ এ করে থাকেন। যেমন ধরুন ফেসবুকে মাউসের পয়েন্টার আপনার সেরা সেলিব্রিটির নামের উপর রাখলেন, সাথে সাথে দেখতে পাবেন একটি পপ- আপ বক্স আপনার সামনে আসবে যেখানে সেই সেলিব্রিটির info দেখাবে। তারপর ধরুন আপনি একটি অনলাইন রেডিও স্টেশন এ গান শুনছেন, আপনার মনে হরো ভলিউম বাড়ানো দরকার, আপনি vol+ বাটনে ক্লিক করলেন এক্ষেত্রে ক্লিকটাই event. অর্থাৎ মাউস বলেন কিবোর্ড বলেন যেকোন কি এর জন্য যেকোন এক্টিভিটিই হলো ইভেন্ট। এখন এই যে ইভেন্ট এবং তার এক্টিভিটি কাজ করানোর জন্য আপনার সাংকেতিক চিহ্ন এর প্রয়োজন হবে। আপনার একটি ওয়েব পেজ বানানোর জন্য। সর্বাধিক ব্যবহৃত সংকেত টি হলো$("p").click();
এবার চলুন আমরা কয়েকটি ইভেন্ট নিয়ে আলোচনা করি: click: একটি পাতা সব অনুচ্ছেদ (প্যারা) এর জন্য একটি ক্লিক ইভেন্ট ব্যবহার করার জন্য:
$(“p”).click(); পরবর্তী ধাপে ক্লিক করার ফলে কি ঘটবে তা নির্ধারণ করা হয়। এর জন্য অবশ্যই একটি ফাংশন ব্যবহার করা আবশ্যক:
$("p").click(function(){
// action goes here!!
});
এখানে কিছু DOM ইভেন্ট দেয়া হলো:
| মাউস ইভেন্ট | কীবোর্ড ইভেন্ট | ফরম ইভেন্ট | ডকুমেন্ট/উইন্ডো ইভেন্ট |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
সাধারণভাবে ব্যবহৃত jQuery Event Methods
click(): click() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ক্লিক করবেন। এখানে একটি উদাহরন দেখুন। এই p এর উপর ক্লিক করলে p উধাও হয়ে যাবে:$(“p”).click(function(){ $(this).hide(); });
এখান থেকে উদাহরন দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
dblclick(): dblclick() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন ইউজার HTML element টিতে ডাবল ক্লিক করবেন।
$("p").dblclick(function(){
$(this).hide();
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
mouseenter(): mouseenter() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে প্রবেশ করবে।
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
mouseleave(): mouseleave() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টার HTML element এর ভিতরে থেকে বের হয়ে যায়।
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mousedown(): mousedown() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক করা হবে,
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
উদাহরন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mouseup(): mouseup() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML element এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির উপরে থাকবে এবং HTML element এর উপর বাম, ডান বা মিডেল ক্লিক ছেড়ে দেয়া হবে,
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
উদাহরন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
hover(): hover() method দুইটি ইভেন্ট হ্যান্ডেলার ফাংশন mouseenter() এবং mouseleave() এর সমন্নয়ে HTML element এর সাথে যুক্ত করে। প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতরে প্রবেশ করবে এবং প্রথম ফাংশনটি কাজ করবে যখন মাউস পয়েন্টারটি এলিমেন্টটির ভিতর থেকে বাহিরে যাবে,
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
focus(): focus() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন ফিল্ডটিকে ফোকাস করা হবে,
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur(): blur() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে। এই ফাংশনটি কাজ করবে যখন ফিল্ডটি থেকে ফোকাস সরিয়ে নেয়া হবে,
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
এখান থেকে উদাহরনটি দেখুন:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
on(): on() method একটি ইভেন্ট হ্যান্ডেলার ফাংশন কে একটি HTML ফর্ম ফিল্ড এর সাথে যুক্ত করে।
$("p").on("click", function(){
$(this).hide();
});
উদাহরন:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
<p> এলিমেন্ট এ একাধিক ইভেন্ট হ্যান্ডেলার ফাংশন যোগ করার উদাহরণ,
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
উদাহরন:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Click or move the mouse pointer over this paragraph.</p>
</body>
</html>
jQuery hide() এবং show()
jQuery তে hide() and show() মেথড ব্যবহার করে এইচটিএমএল এলিমেন্ট লুকাতে এবং প্রদর্শন করতে পারি:$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Syntax এটাতে কিন্তু আমরা কিছু Syntax যোগ করে স্পিড বাড়াতে কমাতে পারি । তাহলে দেখুন Syntax গুলো কেমন ।
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
এই অপশনাল প্যারামিটার গুলো নির্দেশ করে দেখাতে এবং বন্ধ করতে কেমন সময় নিবে। এর মান “slow”, “fast”, বা milliseconds হতে পারে। উদাহরণ:
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle() মেথড এর ব্যবহার
jQuery toggle() মেথডটি আপনি hide() এবং show() মেথডের মাঝে ব্যবহার করতে পারেন। তাহলে বন্ধ তথ্যগুলো দেখাবে, আর দেখানোগুলো বন্ধ করবে ।$("button").click(function(){
$("p").toggle();
});
Syntax
এখানেও আমরা একটা স্পিড Syntax যোগ করে এর স্পীড নিয়ন্ত্রণ করতে পারি ।$(selector).toggle(speed,callback);
এই স্পীড প্যারামিটার এটিকে দ্রুত, আস্তে এবং মিলিসেকেন্ডে পরিবর্তন করতে পারে ।
jQuery এর FadeIn () পদ্ধতি
JQuery দিয়ে আপনি একটি লেখাকে দৃশ্যমানতা এবং এই উপাদানটি আউট/বিবর্ণ করতে পারেন। JQuery তে FadeIn () মেথডটি লুকানো উপাদান দেখতে ব্যবহার করা হয়।Syntax
$(selector).fadeIn(speed,callback);
আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড। অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে। নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে FadeIn () মেথড দেখানো হলঃ যেমনঃ
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery এর fadeout () পদ্ধতি
JQuery এর fadeout () মেথড দিয়ে একটি দৃশ্যমান উপাদানকে আউট করতে ব্যবহার করা হয়।Syntax
$(selector).fadeOut(speed,callback);
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড। অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে। নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeout () মেথড দেখানো হলঃ যেমনঃ
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery এর fadeToggle () পদ্ধতি
JQuery এর fadeToggle () মেথড হচ্ছে FadeIn () এবং fadeout () পদ্ধতির মধ্যে পার্থক্য। উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার বিবর্ণ করে দেয়। উপাদান কে হাইড করে দেয় এবং fadeToggle () তাদের আবার দৃশ্যমান করে দেয়।Syntax
$(selector).fadeToggle(speed,callback);
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড। অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে। নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeToggle () মেথড দেখানো হলঃ যেমনঃ
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery এর fadeTo () পদ্ধতি
JQuery এর fadeTo () মেথড (0 এবং 1 এর মধ্যে মান) একটি প্রদত্ত অস্বচ্ছতা ফেইড দেখাতে পারবেন।Syntax
$(selector).fadeTo(speed,opacity,callback);
এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড। FadeTo () মেথড প্রয়োজন অস্বচ্ছতা করতে প্যারামিটারের মান দিয়ে দিতে পারবেন। অস্বচ্ছতা ফেইড নির্দিষ্ট (0 মধ্যে মান 1) এর মধ্যে। অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে। নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeTo () মেথড দেখানো হলঃ
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
জে- কুয়ারী ইফেক্ট – অ্যানিমেশন : jQuery Animations
Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি : সিনট্যাক্স$(selector).animate({params},speed,callback);
সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে হবে তার CSS property এর মধ্যে define করতে হবে। অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য । “slow”, “fast”, অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়। অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়। একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো
$("button").click(function(){
$("div").animate({left: '250px'});
});
jQuery animate() method একাধিক Properties
এর মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব? উত্তর প্রায়, হ্যাঁ! এখন আমরা দেখব কিভাবে animate() মেথড Relative Values ব্যবহার করে |
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায় যেমন নিচের উধাহরণ দেখুন
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায় যেমন নিচের উধাহরণ দুটি লক্ষ করুন উধাহরণ 1 . আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
উদাহরণ 2 এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery stop() মেথড
কোনো animation বা effect শেষ হবার পূর্বেই সেটাকে থামানোর ক্ষেত্রে jQuery stop() method ব্যবহার করা হয়। Sliding, fading এবং custom animation সহ সকল jQuery effect ফাংশনের ক্ষেত্রে stop() method ব্যবহার করা হয়। সিনট্যাক্স$(selector).stop(stopAll,goToEnd);
stopAll parameter একটি optional parameter যা animation queue টি clear হয়েছে কি না তা নির্দেশ করে। এর Default মান হলো False, যা শুধুমাত্র active animation কে stop করে এবং সারির পরবর্তী animation গুলোকে চলতে দেয়। goToEnd parameter একটি optional parameter যা current animation কে complete করবে কি না তা নির্দেশ করে। এর Default মান হলো False. সুতরাং Default মান যখন অপরিবর্তিত থাকে তখন stop() method টি কোনো Selected element এর current animation কে চলতে বাধা প্রদান করে। নিম্নোক্ত উদাহরণের সাহায্যে stop() method এর একটি ব্যবহার দেখানো হলো যেখানে কোনো parameter ব্যবহার করা হয় নি।
$("#stop").click(function(){
$("#panel").stop();
});
Write Your Comment