نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2509
تاریخ بروزرسانی ۸ فروردین ۱۴۰۱

متد offset در جی کوئری-درس دهم

آموزش جی کوئری:

گاهی در صفحات وب نیاز داریم تا مختصات یک عنصر را نسبت به مبدا سند html بدست آوریم و از آن برای مشخص کردن موقعیت عناصر صفحه وب، نظیر دکمه  go to top  استفاده نماییم . ازاین رو درجلسه دهم از آموزش گام به گام جی کوئری قصد داریم تا شما را با متد offset و نحوه استفاده از آن آشنا سازیم . با تیم طراحی سایت اصفهان وب یار همراه باشید.

 

متد offset jquery

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

متد offset در جی کوئری میتواند بر روی عنصر انتخاب شده به دو صورت زیر عمل کند :

  • مختصات آفست عنصر انتخاب شده را نسبت به سند html تنظیم می کند.
  • مختصات آفست (top , left) عنصر انتخاب شده را نسبت به سند بازمی گرداند.متد offset در جی کوئری

ساختار متد offset برای تنظیم مختصات افست :

$(selector).offset({top:value,left:value}) ;

{top:value,left:value} :

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

 

ساختار متد offset برای بازگرداندن مختصات افست:

$(selector).offset();

ساختار متد offset برای تنظیم مقادیر مختصات با استفاده از یک تابع:

$(selector).offset(function(index,currentoffset));

(Function (index,currentoffset:

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

index : موقعیت شاخص عنصر را در مجموعه باز می گرداند.

Currentoffset : مختصات فعلی عنصر انتخابی را باز می کند.

 

به مثال های زیر توجه کنید:

توصیه : سعی کنید پس از درک مثال ها یکبار آنها را اجرا کرده و خروجی را مشاهده نمایید .

مثال 1:

<!DOCTYPE html>
<html>
<head>
<title> آموزش متد افست با تیم وبیار</title>
<script src="آدرسی برای فراخوانی کتابخانه جی کوئری"></script>
<script> $(document).ready(function(){ $("button").click(function(){ var x = $("p").offset(); alert("Top: " + x.top + " Left: " + x.left); }); }); </script>
</head>
<body>
<p>آموزش گام به گام جی کوئری با تیم وبیار </p>
<button>برای بازگشت مختصات افست عنصر پاراگراف اینجا کلیک کنید</button>
</body>
</html>

 مثال2 :

<!DOCTYPE html>
<html>
<head>
<title> آموزش متد افست با تیم وبیار</title>
<script src="آدرسی برای فراخوانی کتابخانه جی کوئری"></script>
<script>
$(document).ready(function() {
$("div").click(function () {
var offset = $(this).offset();
$("#lresult").html("left offset: <span>" + offset.left + "</span>.");
$("#tresult").html("top offset: <span>" + offset.top + "</span>.");
});
});

ممنون هستیم ازهمراهی شما دوستان عزیز.

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

 

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.