همراهان گرامی رجیران سلام و عرض ادب خدمتش ما ، میخوام درمورد متد Sizabla() کمی توضیح بدم .
jQueryUI متد resizable() را برای تغییر اندازه ی هر عنصر در DOM می کند. این متد تغییر اندازه ی عنصری را که وقتگیر بود و کد HTML لازم داشت، بسیار ساده کرده است. متد resizable () یک آیکن در پایین صفحه و سمت راست نشان می دهد که برای تغییر اندازه می باشد.
ترکیب:
متد resizable() به دو شکل مورد استفاده قرار می گیرد:
$(selector, context).resizable (options) Method
$(selector, context).resizable (“action”, params) Method
متد $(selector, context).resizable (options)
متد resizable (options) اعلام می کند که یک عنصر HTML می تواند تغییر اندازه دهد. پارامتر option آبجکتی است که رفتار عناصر دخیل در تغییر اندازه را تعیین می کند.
ترکیب
$(selector, context).resizable (options);
در هنگام استفاده از آبجکت javascript، می توانید یک یا چند گزینه را ارائه دهید. اگر بیشتر از یک گزینه برای ارائه وجود داشته باشد، می توانید آنها را با استفاده از کاما از یکدیگر مجزا کنید، مانند ترکیب زیر:
$(selector, context).resizable({option1: value1, option2: value2….. });
جدول زیر گزینه هایی را ارائه می دهد که با این متد استفاده می شوند:
Option
Description
alsoResize
این گزینه از نوع Selector، jQuery یا عنصر DOM می باشد. این گزینه عناصری را نمایش می دهد که در هنگام تغییر اندازه ی آبجکت اصلی، این عناصر نیز تغییر اندازه می دهند. مقدار پیش فرض آن false می باشد.
animate
وقتی این گزینه روی true تنظیم باشد، در طول دروره ی تغییر اندازه، وقتی دکمه ی ماوس رها می شود، برای فعالسازی افکت های بصری استفاده می شود. مقدار پیش فرض آن false می باشد (بدون افکت).
animateDuration
این گزینه برای تنظیم مدت زمان افکت تغییر اندازه ( به هزارم ثانیه) استفاده می شود. این گزینه تنها زمانی استفاده می شود که گزینه ی animate روی true تنظیم باشد. مقدار پیش فرض آن “slow” می باشد.
animateEasing
این گزینه برای تعیین اینکه در هنگام استفاده از گزینه ی animate کدام easing به کار گرفته شود، استفاده می شود. مقدار پیش فرض آن “swing”. می باشد.
aspectRatio
این گزینه برای نشان دادن اینکه آیا نسبت ها را (طول و عرض) برای آیتم حفظ کنیم، به کار می رود. مقدار پیش فرض آن false می باشد.
autoHide
این گزینه برای پنهان کردن بزرگنمایی آیکن یا دسته ها استفاده می شود، به جز وقتی که ماوس روی آیتم قرار دارد. مقدار پیش فرض آن false می باشد.
cancel
این گزینه برای جلوگیری از تغییر اندازه روی عناصر تعیین شده استفاده می شود. مقدار پیش فرض آن input,textarea,button,select,option می باشد.
containment
این گزینه برای محدود کردن عناصر تغییر اندازه در یک محدوده ی مشخص، استفاده می شود. مقدار پیش فرض آن false می باشد.
delay
این گزینه برای تنظیم تحمل یا به تعویق انداختن آن در هزارم ثانیه استفاده می شود. تغییر اندازه یا جایگزینی پس از آن شروع خواهد شد. مقدار پیش فرض آن ۰ است.
disabled
این گزینه وقتی روی true تنظیم شده باشد، مکانیزم تغییر اندازه را غیرفعال می سازد. ماوس دیگر عناصر را تغییر اندازه نخواهد داد تا اینکه با استفاده از resizable (“enable”) مکانیزم فعالسازی شود. مقدار پیش فرض آن false می باشد.
distance
با این گزینه، تغییر اندازه تنها زمانی آغاز می شود که ماوس به اندازه ی یک فاصله ( به پیکسل) حرکت می کند. به طور پیش فرض مقدار آن ۱ pixel می باشد. این گزینه می تواند در هنگام کلیک کردن روی یک عنصر، مانع تغییر اندازه ی ناخواسته شود.
ghost
وقتی این گزینه روی true تنظیم شده باشد، یک کمک کننده ی نیمه شفاف برای تغییر اندازه نشان داده می شود. این آیتم هنگام رها کردن ماوس حذف خواهد شد. مقدار پیش فرض آن false است.
grid
این گزینه از نوع Array [x, y] می باشد، که تعداد پیکسل هایی را نشان می دهد که عنصر طی حرکت ماوس به طور افقی و عمودی گسترش می دهد. مقدار پیش فرض آن false می باشد.
handles
این گزینه رشته ای است که نشان می دهد کدام اضلاع یا زاویه های مورد نظر می توانند تغییر اندازه داشته باشند. مقادیر پیش فرض آن e, s, se می باشند.
helper
این گزینه برای افزودن یک گروه CSS به شیوه ی تغییر اندازه ی عنصر استفاده می شود. وقتی تغییر اندازه انجام شد، یک عنصر
maxHeight
این گزینه برای تنظیم حداکثر ارتفاع مجاز برای تغییر اندازه استفاده می شود. مقدار پیش فرض آن null است.
maxWidth
این گزینه برای تنظیم حداکثر عرض مجاز برای تغییر اندازه استفاده می شود. مقدار پیش فرض آن null است.
minHeight
این گزینه برای تنظیم حداقل ارتفاع مجاز برای تغییر اندازه استفاده می شود. مقدار پیش فرض آن ۱۰ است.
minWidth
این گزینه برای تنظیم حداقل عرض مجاز برای تغییر اندازه استفاده می شود. مقدار پیش فرض آن ۱۰ است.
بخش بعدی چند مثال در مورد قابلیت تغییر اندازه به شما نشان خواهد داد.
کارکرد پیش فرض:
مثال زیر قابلیت تغییر اندازه را نشان می دهد که هیچ پارامتری به متد resizable() انتقال نمی یابد.
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
$(function () {
$(“#resizable”).resizable();
});
مرزهای مربع را درگ کنید تا تغییر اندازه انجام شود.
استفاده از ani,ate و ghost:
مثال زیر استفاده از دو گزینه ی animate و ghost را در عملکرد تغییر اندازه ی JqueryUI توضیح می دهد.
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-2, #resizable-3 {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
$(function () {
$(“#resizable-2”).resizable({
animate: true
});
$(“#resizable-3”).resizable({
ghost: true
});
});
مرز مربع را برای تغییر اندازه درگ کنید تا تاثیر گزینه های animate و ghost را مشاهده کنید.
استفاده از containment، minHeight و minWidth
مثال زیر استفاده از سه گزینه ی containment, minHeight و minWidth را در عملکرد تغییر اندازه ی JqueryUI توضیح می دهد.
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#container-1 {
width: 300px;
height: 300px;
}
#resizable-4 {
background-position: top left;
width: 150px;
height: 150px;
}
#resizable-4, #container {
padding: 0.5em;
}
$(function () {
$(“#resizable-4”).resizable({
containment: “#container”,
minHeight: 70,
minWidth: 100
});
});
مرزهای مربع را برای تغییر اندازه درگ کنید، بیشتر از حد مشخص شده نمی توانید تغییر اندازه دهید.
استفاده از delay، distance و autoHide
مثال زیر استفاده از سه گزینه ی delay,distance و autoHide را در عملکرد تغییر اندازه مربوط به JqueryUI توضیح می دهد.
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.square {
width: 150px;
height: 150px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 20px;
-right: 20px;
}
$(function () {
$(“#resizable-5”).resizable({
delay: 1000
});
$(“#resizable-6”).resizable({
distance: 40
});
$(“#resizable-7”).resizable({
autoHide: true
});
});
مرز مربع را برای تغییر اندازه درگ کنید، متوجه خواهید شد که:
اولین مربع پس از تاخیر ۱۰۰۰ms تغییر اندازه می دهد.
دومین مربع پس از اینکه ماوس ۴۰ px جابه جا شد، شروع به تغییر اندازه می کند.
اگر ماوس را روی سومین مربع حرکت دهید، آیکن بزرگنمایی ظاهر می شود.
استفاده از گزینه ی alsoResize:
مثال زیر استفاده از گزینه ی alsoResize را در عملکرد تغییر اندازه ی JqueryUI توضیح می دهد.
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-8, #resizable-9 {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
$(function () {
$(“#resizable-8”).resizable({
alsoResize: “#resizable-9”
});
$(“#resizable-9”).resizable();
});
برای تغییر اندازه مرزهای مربع را درگ کنید، متوجه می شوید که دومین مربع نیز با اولین مربع تغییر اندازه خواهد داد.
استفاده از aspectRatio، grid:
مثال زیر استفاده از گزینه های aspectRatio و grid را در تغییر اندازه ی JqueryUI توضیح می دهد:
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.square {
width: 150px;
height: 150px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 20px;
margin-right: 20px;
}
$(function () {
$(“#resizable-10”).resizable({
aspectRatio: 10 / 3
});
$(“#resizable-11”).resizable({
grid: [50, 20]
});
});
مرز مربع را درگ کنید تا آن را تغییر اندازه دهید، اولین مربع با مربع دوم با مقیاس ۳/۱۰ با نسبت هاب [۵۰,۲۰] تغییر اندازه می دهد.
متد $(selector, context).resizable (“action”, params)
متد resizable (“action”, params) می تواند عملی را روی عناصر قابل تغییر اندازه اجرا کند، به عنوان مثال عمل فعال کردن و یا غیر فعال کردن قابلیت تغییر اندازه. این عملکرد به عنوان یک رشته در اولین برهان تعیین می شود ( به عنوان مثال غیرفعال کردن و یا جلوگیری از تغییر اندازه). در جدول زیر عملکردهایی را که قابل انتقال هستند، بررسی کنید.
ترکیب:
$(selector, context).resizable (“action”, params);
جدول زیر عملکردهای مختلفی را ارائه می دهد که با این متد مورد استفاده قرار می گیرند:
Action
Description
destroy
این عملکرد قابلیت تغییر اندازه ی یک عنصر را کاملا از بین می برد و آن را به وضعیت pre-init خود بازمی گرداند.
disable
این عملکرد قابلیت تغییر اندازه ی یک عنصر را غیرفعال می سازد. این متد هیچ برهانی را نمی پذیرد.
enable
این عملکرد قابلیت تغییر اندازه ی یک عنصر را فعال می سازد. این متد هیچ برهانی را نمی پذیرد.
option( optionName )
این عملکرد مقدار مشخص شده ی specifiedoptionName. را بازمی گرداند. این گزینه با یکی از موارد استفاده شده با گزینه های قابل تغییر اندازه مطابقت دارد.
option()
یک آبجکت حاوی جفت های key/value می باشد که گزینه های قابل اندازه بندی مجدد را نمایش می دهد. این گزینه نیز برهانی نمی پذیرد.
option(optionName, value )
این عملکرد گزینه های اندازه بندی مجدد را با optionName مشخص شده، تنظیم می کند. این گزینه با یکی از گزینه های تغییر اندازه مطابقت دارد.
option( options )
این عملکرد یک یا چند گزینه را برای اندازه بندی مجدد تنظیم می کند.
widget()
این عملکرد یک آبجکت jQuery باز می گرداند که حاوی عنصر resizable می باشد. این متد برهانی را نمی پذیرد.
مثال:
اکنون اجازه بدهید با استفاده از عملکردهای جدول بالا مثالی را مشاهده کنیم. مثال زیر استفاده از متدهای destroy() و disable() را توضیح می دهد.
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-12, #resizable-13 {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
$(function () {
$(“#resizable-12”).resizable();
$(“#resizable-12”).resizable(‘disable’);
$(“#resizable-13”).resizable();
$(“#resizable-13”).resizable(‘destroy’);
});
شما نمی توانید اولین مربع را تغییر اندازه دهید، چرا که اولین مربع غیرفعال و دومین مربع ناقص می باشد.
مدیریت رویداد روی عناصر resizable:
علاوه بر متد resizable (options) که در بخش های قبل مشاهده کردیم، JqueryUI متدهای دیگری ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدهای event در جدول زیر لیست شده اند:
Event Method
Description
create(event, ui)
این رویداد زمانی آغاز می شود که عنصر resizable ایجاد شده باشد.
resize(event, ui)
این رویداد زمانی آغاز می شود که دسته ی مربوط به تغییر اندازه ی عنصر درگ شود.
start(event, ui)
این رویداد با شروع یک عملیات تغییر اندازه آغاز می شود.
stop(event, ui)
این رویداد در پایان یک عملیات تغییر اندازه آغاز می شود.
مثال:
مثال زیر استفاده از متد را در طول عملیات تغییر اندازه، توضیح می دهد. این مثال استفاده از رویدادهای create و resize را توضیح می دهد:
.ui-widget-header {
background: #b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-14 {
width: 150px;
height: 150px;
padding: 0.5em;
text-align: center;
margin: 0;
}
$(function () {
$(“#resizable-14”).resizable({
create: function (event, ui) {
$(“#resizable-15”).text(“I’m Created!!”);
},
resize: function (event, ui) {
$(“#resizable-16”).text(“top = ” + ui.position.top +
“, left = ” + ui.position.left +
“, width = ” + ui.size.width +
“, height = ” + ui.size.height);
}
});
});