10 تکنیک زبان JQUERY که طراحان وب سایت باید آنها را بدانند

مترجم :داریوش ببریان javascript تاریخ درج : 1394/07/25

امروزه زبان jQuery در میلیون ها صفحات وب سایت مورد استفاده قرار گرفته است. یکی از متداول ترین کتابخانه های زبان Javascript که در دنیا میتواند وجود داشته باشد. کار اصلی این زبان تغییر خصوصیت ها و مقادیر آبجکت ها در صفحات وب سایت یا همان DOM میباشد.

بنابراین دلیل موفقیت روز افزون این زبان کاملا گویا میباشد. تغییر خصوصیت های بسیاری از عناصر در داخل صفحه وب سایت.

اما در میان این همه از کدها و ترفندهایی که در این زبان وجود دارد امروز و در این مقاله طراحی سایت, به ده عدد آنها که در طراحی وب سایت مخصوصا در شرکت طراحی وب سایت اطلس وب کاربرد بسیار بالایی دارد اشاره مینماییم. در مقالات دیگر هم قصد داریم تا در زمینه سئو وب سایت مقاله هایی را نیز ارائه نماییم.

1 – دکمه ای برای برگشت به بالای صفحه

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

همان طور که میبینید میتوانید با این دستور ساده و استفاده از animation به راحتی به بالای صفحه برگردیم.

2 – بررسی لود شدن تصاویر در داخل صفحات

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

در بسیاری از مواقع لازم دارید تا متوجه شوید که آیا تصویر مربوطه به طور کامل در داخل صفحه وب لود شده است یا خیر و سپس با اطمینان بیشتری کارهای دیگر را انجام دهید.

3 – اطلاع تصاویری که به طور کامل بارگزاری نشده اند

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

با این کار میتوانیم تصاویری که به هر دلیلی در داخل صفحه لود نشده اند را شناسایی نموده و یک تصویر پیشفرضی به جای آنها نمایش دهیم تا طراحی صفحه وب سایت مورد آسیب قرار نگیرد.

حتی اگر تمامی تصاویر به صورت درست هم در داخل صفحه لود شده باشند قرار دادن این کد jQuery آسیبی به صفحه وب سایت شما وارد نخواهد آورد.

4 – تغییر کلاس های آبجکت ها در حالت Hover

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

در بسیاری از مواقع لازم داریم تا آبجکت ها با بردن و برداشتن موس کاربر خصوصیت هایشان تغییر پیدا نماید که با این دستور ساده در زبان jQuery میتوانیم چنین کاری را انجام دهیم. این دستور میتواند با بردن موس کلاس مورد نظر را به آبجکت داده و با برداشتن موس کلاس مورد نظر را حذف نماید.

5 – غیر فعال نمودن فرم ها

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

در بعضی از موارد لازم دارید تا کاربر بر روی دکمه submit فرمی کلیک نموده تا یکی دیگر از آبجکت های فرم داخل آن غیر فعال گردد. با کد بالا میتوانید خصوصیت disabled را به آن اضافه نموده و یا حتی توسط کد زیر میتوانید آن را از داخل آبجکت مربوطه حذف نمایید.

6 – غیر فعال نمودن قابلیت پیشفرض لینک

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

در بعضی از موارد لازم داریم تا لینک مورد نظر به صفحه یا فایل مشخصی نرود و به جای آن کد دیگری را اجرا نماییم. از کد بالا میتوانید چنین کاری را انجام دهید

7 – استفاده از افکت های Fade و Slide

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

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

استفاده از این افکت ها میتواند در برنامه نویسی صرفه جویی بسیار زیادی نماید.

8 – ساختن یک Accordion ساده

// 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;
});

با استفاده از کد بالا میتوانید یک منوی باز و بسته یا همان Accordion را در صفحات وب سایت طراحی و پیاده سازی نمایید.

9 – هم ارتفاع نمودن دو آبجکت یا div

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

در بسیاری از موارد لازم دارید تا دو div صرفنظر از اینکه چه آبجکت های دیگری در داخل آن میباشد یا خیر با یکدیگر هم ارتفاع باشند.

10 – تغییر خصوصیت رنگی لیست ها به صورت یک خط در میان

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

هر روز از مقاله های جدید طراحی سایت در کانال تلگرام ما با خبر شوید
0 تعداد بازدید

برای داشتن شغلی مطمئن روی لینک زیر کلیک کنید

آموزش طراحی سایت