জেকোয়েরি কলব্যাক ফাংশন (jQuery callback function)
জেকোয়েরির
ইফেক্ট সম্পর্কিত মেথডগুলিতে শেষ প্যারামিটার হিসেবে একটা ফাংশন পাঠানো
যায়।ইফেক্ট শেষ হওয়ার পরেই এই ফাংশন এক্সিকিউট হয়।এই ফাংশনকে কলব্যাক
ফাংশন বলে।উদাহরন এরুপ একটি ইফেক্ট সম্পর্কিত মেথড slideDown() এবং
slideUp() নিয়ে এটা উদাহরন দিচ্ছি।সাধারনত আমরা এই মেথডদুটি কিভাবে লিখি?
এভাবে
তাইনা?এখন এই ৫০০ হচ্ছে কত গতিতে সে স্লাইড নিচে নামাবে,যাইহোক এই
প্যারামিটারের পর কমা দিয়ে আমরা কলব্যাক ফাংশন দ্বিতীয় প্যারামিটার হিসেবে
পাঠাতে পারি।এবং এই ফাংশনে আপনি অন্য যেকোন কাজ করতে পারেন।সুবিধা হচ্ছে
স্লাইড নিচে নামা সম্পূর্ন শেষ হবে তারপর এই ফাংশন এক্সিকিউট হওয়া শুরু
হবে।যেমন
index.html ফাইল
css ফাইল
script.js ফাইল
আউটপুট:
ব্যাখ্যা:এখানে ৪ নম্বল লাইনে দেখুন আমি প্রথম প্যারামিটার দিয়েছি ৫০০
এবং এরপরের প্যারামিটারটি একটি ফাংশন।এই ফাংশনে আমি আমার ইচ্ছেমত প্রয়োজন
মত কোড লিখেছি।যদি এভাবে এই কলব্যাক ফাংশন ব্যবহার না করে slideUp এরপর
slideDown বা অন্য যেকোন মেথড ইত্যাদি ব্যবহার করতাম তাহলে সমস্যা
হত,পরীক্ষা করে দেখতে পারেন।
1.
slideDown(500);
index.html ফাইল
01.
<!DOCTYPE html>
02.
<
html
>
03.
<
head
>
04.
<
title
>Webcoachbd Callback function tutorials</
title
>
05.
<
link
rel
=
"stylesheet"
href
=
"/style.css"
type
=
"text/css"
/>
06.
<
script
src
=
"/jquery_latest.js"
type
=
"text/javascript"
></
script
>
07.
<
script
src
=
"/script.js"
type
=
"text/javascript"
></
script
>
08.
</
head
>
09.
10.
<
body
>
11.
<
div
id
=
"content_pane"
>
12.
<
h3
>Information</
h3
>
13.
<
p
id
=
"shower"
class
=
"pane_toggler"
>Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx.</
p
>
14.
15.
16.
<
h3
>Metadata</
h3
>
17.
<
p
class
=
"pane_toggler"
>Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx2.</
p
>
18.
</
div
>
19.
</
body
>
20.
</
html
>
01.
body{
02.
font-family
:
Verdana
;
03.
font-size
:
13px
;
04.
}
05.
#content_pane{
06.
width
:
400px
;
07.
margin
:
0
auto
;
08.
overflow
:
hidden
;
09.
border
:
1px
solid
#ccc
;
10.
border-radius:
5px
;
11.
padding
:
10px
;
12.
}
13.
h
3
{
14.
text-align
:
center
;
15.
padding
:
5px
;
16.
background
:
#ddd
;
17.
border
:
1px
solid
#ccc
;
18.
cursor
:
pointer
;
19.
}
20.
21.
22.
.pane_toggler{
23.
display
:
none
;
24.
}
01.
$(document).ready(
function
(){
02.
$(
'#shower'
).show();
03.
$(
'h3'
).click(
function
(){
04.
$(
this
).next().slideUp(500,
function
(){
05.
var
test = $(
this
).next().next().text();
06.
if
(test ==
''
){
07.
$(
'#shower'
).slideDown(
'slow'
);
08.
}
else
{
09.
$(
this
).next().next().slideDown(
'slow'
);
10.
}
11.
});
12.
});
13.
});
Information
Lorem ipsum
dolor sit amet, amet coram regis suam non coepit cenam veniebant est in
lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis
puellam ad suis alteri si. Manu in lucem exempli paupers coniunx.
0 মন্তব্য(গুলি):
Post a Comment