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

در این بخش از آموزش JQuery، متد position را بررسی می کنیم. این متد یکی از ابزارهای کاربردی jQuery برای به دست آوردن موقعیت یک عنصر در صفحه است و در ساخت رابط های کاربری تعاملی، نمایش پیام ها، چیدمان اجزا و عیب یابی صفحه به کار می آید. اگر لازم باشد بدانید یک عنصر نسبت به والد خود از کجا شروع می شود، position می تواند اطلاعات مورد نیاز را در اختیار کد شما قرار دهد.

متد position مختصات قرارگیری یک عنصر را نسبت به عنصر والد آن، یعنی parent، تعیین کرده و به برنامه برمی گرداند. نتیجه معمولا شامل دو مقدار عددی با نام های top و left است. مقدار top فاصله عنصر از بالای مرجع موقعیت و مقدار left فاصله آن از سمت چپ همان مرجع را نشان می دهد. اعداد بازگشتی بر حسب پیکسل هستند و به صورت عدد در اختیار جاوااسکریپت قرار می گیرند، نه رشته ای همراه با واحد px.

مقدار top فاصله عمودی عنصر را از لبه بالایی عنصر مرجع مشخص می کند و مقدار left فاصله افقی را از لبه چپ آن نشان می دهد. برای نمونه، اگر مقدار top برابر 24 باشد، موقعیت بالایی عنصر 24 پیکسل از مرجع فاصله دارد. این مقادیر برای محاسبه جایگاه نسبی عناصر مفیدند، اما نباید آنها را با مختصات عنصر نسبت به کل سند یا پنجره مرورگر اشتباه گرفت.

در توضیح ابتدایی این متد معمولا گفته می شود مختصات بر اساس parent محاسبه می شود. از نظر فنی، jQuery موقعیت عنصر را نسبت به عنصر offset والد محاسبه می کند؛ یعنی نزدیک ترین والد مرتبطی که موقعیت آن در چیدمان صفحه مبنای محاسبه قرار می گیرد. اگر هیچ والدی با موقعیت تعریف شده وجود نداشته باشد، مرورگر از مرجع پیش فرض استفاده می کند. به همین دلیل، نتیجه ممکن است با مختصات نسبت به والد مستقیم تفاوت داشته باشد.

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

$("selector").position();

selector بخشی از کد است که مشخص می کند کدام عنصر صفحه بررسی شود. انتخابگر می تواند نام تگ، کلاس یا شناسه باشد؛ برای مثال، $("p") همه پاراگراف ها را انتخاب می کند و $("#notice") عنصری را انتخاب می کند که شناسه آن notice است. متد position یک شیء شامل مقدارهای top و left برمی گرداند. اگر انتخابگر چند عنصر را پیدا کند، jQuery موقعیت اولین عنصر مجموعه را برمی گرداند؛ بنابراین برای اندازه گیری هر عنصر باید جداگانه روی اعضای مجموعه پیمایش کنید.

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

$("button").click(function() {
  var position = $("p").position();
  alert("Top: " + position.top + " Left: " + position.left);
});

$("button").click(function() { ... }); برای رویداد کلیک دکمه یک تابع تعریف می کند. هر بار که کاربر روی دکمه کلیک کند، دستورهای داخل تابع اجرا می شوند. این روش کمک می کند اندازه گیری موقعیت تنها در زمان نیاز انجام شود.

در خط var position = $("p").position(); اولین پاراگراف صفحه انتخاب می شود و متد position روی آن اجرا می شود. نتیجه در متغیری به نام position ذخیره می شود تا در ادامه بتوان به مختصات آن دسترسی داشت.

در پایان، دسترسی به position.top و position.left مقدارهای عمودی و افقی را می خواند. عبارت alert این اعداد را برای کاربر نشان می دهد. برای محصول نهایی می توانید به جای پیام مرورگر، مختصات را داخل یک بخش از صفحه درج کنید.

گاهی لازم است بدانید کدام متد برای محاسبه مختصات مناسب تر است. position موقعیت عنصر را نسبت به عنصر offset والد می سنجد، در حالی که offset موقعیت عنصر را نسبت به سند صفحه برمی گرداند. بنابراین کاربرد این دو متد یکسان نیست و جایگزین کردن آنها بدون توجه به مرجع اندازه گیری می تواند باعث محاسبه نادرست شود.

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

انتخابگر را محدود کنید. انتخاب $("p") ممکن است چندین پاراگراف را پیدا کند، اما position مختصات نخستین عضو را می دهد. برای جلوگیری از ابهام، از شناسه یا کلاس مشخص استفاده کنید؛ به ویژه در صفحه هایی که بخش های زیادی از محتوای متنی دارند.

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

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

از position برای نیاز درست استفاده کنید. اگر هدف شما یافتن جای عنصر نسبت به سند است، offset گزینه مناسب تری است. اگر لازم دارید عنصر را نسبت به یک مرجع مشخص جابه جا کنید، ابتدا رابطه والد و فرزند و ویژگی های CSS مربوط به position را بررسی کنید.

این متد استفاده ساده ای دارد، خروجی آن روشن است و برای اندازه گیری جایگاه نسبی عنصر نیاز به محاسبه دستی ندارد. دسترسی جداگانه به top و left نیز خواندن و استفاده از نتیجه را آسان می کند. در نمونه های آموزشی و پروژه هایی که از jQuery استفاده می کنند، position راهی سریع برای فهمیدن محل عنصر و ساخت تعامل های وابسته به چیدمان است.

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

متد position در jQuery راهی ساده برای دریافت موقعیت نسبی عنصر و خواندن مقدارهای top و left بر حسب پیکسل است. با انتخاب عنصر درست، شناخت تفاوت position و offset و توجه به تغییرات چیدمان می توانید از این متد در رابط های کاربری و محاسبات صفحه به درستی استفاده کنید. هنگام طراحی سایت نیز درک موقعیت عناصر به ساخت تعامل های دقیق تر و تجربه کاربری بهتر کمک می کند.