کاربرای عزیز سلام ،روزتون بخیر با ادامه اموزشهای jquery در زمینه متدها همراه شما عزیزان هستم.
jQueryUI متد selectable() را برای انتخاب عنصر DOM به طور مجزا یا در گره، ارائه می دهد. با این متد عناصر با درگ کردن یک باکس با ماوس بر روی آنها انتخاب می شوند. همچنین می توان با کلیک کردن و با درگ کردن عناصر در حالیکه دکمه ی Ctrl را نگاه داشته اید، انتخاب کنید، که به این وسیله انتخاب چند مورد ممکن می شود.
ترکیب:
متد selectable() به دو شکل مورد استفاده قرار می گیرد:
$(selector, context).selectable (options) Method
$(selector, context).selectable (“action”, params) Method
متد $(selector, context).selectable (options)
متد selectable (options) بیان می کند که یک عنصر HTML حاوی آیتم های قابل انتخاب می باشد. پارامتر options آبجکتی است که رفتار عناصر انتخابی را تعیین می کند.
ترکیب:
$(selector, context).selectable (options);
می توانید با استفاده از آبجکت Javascript یک یا چند گزینه را ارائه دهید. اگر بیشتر از یک گزینه برای ارائه وجود دارد، با استفاده از کاما می توانید آنها را از یکدیگر مجزا کنید، مانند زیر:
$(selector, context).selectable({option1: value1, option2: value2….. });
جدول زیر گزینه هایی را ارائه می دهد که با این متد استفاده می شوند:
Option
Description
appendTo
این گزینه بیان می کند که کدام عنصر مجموعه (lasso) باید ضمیمه شود. مقدار پیش فرض آن body می باشد.
autoRefresh
اگر این گزینه روی true تنظیم شده باشد، موقعیت و اندازه ی هر آیتم قابل انتخاب، در ابتدای یک عملکرد انتخاب محاسبه می شود. مقدار پیش فرض آن true می باشد.
cancel
این گزینه انتخاب را ممنوع می کند. به طور پیش فرض مقدار آن input,textarea,button,select,option می باشد.
delay
این گزینه برای تنظیم زمان به هزارم ثانیه در زمان شروع انتخاب، استفاده می شود. این گزینه می تواند از انتخاب های ناخواسته جلوگیری کند. مقدار پیش فرض آن ۰ است.
disabled
وقتی این گزینه روی true تنظیم شده باشد، مکانیزم انتخاب غیرفعال می شود. کاربران نمی توانند موردی را انتخاب کنند تا اینکه مکانیزم با استفاده از دستورالعمل selectable (“enable”) به حالت قبل باز گردد. مقدار پیش فرض آن false می باشد.
distance
این گزینه فاصله ای است که ماوس ( به پیکسل) باید جابه جا شود تا مشخص شود که انتخاب در حال پیشروی است. این مسئله به عنوان مثال برای جلوگیری از کلیک های ساده از اینکه به عنوان یک گروه ساده در نظر گرفته شود، جلوگیری می کند. مقدار پیش فرض آن ۰ است.
filter
این گزینه انتخابگری است که نشان می دهد کدام عناصر می توانند بخشی از مجموعه باشند. مقدار پیش فرض آن * می باشد.
tolerance
این گزینه تعیین می کند که از کدام حالت برای امتحان کردن این مورد که مجموعه ی کمک کننده (lasso) باید یک آیتم را انتخاب کند، استفاده می شود. مقدار پیش فرض آن touch است.
بخش بعد به شما چند مثال کاربردی از قابلیت انتخاب را نشان خواهد داد.
قابلیت پیش فرض
مثال زیر، نمونه ی ساده ای از قابلیت انتخاب می باشد که پارامتری به متد selectable() انتقال نمی دهد.
#selectable-1 .ui-selecting {
background: #707070;
}
#selectable-1 .ui-selected {
background: #EEEEEE;
color: #000000;
}
#selectable-1 {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-1 li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
$(function () {
$(“#selectable-1”).selectable();
});
سعی کنید روی تولیدات کلیک کنید، از کلید CTRL استفاده کنید تا چند مورد را انتخاب کنید.
استفاده از delay و distance
مثال زیر استفاده از دو گزینه ی delay و distance را در عملکرد selectable مربوط به JqueryUI را توضیح می دهد.
#selectable-2 .ui-selecting, #selectable-3 .ui-selecting {
background: #707070;
}
#selectable-2 .ui-selected, #selectable-3 .ui-selected {
background: #EEEEEE;
color: #000000;
}
#selectable-2, #selectable-3 {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-2 li, #selectable-3 li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
$(function () {
$(“#selectable-2”).selectable({
delay: 1000
});
$(“#selectable-3”).selectable({
distance: 100
});
});
Starts after delay of 1000ms
Starts after mouse moves distance of 100px
سعی کنید روی تولیدات کلیک کنید، با استفاده از دکمه ی CTRL چند مورد را با هم انتخاب کنید. متوجه خواهید شد که انتخاب محصول ۱ و ۲ و ۳ پس از یک وقفه ی ۱۰۰۰ms انجام می شود. انتخاب محصولات ۴، ۵، ۶ و ۷ به طور مجزا انجام پذیر نمی باشند. انتخاب تنها پس از اینکه ماوس یک فاصله ی ۱۰۰ px را جابه جا می شود، آغاز می شود.
استفاده از فیلتر
مثال زیر استفاده از دو گزینه ی delay و distance را در قابلیت انتخاب از JqueryUI نشان می دهد.
#selectable-4 .ui-selecting {
background: #707070;
}
#selectable-4 .ui-selected {
background: #EEEEEE;
color: #000000;
}
#selectable-4 {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-4 li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
$(function () {
$(“#selectable-4”).selectable({
filter: “li:first-child”
});
});
سعی کنید روی محصولات کلیک کنید. متوجه خواهید شد که تنها اولین محصول قابلیت انتخاب شدن را دارد.
متد $(selector, context).selectable (“action”, params)
متد selectable (“action”, params) می تواند یک عملکرد را روی عناصر دارای قابلیت انتخاب اجرا کند، از جمله جلوگیری از قابلیت انتخاب. این عملکرد به عنوان یک رشته در اولین برهان تعیین می شود ( به عنوان مثال disable برای متوقف کردن انتخاب). عملکردهایی را که منتقل می شوند در جدول زیر بررسی کنید.
ترکیب
$(selector, context).selectable (“action”, params);
جدول زیر عملکردهای مختلفی را نشان می دهد که با این متد قابل استفاده می باشند:
Action
Description
destroy
این عملکرد قابلیت انتخاب را از یک عنصر کاملا حذف می کند. عناصر به وضعیت pre-init خود بازمی گردند.
disable
این عملکرد قابلیت انتخاب را غیرفعال می سازد. این متد هیچ برهانی را نمی پذیرد.
enable
این عملکرد قابلیت انتخاب را فعال می سازد. این متد هیچ برهانی را نمی پذیرد.
option( optionName )
این عملکرد مقدار مربوط به optionName تعیین شده را به دست می آورد.
option()
این عملکرد آبجکتی حاوی جفت های key/value را می گیرد که نشان دهنده ی گزینه های انتخابی hash می باشند.
option( optionName, value )
این فعالیت مقدار گزینه ی selectale مربوط به optionName. تعیین شده را تنظیم می کند. optionName نام گزینه ای است که قرار است تنظیم شود و value مقداری است که قرار است برای این گزینه تنظیم شود.
option( options )
این عملکرد یک یا چند گزینه را برای انتخاب تنظیم می کند. Options نقشه ای است از جفت های option-value که قرار است تنظیم شوند.
refresh
این عملکرد باعث می شود که اندازه و موقعیت عناصر انتخابی دوباره تنظیم شوند. بیشتر زمانی استفاده می شود که گزینه ی autoRefresh غیر فعال باشد ( در حالتیکه روی false تنظیم باشد). این متد هیچ برهانی را قبول نمی کند.
widget
این عملکرد یک آبجکت jQuery می باشد که حاوی عنصر انتخابی می باشد. این متد هیچ برهانی را نمی پذیرد.
مثال
اکنون اجازه بدهید که با استفاده از عملکردهای بالا، مثالی را بررسی کنیم. مثال زیر استفاده از متدهای disable() و option( optionName, value ) را توضیح می دهد.
#selectable-5 .ui-selecting, #selectable-6 .ui-selecting {
background: #707070;
}
#selectable-5 .ui-selected, #selectable-6 .ui-selected {
background: #EEEEEE;
color: #000000;
}
#selectable-5, #selectable-6 {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-5 li, #selectable-6 li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
$(function () {
$(“#selectable-5”).selectable();
$(“#selectable-5”).selectable(‘disable’);
$(“#selectable-6”).selectable();
$(“#selectable-6”).selectable(“option”, “distance”, 1);
});
Disabled using disable() method
Select using method option( optionName, value )
سعی کنید روی محصولات کلیک کنید، از دکمه ی CTRL برای انتخاب چند مورد استفاده کنید. متوجه خواهید شد که محصول ۱، ۲ و ۳ غیرفعال می باشند. انتخاب محصول ۴، ۵، ۶ و ۷ پس از حرکت ماوس به اندازه ی ۱ px اتفاق می افتد.
مدیریت رویداد روی عناصر انتخابی:
علاو بر متد selectable (options) که در بخش قبل مشاهده کردیم، JqueryUI متدهای دیگری را ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدها در جدول زیر لیست شده اند:
Event Method
Description
create(event, ui)
این رویداد زمانی آغاز میشود که عنصری دارای قابلیت بنتخاب (selectable) ایجاد شود. رویداد از نوع Event و ui از نوع Object می باشد.
selected(event, ui)
این رویداد برای هر عنصری که انتخاب می شود، آغاز می شود. رویداد از نوع Event و ui از نوع Object می باشد.
selecting(event, ui)
این رویداد برای هر عنصری با قابلیت انتخاب که قرار است انتخاب شود، آغاز می شود. در حالیکه رویداد از نوع Event است، ui از نوع Object است.
start(event, ui)
این رویداد در ابتدای عملکرد انتخاب آغاز می شود. در حالیکه رویداد از نوع Event است، ui از نوع Object است.
stop(event, ui)
این رویداد در انتهای عملکرد انتخاب آغاز می شود. در حالیکه رویداد از نوع Event است، ui از نوع Object است.
unselected(event, ui)
این رویداد در انتهای عملکرد انتخاب برای هر عنصری که از حالت انتخاب خارج شده باشد، آغاز می شود. در حالیکه رویداد از نوع Event است، ui از نوع Object است.
unselecting(event, ui)
این رویداد در زمان عملکرد انتخاب برای عنصر انتخاب شده که قرار است از حالت انتخاب خارج شود، آغاز می شود. در حالیکه رویداد از نوع Event است، ui از نوع Object است.
مثال زیر استفاده از متدی را در زمان قابلیت انتخاب، توضیح می دهد. این مثال استفاده از رویداد selected را توضیح می دهد.
#selectable-7 .ui-selecting {
background: #707070;
}
#selectable-7 .ui-selected {
background: #EEEEEE;
color: #000000;
}
#selectable-7 {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
}
#selectable-7 li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size: 14px;
}
$(function () {
$(“#selectable-7”).selectable({
selected: function () {
var result = $(“#result”).empty();
$(“.ui-selected”, this).each(function () {
var index = $(“#selectable-7 li”).index(this);
result.append(” #” + (index + 1));
});
}
});
});
Events
Selected Product>
سعی کنید که روی محصولات کلیک کنید، با استفاده از دکمه ی CTRL چند مورد را انتخاب کنید. شما تعداد موارد انتخاب شده را در پایین مشاهده خواهید کرد.
