আমি jQuery.com ডকুমেন্টটি পেয়েছি queue()/ dequeue()বুঝতে খুব সহজ। JQuery এর সারি কি? আমি তাদের কীভাবে ব্যবহার করব?
উত্তর:
.queue()এবং.dequeue()লাইনগুলিJQuery এর অ্যানিমেশনগুলির জন্য ব্যবহৃত হয়। আপনার পছন্দসই উদ্দেশ্যে আপনি সেগুলি ব্যবহার করতে পারেন। তারা একটি হয় ফাংশন অ্যারে , প্রতি উপাদান ভিত্তিতে সঞ্চিত ব্যবহার jQuery.data()। তারা হ'ল ফার্স্ট-ইন-ফার্স্ট-আউট (ফিফো)। আপনি কল করে কাতারে একটি ফাংশন যুক্ত করতে পারেন .queue()এবং আপনি ব্যবহার করে ফাংশনগুলি (কল করে) সরিয়ে ফেলুন .dequeue()।
অভ্যন্তরীণ jQuery সারি কার্যাবলী বুঝতে, উত্সটি পড়তে এবং উদাহরণগুলি অনুসন্ধান করা আমাকে প্রচুর পরিমাণে সাহায্য করে। আমি দেখেছি এমন একটি সারি কার্যকারণের সর্বোত্তম উদাহরণ হ'ল .delay():
$.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};fxJQuery এ ডিফল্ট সারিটি fx। ডিফল্ট কাতারে কিছু বিশেষ বৈশিষ্ট্য রয়েছে যা অন্যান্য সারিগুলির সাথে ভাগ হয় না।
$(elem).queue(function(){});করার পরে fxস্বয়ংক্রিয়ভাবে dequeueপরবর্তী ক্রিয়াকলাপটি চালু হবে এবং কাতারটি শুরু না হলে এটি চালিত হবে।dequeue()কোনও ফাংশন করেনfx সারি করবেন, এটি unshift()স্ট্রিংটি (অ্যারের প্রথম অবস্থানের দিকে ধাক্কা দেবে) স্ট্রিং করবে "inprogress"- যে চলছে তা চালানো হচ্ছে।fxকিউ দ্বারা ব্যবহৃত হয় .animate()এবং সব ফাংশন এটি ডিফল্ট ভাবে কল।দ্রষ্টব্য: আপনি যদি একটি কাস্টম সারি ব্যবহার করেন তবে আপনাকে অবশ্যই ম্যানুয়ালি .dequeue()ফাংশনগুলি করতে হবে, সেগুলি স্বয়ংক্রিয়ভাবে শুরু হবে না!
আপনি .queue()কোনও ফাংশন আর্গুমেন্ট ছাড়াই কল করে কোনও jQuery সারিটির রেফারেন্স পেতে পারেন । কয়টি আইটেম রয়েছে তা আপনি দেখতে চাইলে আপনি পদ্ধতিটি ব্যবহার করতে পারেন। আপনি ব্যবহার করতে পারেন push, pop, unshift, shiftজায়গায় কিউ নিপূণভাবে করতে। আপনি একটি অ্যারে পাস করে পুরো সারিটি প্রতিস্থাপন করতে পারেন.queue() ফাংশনে ।
দ্রুত উদাহরণ:
// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3)); fx) সারি উদাহরণ:$(function() {
// lets do something with google maps:
var $map = $("#map_canvas");
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($map[0], myOptions);
var resized = function() {
// simple animation callback - let maps know we resized
google.maps.event.trigger(map, 'resize');
};
// wait 2 seconds
$map.delay(2000);
// resize the div:
$map.animate({
width: 250,
height: 250,
marginLeft: 250,
marginTop:250
}, resized);
// geocode something
$map.queue(function(next) {
// find stackoverflow's whois address:
geocoder.geocode({'address': '55 Broadway New York NY 10006'},handleResponse);
function handleResponse(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
map.setZoom(13);
map.setCenter(location);
new google.maps.Marker({ map: map, position: location });
}
// geocoder result returned, continue with animations:
next();
}
});
// after we find stack overflow, wait 3 more seconds
$map.delay(3000);
// and resize the map again
$map.animate({
width: 500,
height: 500,
marginLeft:0,
marginTop: 0
}, resized);
});var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
$.each([1,2,3],function(i, num) {
// lets add some really simple functions to a queue:
theQueue.queue('alerts', function(next) {
// show something, and if they hit "yes", run the next function.
if (confirm('index:'+i+' = '+num+'\nRun the next function?')) {
next();
}
});
});
// create a button to run the queue:
$("<button>", {
text: 'Run Queue',
click: function() {
theQueue.dequeue('alerts');
}
}).appendTo('body');
// create a button to show the length:
$("<button>", {
text: 'Show Length',
click: function() {
alert(theQueue.queue('alerts').length);
}
}).appendTo('body');আমি একটি $.ajaxQueue()প্লাগইন তৈরি করেছি যা ব্যবহার করে $.Deferred, .queue()এবং অনুরোধটি শেষ হয়ে গেলে সমাধান করা এমন প্রতিশ্রুতিও$.ajax() ফিরিয়ে দেয়। এটির আরও একটি সংস্করণ 1.4 এ এখনও কাজ করে সিকোয়েন্সিং এজ্যাক্স অনুরোধগুলির আমার উত্তর পোস্ট করা হয়েছে$.ajaxQueue
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
dfd = $.Deferred(),
promise = dfd.promise();
// queue our ajax request
ajaxQueue.queue( doRequest );
// add the abort method
promise.abort = function( statusText ) {
// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}
// if there wasn't already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );
if ( index > -1 ) {
queue.splice( index, 1 );
}
// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts,
[ promise, statusText, "" ] );
return promise;
};
// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts )
.done( dfd.resolve )
.fail( dfd.reject )
.then( next, next );
}
return promise;
};
})(jQuery);আমি এখন এটিকে learn.jquery.com এ নিবন্ধ হিসাবে যুক্ত করেছি , সারি সম্পর্কে সেই সাইটে আরও দুর্দান্ত নিবন্ধ রয়েছে, দেখুন।
$(window)?
$({})
সারি পদ্ধতিটি বুঝতে, আপনাকে বুঝতে হবে কীভাবে jQuery অ্যানিমেশন করে। আপনি যদি একের পর এক একাধিক অ্যানিমেট পদ্ধতিতে কলগুলি লিখেন, jQuery একটি 'অভ্যন্তরীণ' সারি তৈরি করে এবং এই পদ্ধতি কলগুলিতে এটি যুক্ত করে। তারপরে এটি একের পর এক সেই অ্যানিমেট কলগুলি চালায়।
নিম্নলিখিত কোড বিবেচনা করুন।
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
//This is the reason that nonStopAnimation method will return immeidately
//after queuing these calls.
$('#box').animate({ left: '+=500'}, 4000);
$('#box').animate({ top: '+=500'}, 4000);
$('#box').animate({ left: '-=500'}, 4000);
//By calling the same function at the end of last animation, we can
//create non stop animation.
$('#box').animate({ top: '-=500'}, 4000 , nonStopAnimation);
}'কিউ' / 'ডিকিউ' পদ্ধতি আপনাকে এই 'অ্যানিমেশন কাতারে' নিয়ন্ত্রণ দেয়।
ডিফল্টরূপে অ্যানিমেশন কাতারের নাম রাখা হয়েছে 'fx'। আমি এখানে একটি নমুনা পৃষ্ঠা তৈরি করেছি যার বিভিন্ন উদাহরণ রয়েছে যা কীভাবে কীভাবে পদ্ধতি ব্যবহার করা যেতে পারে তা চিত্রিত করে।
http://jsbin.com/zoluge/1/edit?html,output
উপরের নমুনা পৃষ্ঠার জন্য কোড:
$(document).ready(function() {
$('#nonStopAnimation').click(nonStopAnimation);
$('#stopAnimationQueue').click(function() {
//By default all animation for particular 'selector'
//are queued in queue named 'fx'.
//By clearning that queue, you can stop the animation.
$('#box').queue('fx', []);
});
$('#addAnimation').click(function() {
$('#box').queue(function() {
$(this).animate({ height : '-=25'}, 2000);
//De-queue our newly queued function so that queues
//can keep running.
$(this).dequeue();
});
});
$('#stopAnimation').click(function() {
$('#box').stop();
});
setInterval(function() {
$('#currentQueueLength').html(
'Current Animation Queue Length for #box ' +
$('#box').queue('fx').length
);
}, 2000);
});
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
$('#box').animate({ left: '+=500'}, 4000);
$('#box').animate({ top: '+=500'}, 4000);
$('#box').animate({ left: '-=500'}, 4000);
$('#box').animate({ top: '-=500'}, 4000, nonStopAnimation);
}এখন আপনি জিজ্ঞাসা করতে পারেন, আমি এই সারিতে কেন বিরক্ত হব? সাধারণত, আপনি না। তবে আপনার যদি কোনও জটিল অ্যানিমেশন ক্রম থাকে যা আপনি নিয়ন্ত্রণ করতে চান তবে সারি / প্রসূতি পদ্ধতিগুলি আপনার বন্ধু।
একটি জটিল অ্যানিমেশন ক্রম তৈরি সম্পর্কে jQuery গ্রুপে এই আকর্ষণীয় কথোপকথনটি দেখুন।
অ্যানিমেশনের ডেমো:
http://www.exfer.net/test/jquery/tabslide/
আপনার যদি এখনও প্রশ্ন থাকে তবে আমাকে জানান।
এখানে একটি সারিতে একাধিক অবজেক্ট অ্যানিমেশনের একটি সাধারণ উদাহরণ।
জিকিউরি আমাদের কেবল একটি বস্তুর সারি তৈরি করতে দেয়। তবে অ্যানিমেশন ফাংশনের মধ্যে আমরা অন্যান্য অবজেক্টগুলিতে অ্যাক্সেস করতে পারি। এই উদাহরণে আমরা # বক্স1 এবং # বক্স 2 অবজেক্টগুলিকে অ্যানিমেট করার সময় # কিউ অবজেক্টের উপরে আমাদের সারি তৈরি করি।
ক্রিয়গুলি ফাংশনের অ্যারে হিসাবে ভাবেন। সুতরাং আপনি অ্যারে হিসাবে সারি হেরফের করতে পারেন। আপনি কিউ হেরফের করতে পুশ, পপ, আনশিফ্ট, শিফট ব্যবহার করতে পারেন। এই উদাহরণে আমরা অ্যানিমেশন সারি থেকে শেষ ফাংশনটি সরিয়েছি এবং এটি শুরুতে sertোকান।
আমাদের হয়ে গেলে, আমরা dequeue () ফাংশন দ্বারা অ্যানিমেশন সারি শুরু করি।
এইচটিএমএল:
<button id="show">Start Animation Queue</button>
<p></p>
<div id="box1"></div>
<div id="box2"></div>
<div id="q"></div>JS:
$(function(){
$('#q').queue('chain',function(next){
$("#box2").show("slow", next);
});
$('#q').queue('chain',function(next){
$('#box1').animate(
{left: 60}, {duration:1000, queue:false, complete: next}
)
});
$('#q').queue('chain',function(next){
$("#box1").animate({top:'200'},1500, next);
});
$('#q').queue('chain',function(next){
$("#box2").animate({top:'200'},1500, next);
});
$('#q').queue('chain',function(next){
$("#box2").animate({left:'200'},1500, next);
});
//notice that show effect comes last
$('#q').queue('chain',function(next){
$("#box1").show("slow", next);
});
});
$("#show").click(function () {
$("p").text("Queue length is: " + $('#q').queue("chain").length);
// remove the last function from the animation queue.
var lastFunc = $('#q').queue("chain").pop();
// insert it at the beginning:
$('#q').queue("chain").unshift(lastFunc);
//start animation queue
$('#q').dequeue('chain');
});CSS:
#box1 { margin:3px; width:40px; height:40px;
position:absolute; left:10px; top:60px;
background:green; display: none; }
#box2 { margin:3px; width:40px; height:40px;
position:absolute; left:100px; top:60px;
background:red; display: none; }
p { color:red; } এটি আপনাকে অ্যানিমেশনগুলি সারিবদ্ধ করার অনুমতি দেয় ... উদাহরণস্বরূপ, এর পরিবর্তে
$('#my-element').animate( { opacity: 0.2, width: '100px' }, 2000);যা উপাদানটি ম্লান করে দেয় এবং একই সাথে প্রস্থটি 100 পিক্সেল করে । সারি ব্যবহার করে অ্যানিমেশনগুলি মঞ্চস্থ করতে দেয়। একের পর এক শেষ হয়।
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();Http://docs.jquery.com/Effects/queue থেকে উদাহরণ
এই থ্রেডটি আমার সমস্যার সাথে আমাকে অনেক সাহায্য করেছে, তবে আমি que .ueue অন্যভাবে ব্যবহার করেছি এবং ভেবেছিলাম যে আমি এখানে কী পোস্ট করব তা পোস্ট করব। আমার যা দরকার ছিল তা হ'ল ইভেন্টগুলির একটি ক্রম (ফ্রেম) ট্রিগার করা, তবে ক্রমটি গতিশীলভাবে নির্মিত হবে। আমার বেশ কয়েকটি স্থানধারক রয়েছে, যার প্রত্যেকটিতে চিত্রের একটি অ্যানিমেটেড ক্রম থাকা উচিত। ডেটাটি অ্যারেতে রাখা হয়, সুতরাং আমি প্রতিটি স্থানধারকের জন্য প্রতিটি ক্রম তৈরির জন্য অ্যারের মধ্য দিয়ে লুপ করি:
/* create an empty queue */
var theQueue = $({});
/* loop through the data array */
for (var i = 0; i < ph.length; i++) {
for (var l = 0; l < ph[i].length; l++) {
/* create a function which swaps an image, and calls the next function in the queue */
theQueue.queue("anim", new Function("cb", "$('ph_"+i+"' img').attr('src', '/images/"+i+"/"+l+".png');cb();"));
/* set the animation speed */
theQueue.delay(200,'anim');
}
}
/* start the animation */
theQueue.dequeue('anim');এটি আমি এসেছি এমন স্ক্রিপ্টটির একটি সরল সংস্করণ, তবে নীতিটি প্রদর্শন করা উচিত - যখন একটি ক্রমে কাতারে যুক্ত করা হয় তখন এটি ফাংশন কনস্ট্রাক্টর ব্যবহার করে যুক্ত করা হয় - এইভাবে লুপ থেকে ভেরিয়েবল ব্যবহার করে ফাংশনটি গতিশীলভাবে লেখা যেতে পারে ( গুলি)। পরবর্তী () কলের জন্য কীভাবে ফাংশনটি আর্গুমেন্টটি পাস হবে তা নোট করুন এবং এটি শেষের দিকে আহ্বান করা হয়েছে। এই ক্ষেত্রে ফাংশনের কোনও সময় নির্ভরতা নেই (এটি $ .ফ্যাডইন বা এর মতো কিছু ব্যবহার করে না), তাই আমি ফ্রেমগুলিকে $ .ডলে ব্যবহার করে স্তম্ভিত হয়ে যাই।
ফাংশন makeRedএবং makeBlackব্যবহার queueএবং dequeueএকে অপরকে কার্যকর। প্রভাবটি হ'ল, '# ওয়াও' উপাদানটি অবিচ্ছিন্নভাবে জ্বলজ্বল করে।
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#wow').click(function(){
$(this).delay(200).queue(makeRed);
});
});
function makeRed(){
$('#wow').css('color', 'red');
$('#wow').delay(200).queue(makeBlack);
$('#wow').dequeue();
}
function makeBlack(){
$('#wow').css('color', 'black');
$('#wow').delay(200).queue(makeRed);
$('#wow').dequeue();
}
</script>
</head>
<body>
<div id="wow"><p>wow</p></div>
</body>
</html>