التابع ‎‎.resize()‎‎ في jQuery

من موسوعة حسوب
مراجعة 12:32، 13 يونيو 2018 بواسطة جميل-بيلوني (نقاش | مساهمات) (إضافة محتويات الصفحة.)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

‎.resize( handler )‎

القيم المعادة

يعيد كائنًا من النوع jQuery.

الوصف

يربط هذا التابع معالج حدث معين مع الحدث resize في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.

‎.resize( handler )‎

أُضيف مع الإصدار: 1.0.

handler

دالة من الشكل Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.

‎.resize( [eventData ], handler )‎

أُضيف مع الإصدار: 1.4.3.

eventData

أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.

handler

دالة من الشكل Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.

‎.resize()‎

أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي معلامات.

هذا التابع هو اختصار للتابع ‎.on( "resize", handler )‎ في شكله الأول والثاني، واختصار للتابع ‎.trigger( "resize" )‎ في شكله الثالث.

يُرسل الحدث keydown إلى العنصر window عندما يتغير حجم نافذة المتصفح:

$( window ).resize(function() {
 $( "#log" ).append( "<div>استُدعي معالج الحدث بنجاح.</div>" );
});

كلما تغير حجم نافذة المتصفح، ستضاف الرسالة إلى العنصر <div id="log"‎> مرةً واحدةً أو أكثر وهذا يعتمد على المتصفح المستخدم.

لا يجب أن تعتمد الشيفرة في معالج الحدث resize على عدد المرات التي يُستدعى بها. هنالك طريقتين لتنفيذ وإرسال هذا الحدث وهما: إمَّا إرسال الأحداث resize باستمرار طالما كان حجم النافذة متغيرًا (وهو السلوك المعتمد في المتصفح Internet Explorer والمتصفحات التي تعمد على WebKit مثل Safari و Chrome)، أو إرسال الحدث resize مرة واحدة فقط في نهاية عملية تغيير الحجم (وهو السلوك المعتمد في بعض المتصفحات الأخرى مثل Opera).

ملاحظات إضافية

لما كان التابع ‎.resize()‎ اختزالٌ للتابع ‎.on( "resize", handler )‎، فمن الممكن استعمال ‎.off( "resize" )‎ لإزالة الحدث resize أي عملية معاكسة لما سبق.

أمثلة

إظهار عرض النافذة طالما يغيَّر حجمها (أو بعد تغيير الحجم):

$( window ).resize(function() {
 $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

مصادر