۱۰ قطعه کد جی کوئری که هر طراحی وبی باید بداند

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

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

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

دکمه برگشت به بالا :

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>

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

با تغییر مقدار scrollTop ما می توانیم مکانی که می خواهیم صفحه در آنجا متوقف شود را تغییر دهیم ، و با دادن مقدار ۰ می توانیم اسکرول را با بالاترین نقطه صفحه ببریم .

با تغییر مقدار دوم تابع animate سرعت اسکرول شدن را کم یا زیاد کنیم .

بررسی لود شدن عکس :

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

خیلی وقت ها شما نیاز دارید عکس هایتان را بررسی کنید تا مطمئن شوید کامل لود شده اند یا نه .

با این سه خط کد شما به راحتی می توانید این کار را انجام دهید .

شما همچنین می توانید با جایگزین کردن تگ img همراه با class یا id ، عکس خاصی را مورد بررسی قرار دهید .

جایگزین عکس های خراب به صورت اتوماتیک :

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

گهگاهی ما برای تغییر عکس های خراب در سایت ، نیاز به تغییر آن ها با عکس دیگری داریم که این کار راحتی نیست .

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

حتی اگر شما هیچ عکس خرابی در سایتتان ندارید ، این قطعه کد آسیبی به سایتتان نمیزند .

اضافه و حذف کردن class در ایونت hover :

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

با این قطعه کد زمانی که شما ماوس را روی عنصری با کلاس btn ببرید (hover کنید) کلاسی با نام hover به عنصر شما اضافه می شود .

و بعد از آنکه ماوس را از روی عنصر بردارید کلاس hover از آن حذف میشود .

شما می توانید با اضافه کردن این کلاس ، استایل های خود را در css نوشته و به عنصر خود مرتبط نمایید .

غیر فعال کردن فیلدهای input :

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

ممکن است شما بخواهید دکمه ارسال یک فرم یا یکی از input های موجود در آن را غیر فعال کنید ، تا زمانی که کاربر یک عمل خاص انجام دهد .

به طور مثال ، پر کردن چیزی یا انتخاب “شرایط را خوانده ام” .

این قطعه کد ویژگی disable را به ورودی شما اضافه میکند و هر زمان که شما خواستید می توانید این ویژگی را حذف نمایید .

برای این کار هم شما باید تابع removeAttr را مانند قطعه کد زیر استفاده کنید :

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

توقف بارگذاری لینک ها :

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

fade و slide در حالت رفت و برگشت :

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

توابع fade و slide در افکت هایی که به صورت انیمیشنی در میکنیم بسیار استفاده میشوند .

ما میتوانیم این توابع را به صورت تک تک ، مانند fadeIn ، fadeout ، slideDown و slideUp استفاده کنیم .

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

آکاردئون ساده :

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

همانطور که در کد بالا می بینید ابتدا تمام پنل ها در آکاردئون ما بسته شده اند .

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

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

دو div هم ارتفاع :

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

گاهی اوغات شما می خواهید دو div بدون در نظر گرفتن محتوای داخل آن ها از نظر ارتفاع یک اندازه باشند .

این روش برای طراحی های flat بیشتر قابل استفاده خواهد بود ، چون اندازه div ها در صفحه با هم برابر خواهند بود .

ul های قالب بندی نشده گورخری :

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

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

شما می توانید به صورت پیش فرض یک رنگ را برای عنصر خود انتخاب کنید و با این کد یکی در میان رنگی که مد نظر دارید ، به رنگی که در کد خود داده ای تغییر دهید .