031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » jquery » متد offset در جی کوئری-درس دهم

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

تاریخ:۱ام مهر ۱۳۹۶
رعنا زارع
0
31

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

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

متد offset :

قبل از پرداختن به متد offset بهتر است بدانید معنای تخصصی واژه  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 : مختصات فعلی عنصر انتخابی را باز می کند.

برای واضح تر شدن آنچه درباره متد offset گفتیم به مثال های زیر توجه کنید :

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

مثال 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>.");

});                                             
});

</script>      

<style>

div { width:60px; height:60px; margin:5px; float:left; }

</style>

</head>

<body>

<p>Click on any square:</p>

<span id = "lresult"> </span>

<span id = "tresult"> </span>             

 <div style = "background-color:blue;"></div>

<div style = "background-color:pink;"></div>

<div style = "background-color:#123456;"></div>

<div style = "background-color:#f11;"></div>

</body>

</html>

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

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

درباره نویسنده :
رعنا زارع

مطالب مرتبط

متد before در جی کوئری

متد Before در جی کوئری – درس پانزدهم

متد Before  در جی کوئری جی کوئری یک کتابخانه ی جاوا اسکریپت سریع, کوچک و بسیار غنی می باشد. جی کوئری یک چارچوب از جاوا اسکریپت است که هدف آن آسان ساختن استفاده از کد های جاوا اسکریپت در طراحی سایت می باشد. با متد ها و قواعد دستوری جی کوئری که در آموزش های […]

آموزش متد clone() در جی کوئری

متد ()clone در جی کوئری -درس چهاردهم

آموزش جی کوئری – متد ()clone اگر برنامه نویس باشید و یا حتی با برنامه نویسی آشنایی اندکی داشته باشید حتما درک خواهید کرد که نوشتن قطعه کدی تکراری کسل کننده خواهد بود و شدت آن زمانی زیاد میشود که عنصر مورد نظری که قصد کپی کردن آن را دارید رویداد ها و پارامترهایی را […]

آموزش قواعد دستوری جی کوئری

دستورات زنجیره ای در جی کوئری-درس سیزدهم

دستورات زنجیره ای در جی کوئری: در جلسات قبلی درباره قواعد دستوری جی کوئری صحبت کردیم اما گاهی در نوشتن کدهای جی کوئری نیاز داریم تا برای یک عنصر چندین متد متفاوت به کار ببریم . اگر شما بخواهد متدها را به صورت جداگانه بنویسید و هر بار عنصر مورد نظر را دوباره فراخوانی کنید […]

متد data – متد removedata در جی کوئری-درس دوازدهم

آموزش گام به گام جی کوئری : گاهی طراحان سایت برای طراحی سایت نیاز دارند تا اطلاعاتی را از یک عنصر حذف کرده و یا بلعکس اطلاعاتی را به آن عنصر اضافه کرده و به صفحه بازگردانند . طراحان سایت برای انجام این گونه کارها در جی کوئری از متد data  و متد removedata استفاده […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید