Mar 31

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট
—–
কেউ যখন তার মোবাইল ডিভাইসের অবস্থান (orientation) পরিবর্তন করে আনুভূমিক (horizontal) কিংবা উল্লম্ব (vertical) অবস্থায় নিয়ে আসবে তখন orientationchange ইভেন্ট কাজ করবে।
orientationchange ইভেন্ট ব্যবহার করার জন্য window object এর সাথে ইভেন্টটি সংযুক্ত করে দিতে হবে। যেমন-
$(window).on(“orientationchange”,function(){
alert(“ডিভাইসের অবস্থান পরিবর্তন হয়েছে!”);
});
callback ফাংশনটি একটি আর্গুমেন্ট ধারণ করতে পারে, আর তা হলো event অবজেক্ট; যা মোবাইল ডিভাইসের orientation বা অবস্থা জানায়: “portrait” (অর্থ হচ্ছে মোবাইল ডিভাইস এখন উল্লম্ব অবস্থানে রাখা আছে) কিংবা “landscape” (মোবাইল ডিভাইস এখন আনুভূমিক অবস্থানে রাখা আছে):
উদাহরণ:
$(window).on(“orientationchange”,function(event){
alert(“Orientation is: ” + event.orientation);
});

Mar 31

জেকয়ারি এফেক্ট মেথড

জেকয়ারি এফেক্ট মেথড
নয়ন চন্দ্র সরকার

জেকয়ারি হল এমন একটি জাভাস্ক্রিপ্ট লাইব্রি যা সহজ, ছোট এবং সমৃদ্ধ এবং যা, এইচ টি এম এল ডকুমেন্ট গুলোকে একটা এ পি আই এর মাধ্যমে বিভিন্ন ব্রাউজার দক্ষতা সহকারে হস্তচালন করতে সাহায্য করে। নিচে এর এফেক্ট গুলো আলোচনা করা হল।

জেকয়ারির অ্যানিমেশন এফেক্ট তৈরি করতে যে পদ্ধতিগুলো ব্যবহার করা হয়, সেগুলো নিচে আলোচনা করা হল।

“animate ( ) মেথডঃ
এই মেথডটা নিদিষ্ট উপাদানে কাস্টম অ্যানিমেশন রান করে।

clearQueue ( ) মেথডঃ
এই মেথড অপেক্ষারত ফাংশনগুলোকে নিদিষ্ট উপাদান গুলো থেকে দূর করতে সাহায্য করে।

Delay( ) মেথডঃ
এই মেথডের মাধ্যমে সকল অপ্পেক্ষারত ফাংশনগুলোর জন্য একটা ডিলে সেট করা হয়।

Dequeue ( ) মেথডঃ
এটা পরবর্তী ফাংশন কে লাইন থেকে বিতারিত করে ফাংশন টা সম্পাদন করে।

FadeIn ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ ইন করে।

Fadeout ( ) মেথডঃ
নির্বাচিত উপাদানগুলোকে ফেইদ আউট করে।

fadeTo ( ) মেথডঃ
এই নিয়মটা নিদিষ্ট উপাদানগুলোকে একটা প্রদত্ত অপাছিতিতে ফেইদ ইন বা আউট করে।

fadeToggle ( ) মেথডঃ
এটা ফেইদ ইন এবং আউট এর মধ্যে টগল করে ।

Finish ( ) মেথডঃ
এই মেথডটা সব অপ্পেক্ষারত এনিমেশনগুলোকে নির্দিষ্ট উপাদাগুলথেকে থামতে, দূর করতে অথবা সম্পন্ন করতে সাহায্য করে ।

Hide ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে হাইট করে ।

Queue ( ) মেথডঃ
এটা অপ্পকেক্ষারত ফাংশনগুলোকে নির্দিষ্ট উপদানে দেখায় ।

Show ( ) মেথডঃ
এটা সো করায়

Slidedown ( ) মেথডঃ
এটা নির্দিষ্ট উপাদানগুলোকে স্লাইড দাউন করে ।

Slideup ( ) মেথডঃ
এটা নির্দিষ্ট উপদাঙ্গুলকে স্লাইড আপ করে ।

Stop ( ) মেথডঃ
এটা চলতি অ্যানিমেশন নির্দিষ্ট উপদান থেকে থামতে সাহায্য করে ।
Toggle ( ) মেথডঃ
এটা hide() এবং show() এর মধ্যে তগল করে

Mar 31

jQuery Mobile Scrollstart

jQuery Mobile Scrollstart
——————————–
অনুবাদক: ফয়সাল রকি
——————————-

যখন কোনো ব্যবহারকারী কোনো page scroll করা শুরু করে তখন scrollstart ইভেন্টটি কাজ করতে শুরু করে।
উদাহরণ:
$(document).on(“scrollstart”,function(){
alert(“Started scrolling!”);
});

লক্ষ্যণীয় বিষয়: iOS ব্যবহৃত device গুলো page scroll এর সময় DOM manipulation কে freeze করে দেয়; সুতরাং যখন কোনো ব্যবহারকারী কোনো page scroll করে তখন কোনো কিছু পরিবর্তন করা সম্ভব হয় না।

jQuery Mobile Scrollstop
যখন কোনো ব্যবহারকারী কোনো page scroll করা বন্ধ করে তখন Scrollstop ইভেন্টটি কাজ শুরু করে।
উদাহরণ:
$(document).on(“scrollstop”,function(){
alert(“Stopped scrolling!”);
});

Mar 31

জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।

জেকোয়েরি এর বিভিন্ন প্রক্রিয়া ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

কেমন লাগছে সবার জেকোয়েরি ? নিশ্চয়ই ভালো । আজ আমি আপনাদের সাথে জেকোয়েরি এর বিভিন্ন প্রক্রিয়া সম্পর্কে আলোচনা করবো ।

প্রক্রিয়ার নামঃ data()
প্রক্রিয়ার বর্ণনাঃ বিভিন্ন উপাদানের সাথে ডাটা যোগ করতে অথবা এসব উপাদান থেকে ডাটা সংগ্রহ করতে ব্যবহার করা হয় ।

প্রক্রিয়ার নামঃ each()
প্রক্রিয়ার বর্ণনাঃ সকল সদৃশ উপাদান থেকে ফাংশন তৈরি করে ।

প্রক্রিয়ার নামঃ get()
প্রক্রিয়ার বর্ণনাঃ সিলেক্টর দ্বারা DOM elements কে সদৃশ করতে ব্যবহৃত হয় ।

প্রক্রিয়ার নামঃ index()
প্রক্রিয়ার বর্ণনাঃ কোনো তথ্য দেয়া থাকলে তার অনুরুপ উপাত্ত গুলো খুঁজে বের করে থাকে ।

প্রক্রিয়ার নামঃ $.noConflict()
প্রক্রিয়ার বর্ণনাঃ $ ভেরিয়েবলস এর ক্ষেত্রে জেকোয়েরি এর নিয়ন্ত্রণ করে ।

প্রক্রিয়ার নামঃ $.param()
প্রক্রিয়ার বর্ণনাঃ কোনো শ্রেণীবিন্যাস অথবা কোনো উপাদান থাকলে তাদের একটা সিরিয়াল তৈরি করে প্রদর্শন করে ।

প্রক্রিয়ার নামঃ removeData()
প্রক্রিয়ার বর্ণনাঃ পূর্বের সংগ্রহকৃত ডাটা মুছে ফেলে ।

প্রক্রিয়ার নামঃ size()
প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি সিলেক্টর দ্বারা DOM elements গুলোকে সদৃশ করে থাকে ।

প্রক্রিয়ার নামঃ toArray()
প্রক্রিয়ার বর্ণনাঃ জেকোয়েরি তে থাকা শ্রেণীবিন্যাসকৃত সকল DOM elements গুলো কে আলাদা করে ।

তাহলে আমরা জেকোয়েরি এর বিভিন্ন প্রক্রিয়াগুলোর নাম এবং তাদের কাজগুলো জানলাম তো । এখন এগুলো একটু জেনে রাখুন, পরে এর উদাহরণসহ বর্ণনা দিবো তাহলে আরো বুঝতে সুবিধা হবে । এখন সব একবারে শিখতে গেলে আরো জটিল মনে হবে । কোথাও বুঝতে না পারলে কমেন্ট করতে ভুলবেন না কিন্তু ।

Mar 31

jQuery এবং অন্যান্যJavaScript অবকাঠামো

jQuery এবং অন্যান্যJavaScript অবকাঠামো

ইতিমধ্যে আপনি যেনেছেন , jQuery তে $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।
অন্যান্য অনেক জনপ্রিয় জাভাস্ক্রিপ্ট অবকাঠামো আছে যেমন Angular, Backbone, Ember, Knockout আরও অনেক।
তাছারা কিভাবে অন্যান্য জাভাস্ক্রিপ্ট অবকাঠামো $ চিহ্ন ব্যবহার করা হয় শর্টকাট হিসাবে।
দুটি আলাদা অবকাঠামো একই শর্টকাট ব্যবহার করে থাকে, তাদের মধ্যে একটি কাজ বন্ধ হতে পারে ।
ইতিমধ্যে JQuery এর টিম এই সম্পর্কে চিন্তা আছে, এবং noConflict() পদ্ধতি প্রয়োগ করা।

JQuery এর noConflict() পদ্ধতি
noConflict()পদ্ধতি, $ শর্টকাট পরিচিতি ধরে রিলিজ, তাই অন্য যে কোন স্ক্রিপ্টের ব্যবহার করতে পারেন।
আপনি অবশ্যই এখনও jQuery ব্যবহার করতে পারেন।
উদাহরন
$.noConflict();
jQuery(document).ready(function(){
jQuery(“button”).click(function(){
jQuery(“p”).text(“jQuery is still working!”);
});
});

আপনি খুব সহজেই আপনার নিজের শর্টকাট তৈরি করতে পারেন। noConflict() পদ্ধতিতে jQuery এর রেফারেন্স প্রদান করে, তাছারা একতি variable save করতে পারেন, পরে ব্যবহারের জন।

এখানে একটি উদাহরণ:

var jq = $.noConflict();
jq(document).ready(function(){
jq(“button”).click(function(){
jq(“p”).text(“jQuery is still working!”);
});
});

যদি আপনার ব্যবহার করা jQuery code ব্লক থাকে এবং পরিবর্তন করতে না চান, আপনি পারেন $ সাইন পারামিটার হিসাবে ব্যবহার করতে।
আপনি jQuery $ ব্যবহার করে অ্যাক্সেস করতে পারবেন, এই ফাংশন ভিতরে – এটা বাইরে ব্যবহার করতে যাবে “jQuery”:

উদাহরণ

$.noConflict();
jQuery(document).ready(function($){
$(“button”).click(function(){
$(“p”).text(“jQuery is still working!”);
});
});

নাম :: মাহবুবুর রহমান

Mar 31

jQuery এর – AJAX এর ভূমিকা

jQuery এর – AJAX এর ভূমিকা

মোঃ আরিফুল ইসলাম

 

পুরো পৃষ্ঠা রিলোড না করে সার্ভারের সাথে তথ্য বিনিময় করা এবং সেটি ওয়েব পেজ এর একটি অংশে আপডেট করা AJAX এর কাজ।

 

AJAX কি?

AJAX =JavaScript এবং XML এর সমন্বয়।

সংক্ষেপে, AJAX ওয়েব পেজ এর ব্যাকগ্রাউন্ড থেকে ডাটা লোড করে এবং সেটি ওয়েব পেজ এ প্রদর্শন করে। পুরো ওয়েব পেজকে রিলোড না করে।

AJAX ব্যবহার করে তৈরি করা কিছু ওয়েব অ্যাপ্লিকেশন এর উদাহরণ- Gmail, Google Maps, Youtube, and Facebook

 

JQuery এবং Ajax

Ajax এর ফাংশন Jquery এর কিছু মেথড ব্যাবহার করে।

jQuery AJAX মেথড থেকে আমরা যেকোন রিমোট সার্ভার ব্যাবহার করে যেকোন text, HTML, XML, অথবা JSON ফাইল কল করতে পারি। এছাড়াও বহিরাগত কোন নির্বাচিত HTML এলিমেন্টকে লোড করিয়ে ওয়েব পেজ এ প্রদর্শন করাতে পারি।

 

JQuery ছাড়া কি, AJAX এর কোডিং সুশৃঙ্খলভাবে কাজ করতে পারে

সচরাচর AJAX এর যে কোড লেখা হয় সেগুলিতেই AJAX এর কোডিং সুশৃঙ্খলভাবে কাজ করতে পারে। কারণ, বিভিন্ন ব্রাউজার এ AJAX এর সিনট্যাক্স ইমপ্লিমেন্ট করা আছে।

 

jQuery AJAX মেথড

পরবর্তী টিউটোরিয়াল এ আমরা jQuery AJAX মেথড সম্পর্ক এ জানবো।

 

Mar 31

jQuery এর মাত্রা সঙ্গে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ পদ্ধতি আছে

jQuery এর মাত্রা সঙ্গে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ পদ্ধতি আছে:
যেমনঃ
• width() -প্রস্থ ()
• height() -উচ্চতা ()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
jQuery এর প্রস্থ () এবং উচ্চতা () পদ্ধতি নিম্নে দেখানো হলঃ
প্রস্থ () মেথড সেট বা একটি উপাদান প্রস্থ কত হবে তা নির্দেশ করে (প্যাডিং, সীমানা, বা মার্জিন অন্তর্ভুক্ত রয়েছে)।
উচ্চতা () মেথড সেট বা একটি উপাদান এর উচ্চতা কত হবে তা প্রদান করে থাকে (প্যাডিং, সীমানা, বা মার্জিন অন্তর্ভুক্ত).
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ এবং উচ্চতা দেখানো হলঃ
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Width: ” + $(“#div1”).width() + “</br>”;
txt+=”Height: ” + $(“#div1”).height();
$(“#div1”).html(txt);
});

jQuery এর innerWidth () এবং innerHeight () পদ্ধতি নিম্নে দেখানো হলঃ
InnerWidth () মেথড একটি উপাদান প্রস্থ (প্যাডিং বিদ্যমান রয়েছে) প্রদান করে।
InnerHeight () মেথড একটি উপাদান উচ্চতা (প্যাডিং বিদ্যমান রয়েছে) প্রদান করে।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর ভেতরের প্রস্থ / উচ্চতা দেখানো হল:
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Inner width: ” + $(“#div1”).innerWidth() + “</br>”;
txt+=”Inner height: ” + $(“#div1”).innerHeight();
$(“#div1”).html(txt);
});

jQuery এর outerWidth () এবং outerHeight () পদ্ধতি নিম্নে দেখানো হলঃ

OuterWidth () মেথড একটি উপাদান প্রস্থ নির্দেশ করে (প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে)।
OuterHeight () মেথড একটি উপাদান এর উচ্চতা নির্দেশ করে থাকে (প্যাডিং এবং সীমানা অন্তর্ভুক্ত রয়েছে)।
নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর বাইরের প্রস্থ / উচ্চতা দেখানো হল:
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Outer width: ” + $(“#div1”).outerWidth() + “</br>”;
txt+=”Outer height: ” + $(“#div1”).outerHeight();
$(“#div1”).html(txt);
});

OuterWidth (এটি সত্য হতে হবে) পদ্ধতি একটি উপাদানের প্রস্থ (প্যাডিং, সীমানা, এবং মার্জিন রয়েছে) নির্দেশ করে থাকে।
OuterHeight ((এটি সত্য হতে হবে) পদ্ধতি একটি উপাদানের উচ্চতা (প্যাডিং, সীমানা, এবং মার্জিন রয়েছে) নির্দেশ করে থাকে।
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Outer width (+margin): ” + $(“#div1”).outerWidth(true) + “</br>”;
txt+=”Outer height (+margin): ” + $(“#div1”).outerHeight(true);
$(“#div1”).html(txt);
});

jQuery এর আরো প্রস্থ () এবং উচ্চতা () পদ্ধতি রয়েয়ছেঃ

নিম্নলিখিত উদাহরণে আমরা (এইচটিএমএল ডকুমেন্ট) এবং উইন্ডো (ব্রাউজার ভিউপোর্ট) প্রস্থ এবং উচ্চতা দেখব:
যেমনঃ
$(“button”).click(function(){
var txt=””;
txt+=”Document width/height: ” + $(document).width();
txt+=”x” + $(document).height() + “\n”;
txt+=”Window width/height: ” + $(window).width();
txt+=”x” + $(window).height();
alert(txt);
});

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ ও উচ্চতা দেখানো হল:
যেমনঃ
$(“button”).click(function(){
$(“#div1”).width(500).height(500);
});

Mar 31

jQuery এ এইচটিএমএল এলিমেন্টস দূর করা

লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরিতে খুব সহজে আগে থেকে থাকা এইচটিএমএল এলিমেন্টস দূর করা যায় ।

 

এলিমেন্টস বা উপাদান দূর করা

এলিমেন্টস বা উপাদান দূর করার জন্য দুই ধরণের জেকোয়েরি মেথডস আছে ।

  1. remove() : এটি এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।
  2. empty() : সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।

 

jQuery remove() Method

jQuery remove() Method এর সাব ক্যাটাগরি সহ সকল সিলেক্ট করা এলিমেন্টস দূর করে ।

$(“#div1”).remove();

ফলাফল : remove()

 

jQuery empty() Method

jQuery empty() Method এর সাব ক্যাটাগরি এর সকল উপাদানকে দূর করে ।

$(“#div1”).empty();

ফলাফল : empty()

 

দূরকৃত এলিমেন্টস এর ফিল্টার করা

jQuery remove() method একটি প্যারামিটার সাপোর্ট করে তাই এটি দূরকৃত এলিমেন্টস এর ফিল্টার করতে পারে ।

এই প্যারামিটার টি যেকোন জেকোয়েরি সিলেক্টর হবে ।

নিচের উদাহরণ class=”italic”: ক্লাসের সকল <p> উপাদানগুলোকে দূর করবে ।

$(“p”).remove(“.italic”);

ফলাফল : দূরকৃত এলিমেন্টস এর ফিল্টার

 

জেকোয়েরি এইচটিএমএল রেফারেন্স

এছাড়া জেকোয়েরি এর সকল এইচটিএমএল কে উপরের পদ্ধতিতে দূর করতে পারবেন । এজন্য আপনি পূর্বে পোস্ট করা আমাদের সকল এইচটিএমএল রেফারেন্স গুলো দেখতে পারেন ।

এভাবে আপনি খুব সহজে জেকোয়েরিতে এইচটিএমএল এলিমেন্টস গুলো দূর করতে পারবেন

Mar 31

জেকোয়েরি মোবাইল দিয়ে ফিল্টার লিস্ট তৈরি করে সার্চ ফিল্ড তৈরি

জেকোয়েরি মোবাইল দিয়ে ফিল্টার লিস্ট তৈরি করে সার্চ ফিল্ড তৈরি
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me

আমরা কম্পিউটারে বা মোবাইলে সার্চ করার জন্য কোন কিছু লেখার সাথে সাথেই তা দেখিয়ে দেয় । এর কারণ হলো তাদের আগে থেকে সবকিছুর একটা লিস্ট তৈরি করে ফিল্টার করা থাকে তাই আমরা সার্চ করার সাথে সাথে খুঁজে পাই । আজ আমরা জেকোয়েরি মোবাইল দিয়ে এই ফিল্টার তৈরি করা শিখবো ।

ফিল্টার যোগ্য উপাদান সমূহঃ
যে সকল উপাদানের একটি সাব উপাদান লিস্ট বা বাচ্চা ক্যাটাগরি থাকে তাদের ফিল্টার লিস্ট তৈরি করা যাবে ।

কিভাবে একটি সার্চের জায়গা তৈরি করবো?
১। যে সকল উপাদান সমূহকে ফিল্টার করবো তাদের data-filter=”true” এট্রিবিউট দ্বারা অবশ্যই অন্তর্ভূক্ত থাকতে হবে ।

২। একটি <input> উপাদান তৈরি করতে হবে এবং এর সাথে data-type=”search” এট্রিবিঊট যোগ করতে হবে । এটা একটি সার্চের জায়গা তৈরি করবে । <input> কে একটি ফর্মের সাথে জড়াতে হবে এবং এই <form> element এর সাথে “ui-filterable” ক্লাস যোগ করতে হবে । এটা সার্চ ফিল্ড এবং সার্চের তথ্যের মাঝে একটা ভাগ দেখাবে ।

৩। তারপর data-input এট্রিবিউট কে ফিল্টারযোগ্য উপাদানের সাথে যোগ করতে হবে । এর ভেলু অবশ্যই <input> উপাদানের সাথে মিলতে হবে । তা না হলে কিন্তু সার্চ করা হলে কিছুই খুঁজে পাবে না ।

নিচে আমরা একটি উদাহরণ দেখাচ্ছিঃ

<form class=”ui-filterable”>
<input id=”myFilter” data-type=”search”>
</form>

<ul data-role=”listview” data-filter=”true” data-input=”#myFilter”>
<li><a href=”#”>Adele</a></li>
<li><a href=”#”>Billy</a></li>
<li><a href=”#”>Calvin</a></li>
</ul>

আপনি এর জন্য একটা স্থান ধারক তৈরি করতে পারেন যেটা সার্চ ফিল্ডে কিছু সাজেশান হিসেবে দেখাতে পারে ।
উদাহরণ হিসেবে নিচের কোডটি দেখতে পারেনঃ
<input id=”myFilter” data-type=”search” placeholder=”Search for names..”>

নিজের মত করে ফিল্টার তৈরিঃ
চাইল্ড এলিমেন্টে যেটা থাকবে সুধু সার্চ রেজাল্টে সেটাই দেখাবে । কিন্তু আপনি চাইল্ড এলিমেন্টে data-filtertext এট্রিবিউট যোগ করে নিজের মত করে ফিল্টার তৈরি করতে পারবেন ।
কোডের উদাহরণঃ
<li data-filtertext=”fav”><a href=”#”>Adele</a></li>

কিন্তু মনে রাখবেন আপনি যখন এমন ফিল্টার রেজাল্ট তৈরি করবেন সার্চ এর জন্য তখন আসল রেজাল্ট গুলো কিন্তু দেখাবে না, আপনার রেজাল্ট টায় প্রাধান্য পাবে ।

তাহলে দেখলেন তো কত সহজে আমরা একটা সার্চ ফিল্ড তৈরি করে ফেললাম । আসলেই খুব সহজ এবং অনেক মজার ।

Mar 31

জেকোয়েরি এর কলব্যাক ফাংশন ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

 

কেমন আছেন সবাই? আজ আমি আপনাদের সাথে জেকোয়েরি এর কলব্যাক ফাংশন সমূহ আলোচনা করবো ।

জেকোয়েরি এর কলব্যাক ফাংশন

যখন কোনো পেজের ইফেক্ট ১০০% শেষ হয় তখন কলব্যাক ফাংশন তার কাজ সম্পাদন করে থাকে ।
সাধারণত জাভাস্ক্রিপ্ট এর বিবৃতি গুলো লাইন বাই লাইন সম্পাদিত হয় । আর যখন ইফেক্ট ব্যবহার করা হয় তখন ইফেক্ট শেষ না হলেও পরের লাইন সম্পাদিত হতে পারে । আর এই সমস্যা দূর করার জন্য কলব্যাক ফাংশন তৈরি করা হয় ।

চলমান ইফেক্ট শেষ হলে কলব্যাক ইফেক্ট চালু হয় ।

কলব্যাক ইফেক্ট টিতে সাধারণত এমন কোড থাকে :

$(selector).hide(speed,callback);

 

 

কলব্যাক ফাংশনসহ উদাহরণঃ

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

ফলাফল : কলব্যাক ফাংশন

 

এটায় hide effect শেষ হলে কলব্যাক ফাংশন কাজ করবে ।

কলব্যাক ফাংশনবিহীন উদাহরণঃ

$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});

ফলাফল : কলব্যাক ফাংশনবিহীন

এটায় কোনো কলব্যাক ফাংশন ব্যবহার করা হয়নি । তাই hide effect শেষ হলেই alert box হাজির হবে ।

 

তাহলে কলব্যাক ফাংশনের কাজ বুঝলেন তো? না বুঝতে পারলে কমেন্ট করবেন আমি বুঝতে সাহায্য করবো ।