سلام به شما دوستای خوب و عزیز ، امیدوارمکه حال شما خوب باشه و با اموزشهای ما همراه بمانید. امروز درمورد jquery باز هم مطالبی رو براتون اماده کردم امیدوارم که براتون مناسب باشه.
JqueryUI – Position
در این فصل به بررسی یکی از روش ابزارهای jqueryUi به نام متد position() خواهیم پرداخت. یک متد position() به شما اجازه می دهد تا موقعیت یک عنصر را با توجه به یک عنصر دیگر یا رویداد ماوس، تعیین کنید.
jQuery UI متد position() را از مرکزjQuery به نحوی گسترش می دهد که به شما اجازه می دهد که تا چگونگی موقعیت گذاری یک عنصر را به نحو دلخواه خود، توصیف کنید، درست همانطور که یک شخص را توصیف می کنید. به جای کار با اعداد، با لغات معنادار ( از قبیل چپ و راست) و روابط کار می کنید.
در زیر دستور مربوط به متد position() را مشاهده می کنید:
position( options )
در اینجا options از نوع Object می باشد و اطلاعاتی را ارائه می دهد که تعیین می کنند چگونه عناصر قرار گرفته در یک مجموعه در موقعیت خود قرار بگیرند. جدول زیر گزینه های مختلفی را ارائه می دهد که با این متد مورد استفاده قرار می گیرند:
Option
Description
my
این گزینه موقعیت عناصر در هم پیچیده را تعیین می کند ( آنهایی که مجددا موقعیت گذاری شده اند) تا با عنصر مورد نظر یا موقعیت همتراز شود. مقدار پیش فرض آن center است.
at
این گزینه از نوع String است و موقعیت عنصر هدف را در مقابل عناصری که مجددا موقعیت گذاری می شوند، تعیین می کند. مقادیر گزینه ی my را می گیرد. مقدار پیش فرض آن center است.
of
این پارامتر از نوع Selector یا Element یا jQuery یا Event است. موقعیت عنصر هدف را در مقابل عناصری که مجددا موقعیت گذاری می شوند، و یا یک نمونه Event که حاوی مختصات ماوس برای استفاده به عنوان موقعیت هدف است را تشخیص می دهد. مقدار پیش فرض آن null است.
collision
این گزینه از نوع String است و قوانین مربوط به گسترش عنصر ورای پنجره در هر راستایی، تعیین می کند. مقدار پیش فرض آن flip است.
using
این گزینه ساختاری است که عملکرد داخلی را، که موقعیت عنصر را تغییر می دهد، جایگزین می نماید. برای هر عنصر در هم پیچیده ای با یک آبجکت hash و پراپرتی های left و top فرا خوانده می شود، که این پراپرتی ها بر روی موقعیت محاسبه ی شده ی هدف تنظیم شده اند و عنصر به عنوان کانتکست عملکرد تنظیم شده است. مقدار پیش فرض آن null است.
within
این گزینه یک عنصر Selector یا Element یا jQuery می باشد و به شما اجازه می دهد تا تعیین کنید کدام عنصر به عنوان bouncing box برای تشخیص برخورد، استفاده شود. این امر در صورتی که نیاز باشد عنصر در یک بخش خاص از از صفحه ی شما فرار بگیرد، مفید می باشد. مقدار پیش فرض آن window است.
مثال:
مثال زیر استفاده از متد position را توضیح می دهد:
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: #b9cd6d;
}
#targetElement {
width: 300px;
height: 500px;
padding-top: 50px;
}
$(function () {
// Position the dialog offscreen to the left, but centered vertically
$(“#position1”).position({
my: “center”,
at: “center”,
of: “#targetElement”
});
$(“#position2”).position({
my: “left top”,
at: “left top”,
of: “#targetElement”
});
$(“#position3”).position({
my: “right-10 top+10”,
at: “right top”,
of: “#targetElement”
});
$(document).mousemove(function (event) {
$(“#position4”).position({
my: “left+3 bottom-3”,
of: event,
collision: “fit”
});
});
});
در این مثال مشاهده می کنیم که:
Box 1 در مرکز عنصر div ردیف شده ( به صورت افقی و عمودی).
Box 2 در بالای سمت چپ عنصر div ردیف شده است (به صورت افقی و عمودی).
Box 3 در گوشه ی سمت راست و در بالای پنجره نمابش داده می شود، اما برخی لایه ها را رها می کند، طوری که پیغام بیشتر به بیرون رانده می شود. این کار با استفاده از مقادیر افقی و عمودی my یا at انجام می شود.
برای Box 4 مقدار of به عنوان یک آبجکت رویداد تنظیم شده است. این یک رویداد است که با نشانگر در ارتباط است و با رویداد ماوس در ارتباط می باشد.
