گاهی در صفحات وب نیاز داریم تا مختصات یک عنصر را نسبت به مبدا سند html بدست آوریم و از آن برای مشخص کردن موقعیت عناصر صفحه وب، نظیر دکمه go to top استفاده نماییم . ازاین رو درجلسه دهم از آموزش گام به گام جی کوئری قصد داریم تا شما را با متد offset و نحوه استفاده از آن آشنا سازیم . با تیم طراحی سایت اصفهان وب یار همراه باشید.
متد offset jquery
معنای تخصصی واژه offset، فاصله از مبدأ، فاصله ی میان یک مکان و مکان دیگر در حافظه ی کامپیوتر می باشد .
متد offset در جی کوئری میتواند بر روی عنصر انتخاب شده به دو صورت زیر عمل کند :
مختصات آفست عنصر انتخاب شده را نسبت به سند html تنظیم می کند.
مختصات آفست (top , left) عنصر انتخاب شده را نسبت به سند بازمی گرداند.
ساختار متد offset برای تنظیم مختصات افست :
$(selector).offset({top:value,left:value}) ;
{top:value,left:value} :
در هنگام تنظیم افست ، استفاده از این پارامتر اجباری است . این مختصات بالا و چپ در پیکسل را مشخص می کند.
ساختار متد offset برای بازگرداندن مختصات افست:
$(selector).offset();
ساختار متد offset برای تنظیم مقادیر مختصات با استفاده از یک تابع:
این یک پارامتر اختیاری است. این یک تابع را مشخص می کند که یک شیء حاوی مختصات بالا و چپ را باز می کند.
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>.");
});
});
ممنون هستیم ازهمراهی شما دوستان عزیز.
اگر با وجود مطالعه مطالب بیان شده در این آموزش احساس کردید که سوالی در این باره ذهن شما را درگیر کرده و یا نیاز به توضیحات بیشتری دارید کارشناسان وب یار می توانند پاسخگوی شما باشند. همچنین خوشحال می شویم از صفحه اینستاگرام وب یار هم دیدن فرمائید.
