الفرق بين المراجعتين ل"jQuery/toggle event"
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.toggle()</code> في jQuery}}</noinclude> == <code>.toggle( ha...') |
ط (استبدال النص - 'jQuery/preventDefault' ب'jQuery/event/preventDefault') |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
| − | <noinclude>{{DISPLAYTITLE:التابع <code>.toggle()</code> في jQuery}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:التابع <code>.toggle()</code> في jQuery}}</noinclude> |
| − | |||
== <code>.toggle( handler, handler [, handler ] )</code> == | == <code>.toggle( handler, handler [, handler ] )</code> == | ||
| سطر 7: | سطر 6: | ||
=== الوصف === | === الوصف === | ||
| − | ربط معالجين أو أكثر بالعناصر المتطابقة، لتنفيذها | + | ربط معالجين أو أكثر بالعناصر المتطابقة، لتنفيذها بالتناوب. |
=== <code>.toggle( handler, handler [, handler ] )</code> === | === <code>.toggle( handler, handler [, handler ] )</code> === | ||
| سطر 19: | سطر 18: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
| − | دالة على الشكل [[JavaScript/Function|Function]]( Event eventObject )، تعمل كمعالج إضافي للتبديل | + | دالة على الشكل [[JavaScript/Function|Function]]( Event eventObject )، تعمل كمعالج إضافي للتبديل بينها بعد النقر. |
| − | ملاحظة: أهمل هذا الشكل للتابع مع الإصدار jQuery [http://api.jquery.com/category/version/1.8 1.8] وأزيل مع الإصدار jQuery [http://api.jquery.com/category/version/1.9 1.9]. يوفر jQuery أيضًا تابع حركة يسمى <code>[[jQuery/toggle|.toggle()]]</code> يبدل من حالة رؤية العناصر. تعتمد الحركة أو خاصية الحدث على مجموعة من الوسائط المُمررة. | + | '''ملاحظة مهمة''': أهمل هذا الشكل للتابع مع الإصدار jQuery [http://api.jquery.com/category/version/1.8 1.8] وأزيل مع الإصدار jQuery [http://api.jquery.com/category/version/1.9 1.9]. يوفر jQuery أيضًا تابع حركة يسمى <code>[[jQuery/toggle|.toggle()]]</code> يبدل من حالة رؤية العناصر. تعتمد الحركة أو خاصية الحدث على مجموعة من الوسائط المُمررة. |
| − | يربط التابع <code>.toggle()</code> معالج | + | يربط التابع <code>.toggle()</code> معالج بالحدث <code>click</code>، لذلك تنطبق القواعد الموضحة في عملية تشغيل <code>click</code> هنا أيضًا. |
على سبيل المثال، تأمل شيفرة HTML هذه:<syntaxhighlight lang="html"> | على سبيل المثال، تأمل شيفرة HTML هذه:<syntaxhighlight lang="html"> | ||
| سطر 41: | سطر 40: | ||
المعالج الثاني للتابع .toggle() المُستدعى. | المعالج الثاني للتابع .toggle() المُستدعى. | ||
المعالج الأول للتابع .toggle() المُستدعى. | المعالج الأول للتابع .toggle() المُستدعى. | ||
| − | </syntaxhighlight>إذا اُدخِل أكثر من معالجين، سيبدل التابع <code>.toggle()</code> | + | </syntaxhighlight>إذا اُدخِل أكثر من معالجين، سيبدل التابع <code>.toggle()</code> بينها. على سبيل المثال، إذا كان هناك ثلاثة معالجات، فسيُستدعى أول معالج في أول نقرة، ثم في النقرة الرابعة، ثم في السابعة، وهكذا. |
| − | + | من السهل نسبيًا تنفيذ نفس السلوك يدويًا، وقد يكون ذلك ضروريًا إذا ثبت أن الافتراضات المضمنة في <code>.toggle()</code> محدودة. على سبيل المثال، لا يمكن ضمان أن يعمل <code>.toggle()</code> بشكل صحيح إذا طُبِّق مرتين على نفس العنصر. ولما كان <code>.toggle()</code> يستخدم معالج <code>click</code> داخليًا للقيام بعمله، فيجب فك ارتباط الحدث <code>click</code> لإزالة السلوك المرتبط بالتابع <code>.toggle()</code>، لكن ذلك سيؤثر أيضًا على معالجات الحدث <code>click</code> الأخرى. يستدعي التنفيذ أيضًا التابع [[jQuery/event/preventDefault|<code>.preventDefault()</code>]] على الحدث، لذلك لا يمكن تتبع الروابط أو النقر على الأزرار إذا اُستُدعيَ التابع<code>.toggle()</code> على العنصر. | |
=== أمثلة === | === أمثلة === | ||
| − | تبديل نمط على خلايا الجدول | + | تبديل نمط على خلايا الجدول (لا ينصح باستخدامه. استخدم التابع <code>[[jQuery/toggleClass|.toggleClass()]]</code> بدلاً منه):<syntaxhighlight lang="jquery"> |
$( "td" ).toggle( | $( "td" ).toggle( | ||
function() { | function() { | ||
المراجعة الحالية بتاريخ 11:02، 1 يوليو 2018
.toggle( handler, handler [, handler ] )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
ربط معالجين أو أكثر بالعناصر المتطابقة، لتنفيذها بالتناوب.
.toggle( handler, handler [, handler ] )
أُضيف مع الإصدار: 1.0، وأٌهمل مع الإصدار: 1.8، واُُزيل مع الإصدار: 1.9.
handler
دالة على الشكل Function( Event eventObject )، تنفَّذ عند النقر على العنصر كل مرة زوجية.
handler
دالة على الشكل Function( Event eventObject )، تنفَّذ عند النقر على العنصر كل مرة فردية.
handler
دالة على الشكل Function( Event eventObject )، تعمل كمعالج إضافي للتبديل بينها بعد النقر.
ملاحظة مهمة: أهمل هذا الشكل للتابع مع الإصدار jQuery 1.8 وأزيل مع الإصدار jQuery 1.9. يوفر jQuery أيضًا تابع حركة يسمى .toggle() يبدل من حالة رؤية العناصر. تعتمد الحركة أو خاصية الحدث على مجموعة من الوسائط المُمررة.
يربط التابع .toggle() معالج بالحدث click، لذلك تنطبق القواعد الموضحة في عملية تشغيل click هنا أيضًا.
على سبيل المثال، تأمل شيفرة HTML هذه:
<div id="target">
انقر هنا
</div>
يمكن بعد ذلك ربط معالجات الأحداث بالعنصر <div>
$( "#target" ).toggle(function() {
alert( "المعالج الأول للتابع .toggle() المُستدعى." );
}, function() {
alert( "المعالج الثاني للتابع .toggle() المُستدعى.." );
});
عند النقر على العنصر بشكل متكرر، تتبدل الرسائل:
المعالج الأول للتابع .toggle() المُستدعى.
المعالج الثاني للتابع .toggle() المُستدعى.
المعالج الأول للتابع .toggle() المُستدعى.
المعالج الثاني للتابع .toggle() المُستدعى.
المعالج الأول للتابع .toggle() المُستدعى.
إذا اُدخِل أكثر من معالجين، سيبدل التابع .toggle() بينها. على سبيل المثال، إذا كان هناك ثلاثة معالجات، فسيُستدعى أول معالج في أول نقرة، ثم في النقرة الرابعة، ثم في السابعة، وهكذا.
من السهل نسبيًا تنفيذ نفس السلوك يدويًا، وقد يكون ذلك ضروريًا إذا ثبت أن الافتراضات المضمنة في .toggle() محدودة. على سبيل المثال، لا يمكن ضمان أن يعمل .toggle() بشكل صحيح إذا طُبِّق مرتين على نفس العنصر. ولما كان .toggle() يستخدم معالج click داخليًا للقيام بعمله، فيجب فك ارتباط الحدث click لإزالة السلوك المرتبط بالتابع .toggle()، لكن ذلك سيؤثر أيضًا على معالجات الحدث click الأخرى. يستدعي التنفيذ أيضًا التابع .preventDefault() على الحدث، لذلك لا يمكن تتبع الروابط أو النقر على الأزرار إذا اُستُدعيَ التابع.toggle() على العنصر.
أمثلة
تبديل نمط على خلايا الجدول (لا ينصح باستخدامه. استخدم التابع .toggleClass() بدلاً منه):
$( "td" ).toggle(
function() {
$( this ).addClass( "مُحدد" );
}, function() {
$( this ).removeClass( "مُحدد" );
}
);