چند نکته از جکوری که باید بدانید

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

1- یکسان کردن ارتفاع چندین المنت (div)

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

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

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

کدهای بالا ابتدا تمامی المنت هایی را که دارای کلاس column می باشند را انتخاب می کند و با استفاده از تابع each تمامی آنها را پیمایش کرده وارتفاع  المنتی را که دارای بیشتریت ارتفاع است گرفته و در نهایت آن را برای تمامی المنت های دارای کلاس coumn تنظیم میکند .

2- بازکردن لینک های مورد نظر در طفحه ای دیگر

گاهی ممکن است نیاز داشته باشیم که تمامی پیوند هایی را که به سایتی غیر از سایت غیر جاری اشاره می کنند در یک پنجره / تب جدید باز کنیم ، برای این مورد هم می توان از جکوری به صورت زیر کمک گرفت :

$('a[href^="http"]').attr('target','_blank');
$('a[href^="//"]').attr('target','_blank');
$('a[href^="'+window.location.origin+'"]').attr('target','_self');

 

3- بررسی وضعیت لود شده عکس ها

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

$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});

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

در بعضی فرم ها نیاز داریم دکمه ارسال (submit)  را غیر فعال کنیم ، نمونه آن را در سایت های مختلف دیده ایم که تا چک باکس تحت عنوان " قوانین را قبول دارم " انتخاب نشود دکمه ارسال فرم غیر فعال است .با استفاده از تابع prop و تعیین خاصیت disable برابر true می توان تمامی فیلد های مورد نظر را غیر فعال کنیم .

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

5 - فرستان کابر به بالای صفحه

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

$('a.top').click(function (e) {

  e.preventDefault();

  $(document.body).animate({scrollTop: 0}, 800);

});

با استفاده مقدار دهی scrollTop به عدد صفر کاربر به ابتدای صفحه مورد نظر منتل می شود . همچنین از تابع animate برای متحرک سازی آن مورد استفاده قرار میگیرد .


توسط : عثمان رحیمی  3 ماه قبل ، شنبه 2 آبان 1394 ساعت 12:14  0  1847

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط