التابع jQuery.queue() في jQuery
يعرض هذا التابع أو يعدِّل طابور الدوال المراد تنفيذها على العنصر المطابق.
jQuery.queue( element [, queueName ] )
القيم المعادة
يعيد مصفوفةً (Array).
الوصف
يعرض هذا التابع طابور الدوال المراد تنفيذها على العنصر المطابق.
jQuery.queue( element [, queueName ] )
أُضيف مع الإصدار: 1.3.
element
عنصر DOM الذي سيُبحث عن طابور الانتظار المرتبط به.
queueName
سلسلة نصية تحتوي على اسم الطابور. القيمة الافتراضيَّة هي fx وهو اسم طابور التأثيرات القياسي.
ملاحظة: هذا التابع ذو مستوًى منخفض، لذا يجب عليك استعمال التابع .queue() عوضًا عنه.
أمثلة
عرض طول الطابور المرتبط بعنصر:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.queue مثالٌ عن استعمال التابع</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>
$( "#show" ).click(function() {
var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
$( "span" ).text( "Queue length is: " + n.length );
});
function runIt() {
$( "div" )
.show( "slow" )
.animate({
left: "+=200"
}, 2000 )
.slideToggle( 1000 )
.slideToggle( "fast" )
.animate({
left: "-=200"
}, 1500 )
.hide( "slow" )
.show( 1200 )
.slideUp( "normal", runIt );
}
runIt();
</script>
</body>
</html>
jQuery.queue( element, queueName, newQueue )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يعدِّل هذا التابع طابور الدوال المراد تنفيذها على العنصر المطابق.
jQuery.queue( element, queueName, newQueue )
أُضيف مع الإصدار: 1.3.
element
عنصر DOM الذي يراد تعديل الطابور المرتبط به.
queueName
سلسلة نصية تحتوي على اسم الطابور. القيمة الافتراضيَّة هي fx وهو اسم طابور التأثيرات القياسي.
newQueue
مصفوفةٌ تحتوي على الدوال التي يراد أن تحلَّ مكان الدوال المنتظرة في الطابور.
jQuery.queue( element, queueName, callback )
أُضيف مع الإصدار: 1.3.
element
عنصر DOM الذي يراد تعديل الطابور المرتبط به.
queueName
سلسلة نصية تحتوي على اسم الطابور. القيمة الافتراضيَّة هي fx وهو اسم طابور التأثيرات القياسي.
callback
دالةٌ من الشكل Function() تمثِّل الدالة الجديدة التي يراد إضافتها إلى الطابور.
ملاحظة: هذا التابع ذو مستوًى منخفض، لذا يجب عليك استعمال التابع .queue() عوضًا عنه.
يمكن أن يرتبط مع كل عنصر طابورٌ واحدٌ من الدوال أو أكثر في jQuery. يستخدم في أغلب التطبيقات طابورٌ واحدٌ فقط يدعى fx. الغرض من استعمال الطوابير هو تطبيق سلسلة من الأحداث على عنصر، إذ تجري عمليَّة الاستدعاء بشكل غير متزامن دون مقاطعة أو إيقاف تنفيذ التطبيق.
يوفر التابع jQuery.queue() إمكانيَّة تعديل أيِّ طابورٍ بشكل مباشر؛ فيمكن مثلًا إضافة دالة رد نداء في نهاية طابور محدَّد بتمرير هذه الدالة إلى التابع.
انتبه عند إضافة دوال إلى طابور باستعمال التابع jQuery.queue() إلى أنَّه يجب التأكُّد من استعمال التابع jQuery.dequeue() في نهاية المطاف من أجل تنفيذ الدالة التي تنتظهر أن يحين دورها في الطابور.
أمثلة
وضع دالةٍ مخصَّصة في طابورٍ:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.queue مثالٌ عن استعمال التابع</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
اضغط هنا
<div></div>
<script>
$( document.body ).click(function() {
var divs = $( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 2000 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).addClass( "newcolor" );
jQuery.dequeue( this );
});
divs.animate({ left: "-=200" }, 500 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).removeClass( "newcolor" );
jQuery.dequeue( this );
});
divs.slideUp();
});
</script>
</body>
</html>
تعيين مصفوفة فارغة لتحلَّ مكان محتويات الطابور فيُمسح بذلك محتواه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.queue مثالٌ عن استعمال التابع</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="start">ابدأ</button>
<button id="stop">توقف</button>
<div></div>
<script>
$( "#start" ).click(function() {
var divs = $( "div" )
.show( "slow" )
.animate({ left: "+=200" }, 5000 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).addClass( "newcolor" );
jQuery.dequeue( this );
});
divs.animate({ left: "-=200" }, 1500 );
jQuery.queue( divs[ 0 ], "fx", function() {
$( this ).removeClass( "newcolor" );
jQuery.dequeue( this );
});
divs.slideUp();
});
$( "#stop" ).click(function() {
jQuery.queue( $( "div" )[ 0 ], "fx", [] );
$( "div" ).stop();
});
</script>
</body>
</html>