10 فن jQuery که هر طراح سایت باید بداند

10 فن jQuery که هر طراح سایت باید بداند

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

البته قسمتی از مشهور بودن آن بدلیل سادگی آن است ولی به نظر می رسد تقریبا هر آنچه نیاز باشد را می توانیم با آن پیاده سازی کنیم.

برای بسیاری از ما قطعه کدها و عملکردهایی است که متناوبا مدتی بعد مجددا به آن نیاز پیدا می کنیم. امروز 10 قطعه کد که استفاده بسیاری دارد را معرفی می کنم.

 

1-دکمه برگشتن به ابتدای صفحه

 

 

//بازگشت به بالای صفحه 

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

//دکمه ای برای بالابردن صفحه
رفتن به بالا

 

با استفاده از این قطعه کد بدون استفاده از کتابخانه های انیمیشن و غیره تنها با تابع animate موجود در jQuery قابلیت انیمیشن به بالای صفحه پیاده شده است و صفحه طی مدت 800 میلی ثانیه به بالاترین موقعیت (0پیکسل) می رسد.

 

 

2-بررسی اینکه تصاویر Load شده باشند

 

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

 

بعضی مواقع باید مطمئن باشید تصاویرتان کامل بارگذاری شده باشند تا ادامه اسکریپت را انجام دهید.

 

3-درست کردن تصاویری که Load نشده یا خطا داده اند

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

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

 

4-Toggle کردن کلاس وقتی که موس وارد یک المان می شود

 

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

 

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

 

 

5-غیرفعال کردن فیلدهای ورودی

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

 

زمانی که باید کنترلهای فرم غیرفعال باشند تا کاربر عمل خاصی را انجام دهد (برای مثال گزینه با قوانین سایت موافق است را بزند) بسیار مفید است. برای فعال کردن مجدد آن نیز تنها لازم است کد زیر را صدا بزنید:

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

6-متوقف کردن بارگذاری لینکها

 

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

با این کد شما میتوانید از بارگذاری لینک مذکور جلوگیری کنید و صفحه سایت با کلیک روی آن تنها اسکریپت شما را اجرا کند نه اینکه مجددا بار گذاری (refresh) شود.

 

7-حرکت بین المان ها با اسلاید و یا محو

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

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

 

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

9-دو قسمت (div) دارای یک سایز

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

بعضی وقتها می شود که به دو قسمت دقیقا برابر بدون توجه به اینکه محتویاتشان چیست نیاز پیدا می کنیم که با کد بالا قابل حصول است.


10-یک لیست گوره خری ساده

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

در ایجا به سادگی میتوان لیستی درست کرد که آیتم های آن یک در میان دارای پسزمینه های متفاوتی باشند.

 

بازدید: 859

نظرات

ارسال پاسخ