জেকোয়েরি কলব্যাক ফাংশন (jQuery callback function)

 



জেকোয়েরির ইফেক্ট সম্পর্কিত মেথডগুলিতে শেষ প্যারামিটার হিসেবে একটা ফাংশন পাঠানো যায়।ইফেক্ট শেষ হওয়ার পরেই এই ফাংশন এক্সিকিউট হয়।এই ফাংশনকে কলব্যাক ফাংশন বলে।উদাহরন এরুপ একটি ইফেক্ট সম্পর্কিত মেথড slideDown() এবং slideUp() নিয়ে এটা উদাহরন দিচ্ছি।সাধারনত আমরা এই মেথডদুটি কিভাবে লিখি?

1.slideDown(500);

এভাবে তাইনা?এখন এই ৫০০ হচ্ছে কত গতিতে সে স্লাইড নিচে নামাবে,যাইহোক এই প্যারামিটারের পর কমা দিয়ে আমরা কলব্যাক ফাংশন দ্বিতীয় প্যারামিটার হিসেবে পাঠাতে পারি।এবং এই ফাংশনে আপনি অন্য যেকোন কাজ করতে পারেন।সুবিধা হচ্ছে স্লাইড নিচে নামা সম্পূর্ন শেষ হবে তারপর এই ফাংশন এক্সিকিউট হওয়া শুরু হবে।যেমন

index.html ফাইল

01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title>codestrickz 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>

css ফাইল

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.h3{
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.}

script.js ফাইল

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.

Metadata

ব্যাখ্যা:এখানে ৪ নম্বল লাইনে দেখুন আমি প্রথম প্যারামিটার দিয়েছি ৫০০ এবং এরপরের প্যারামিটারটি একটি ফাংশন।এই ফাংশনে আমি আমার ইচ্ছেমত প্রয়োজন মত কোড লিখেছি।যদি এভাবে এই কলব্যাক ফাংশন ব্যবহার না করে slideUp এরপর slideDown বা অন্য যেকোন মেথড ইত্যাদি ব্যবহার করতাম তাহলে সমস্যা হত,পরীক্ষা করে দেখতে পারেন।

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.