10 JQuery Snippets كل مصمم يجب أن يعرف

يستخدم jQuery على الآلاف من آلاف صفحات الويب. إنها واحدة من أكثر المكتبات شيوعًا لإدراجها في الصفحات ، وهي تجعل معالجة DOM مهمة سريعة.

بالطبع ، جزء من شعبية jQuery هو بساطتها. يبدو أننا يمكن أن نفعل أي شيء تقريبا نحب مع هذه المكتبة القوية.

بالنسبة إلى جميع الخيارات المتاحة لنا ، هناك بعض المقتطفات التي نميل إلى العودة إليها مرارًا وتكرارًا. اليوم ، أود أن أقدم لك 10 مقتطفات يستخدمها الجميع ، وهم من المبتدئين إلى معلّمي الموقع ، مرارًا وتكرارًا.

1) العودة إلى أعلى الزر

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

//Create an anchor tag
Back to top

كما يمكنك أن ترى استخدام الدالات المتحركة و scrollTop في jQuery لا نحتاج إلى مكون إضافي لإنشاء تمرير بسيط إلى أعلى صورة متحركة.

من خلال تغيير قيمة scrollTop ، يمكننا تغيير المكان الذي نريد أن ينتقل إليه شريط التمرير ، وفي حالتي استخدمت قيمة 0 لأنني أريد أن أذهب إلى أعلى الصفحة ، ولكن إذا أردت الحصول على إزاحة قدرها 100 بكسل ، فيمكنني فقط اكتب 100 بكسل في الدالة.

لذلك كل ما نقوم به بالفعل هو تحريك جسم وثيقتنا على مدار 800 مللي ثانية حتى يتم تمريرها إلى أعلى المستند.

2) التحقق مما إذا تم تحميل الصور

$(‘img’).load(function() {
console.log(‘image load successful’);
});

في بعض الأحيان ، تحتاج إلى التحقق مما إذا كانت الصور الخاصة بك محملة بالكامل حتى تتمكن من متابعة البرامج النصية الخاصة بك ، يمكن لهذا المقتطف ذو الأسطر الثلاثة jQuery القيام بذلك بسهولة.

يمكنك أيضًا التحقق مما إذا تم تحميل صورة معينة عن طريق استبدال علامة img بمعرف أو فصل دراسي.

3) إصلاح الصور المكسورة تلقائيا

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

من حين لآخر يكون لدينا أوقات يكون فيها لدينا روابط صور متقطعة على موقعنا الإلكتروني واستبدالها واحدة تلو الأخرى ليس بالأمر السهل ، لذا فإن إضافة هذه الشفرة البسيطة يمكن أن يوفر عليك الكثير من الصداع.

حتى إذا لم يكن لديك أي روابط معطلة ، فهذا لا يلحق أي ضرر.

4) تبديل الطبقة على تحويم

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

عادةً ما نرغب في تغيير مرئي لعنصر قابل للنقر على صفحتنا عندما يمرر المستخدم فوقها وهذا مقتطف jQuery يفعل ذلك فقط ، فهو يضيف فئة إلى عنصرك عندما يحوم المستخدم وعندما يوقفه المستخدم يزيل الصف ، لذلك كل ما عليك فعله هو إضافة الأنماط الضرورية في ملف CSS.

5) تعطيل حقول الإدخال

$('input[type="submit"]').attr("disabled", true);

في بعض الأحيان قد ترغب في أن يتم تعطيل زر الإرسال الخاص بنموذج أو حتى أحد مدخلات النص الخاصة به حتى يقوم المستخدم بإجراء معين (راجع مربع الاختيار "لقد قرأت الشروط" على سبيل المثال) وينجز سطر التعليمات البرمجية هذا ذلك؛ فهي تضيف السمة المُعطلة إلى مدخلاتك حتى تتمكن من تمكينها عندما تريد ذلك.

للقيام بذلك كل ما عليك القيام به هو تشغيل وظيفة removeAttr على المدخلات مع تعطيل كمعلمة:

$('input[type="submit"]').removeAttr("disabled”);

6) وقف تحميل الروابط

$(‘a.no-link').click(function(e){
e.preventDefault();
});

في بعض الأحيان لا نريد أن تنتقل الارتباطات إلى صفحة معينة أو حتى إعادة تحميلها ، ونريدهم أن يفعلوا شيئًا آخر مثل تشغيل نص آخر ، وفي هذه الحالة ، ستعمل هذه الشفرة على خدعة منع الإجراء الافتراضي.

7) تبديل تتلاشى / الشريحة

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});

// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

الشرائح و "التلاشي" هي شيء نستخدمه كثيرًا في الرسوم المتحركة باستخدام jQuery ، وأحيانًا نرغب فقط في إظهار عنصر عند النقر فوق شيء ما ، ومن أجل ذلك ، فإن أساليب fadeIn و slideDown مثالية ، ولكن إذا أردنا ظهور هذا العنصر في النقرة الأولى و ثم تختفي على الثاني هذه القطعة من التعليمات البرمجية ستعمل على ما يرام.

8) أكورديون بسيط

// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});

من خلال إضافة هذا النص البرمجي ، كل ما تحتاج إليه بالفعل على صفحتك هو HTML اللازم ، فاحصل على هذا العمل.

كما ترون في هذا المقتطف أغلقت جميع الألواح في الأكورديون لدينا ، ثم في حدث النقر ، قمت بعمل المحتوى المرتبط بتحول شريحة الرأس هذا ، وكل الشرائح الأخرى تنزلق. إنها طريقة بسيطة للحصول على أكورديون سريع.

9) جعل اثنين من divs نفس الارتفاع

$(‘.div').css('min-height', $(‘.main-div').height());

في بعض الأحيان تريد أن يكون قسمين بنفس الارتفاع بغض النظر عن المحتوى الذي بهما ، هذا المقتطف الصغير يمكّن ذلك ؛ في هذه الحالة ، يتم ضبط الحد الأدنى للارتفاع ، مما يعني أنه يمكن أن يكون أكبر من div الرئيسي ولكن ليس أصغر. هذا شيء عظيم للبناء مثل المواقع.

10) جردت الحمار الوحشي قائمة غير مرتبة

$('li:odd').css('background', '#E8E8E8’);

وباستخدام هذا المقتطف الصغير ، يمكنك بسهولة إنشاء قوائم غير مرتبة من حمار وحشي مخططة ، وهذا يضع الخلفية التي تحددها في كل عنصر قائمة فردي بحيث يمكنك وضع القائمة الافتراضية للأخرى حتى في ملف CSS الخاص بك. يمكنك إضافة هذا المقتطف إلى أي نوع من العلامات ، من الجداول إلى الأقسام العادية ، أي شيء تريد أن يتم تجريده من zebra.

استنتاج

هذه هي قطع شفرة jQuery أجد نفسي أستخدمها مرارًا وتكرارًا في مشروعاتي. آمل أن تضع إشارة على هذه الصفحة وتعود عندما تحتاج إلى أحد هذه المقتطفات.

ما هي مقتطفات jQuery التي تعتمد عليها؟ هل لديك رمز أفضل لهذه السيناريوهات؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، صورة مفيدة عبر Shutterstock.