همانطورکه در جریان هستید اسلایدرها امروزه یکی از پر طرفدارترین بخشها در یک وب سایت میباشد.JqueryUI – Slider زمانی استفاده می شود که یک مقدار عددی در داخل یک محدوده ی خاص به دست می آید. مزیت یک slider برای ورودی یک متن این است که برای کاربر غیر ممکن می شود که یک مقدار بد وارد کند. هر مقداری که می توانند با slider انتخاب کنند، معتبر خواهد بود.

jQueryUI از طریق slider widget به ما یک کنترل slider ارائه می دهد. jQueryUI متد slider() را ارائه می دهد که ظاهر عناصر HTML را در صفحه تغییر می دهد و گروه های جدید CSS اضافه می کند که سبک مناسبی به آنها می دهد.

ترکیب:

متد slider () به دو فرم قابل استفاده می باشد:

$(selector, context).slider (options) Method

$(selector, context).slider (“action”, params) Method

متد $(selector, context).slider (options):

متد slider (options) اعلام می کند که یک عنصر HTML باید به عنوان یک slider مدیریت شود. پارامتر options آبجکتی است که رفتار و ظاهر یک slider را تعیین می کند.

ترکیب:

$(selector, context).slider (options);

شما می توانید یک یا چند گزینه را همزمان با استفاده از آبجکت javascript ارائه دهید. اگر بیشتر از یک گزینه برای ارائه وجود داشته باشد، آنها را با استفاده از کاما از یکدیگر مجزا می کنید، مانند ارکیب زیر:

$(selector, context).slider({option1: value1, option2: value2….. });

جدول زیر گزینه های مختلفی را که با این متد به کار گرفته می شود، نشان می دهد:

Option

Description

animate

این گزینه اگر روی true تنظیم شده باشد، وقتی که کاربر مستقیما روی مختصات کلیک می کند، یک اثر انیمیشنی ایجاد می شود. مقدار پیش فرض آن false می باشد.

disabled

این گزینه اگر ر.ی true تنظیم شده باشد، slider را غیرفعال می سازد. مقدار آن به طور پیش فرض false می باشد.

max

این گزینه بالاترین مقداری را که slider می تواند در محدوده داشته باشد، تعیین می کند – وقتی دسته به سمت راست ( برای slider های افقی) یا به سمت بالا (برای slider های عمودی) حرکت داده می شود، مقدار نمایش داده می شود. مقدار آن به طور پیش فرض ۱۰۰ می باشد.

min

این گزینه بالاترین مقداری را که slider می تواند در محدوده داشته باشد، تعیین می کند – وقتی دسته به سمت چپ ( برای slider های افقی) یا به سمت پایین (برای slider های عمودی) حرکت داده می شود، مقدار نمایش داده می شود. مقدار آن به طور پیش فرض ۰ می باشد.

orientation

این گزینه گرایش افقی یا عمودی slider را نشان می دهد. مقدار پیش فرض آن horizontal می باشد.

range

این گزینه تعیین می کند که آیا یک محدوده یک slider را مشخص می کند یا نه. مقدار آن به طور پیش فرض false است.

step

این گزینه فواصل گسسته بین مقادیر حداکثر و حداقل را تعیین می کند که slider اجازه ی نمایش آن را دارد. مقدار پیش فرض آن ۱ می باشد.

value

این گزینه مقدار اولیه ی یک slider دارای یک هندل را تعیین می کند. اگر چند هندل وجود داشته باشد، مقدار مربوط به اولین هندل را تعیین می کند. مقدار پیش فرض آن ۱ است.

values

این گزینه از نوع array می باشد و باعث ایجاد چند هندل می شود و مقدار اولیه را برای آن هندل ها تعیین می کند. این گزینه ردیفی از مقادیر ممکن، هر کدام برای یک هندل، باشد. مقدار پیش فرض آن null است.

بخش بعد چند مثال در رابطه با قابلیت slider به شما ارائه می دهد.

قابلیت پیش فرض:

مثال زیر قابلیت slider را توضیح می دهد که هیچ پارامتری به متد slider() انتقال نمی دهد.

$(function () {

$(“#slider-1”).slider();

});

اجازه بدهید که کد بالا را در یک فایل HTML به نام sliderexample.htm ذخیره کرده و آن را در یک مرورگر استاندارد که javascript را پشتیبانی می کند، باز کنیم، پس از آن باید خروجی زیر را مشاهده کنید. اکنون می توانید با نتیجه بازی کنید.

در مثال بالا یک slider افقی پایه وجود دارد که دارای یک هندل مجزا می باشد که به وسیله ی ماوس یا با استفاده از کلیدهای جهت روی صفحه کلید، جابه جا می شود.

استفاده از value، animate و orientation:

مثال زیر استفاده از سه گزینه ی (a) value (b) animate و (c) orientation را در عملکرد slider از JqueryUI توضیح می دهد.

$(function () {

$(“#slider-2”).slider({

value: 60,

animate: “slow”,

orientation: “horizontal”

});

});

اجازه بدهید که کد بالا را در یک فایل HTML به نام sliderexample.htm ذخیره کرده و آن را در یک مرورگر استاندارد که javascript را پشتیبانی می کند، باز کنیم، پس از آن باید خروجی زیر را مشاهده کنید. اکنون می توانید با نتیجه بازی کنید.

در مثال بالا مقدار slider، به عنوان مثال مقدار اولیه روی ۶۰ تنظیم شده است، و هندل را در مقدار اولیه ی ۶۰ نشاهده می کنید. اکنون مستقیما روی محور کلیک کرده و افکت انیمیشن را مشاهده کنید.

استفاده از range، min، max و values:

مثال زیر استفاده از سه گزینه ی (a) range, (b) min, (c) max و (d) values را در عملکرد slider از JqueryUI توضیح می دهد.

$(function () {

$(“#slider-3”).slider({

range: true,

min: 0,

max: 500,

values: [35, 200],

slide: function (event, ui) {

$(“#price”).val(“$” + ui.values[0] + ” – $” + ui.values[1]);

}

});

$(“#price”).val(“$” + $(“#slider-3”).slider(“values”, 0) +

” – $” + $(“#slider-3”).slider(“values”, 1));

});

اجازه بدهید که کد بالا را در یک فایل HTML به نام sliderexample.htm ذخیره کرده و آن را در یک مرورگر استاندارد که javascript را پشتیبانی می کند، باز کنیم، پس از آن باید خروجی زیر را مشاهده کنید. اکنون می توانید با نتیجه بازی کنید.

در مثال بالا دامنه ی گزینه را برای گرفتن دامنه ای از مقادیر با دو هندل، روی true تنظیم کردیم. فضای بین هندل ها با رنگ زمینه ی متفاوت پر می شود تا مقادیر انتخاب شده را نشان دهد.

متد $(selector, context).slider (“action”, params):

متد (“action”, params) یک عمل روی slider را مجاز می کند، به عنوان مثال حرکت مکان نما به یک موقعیت جدید. این عمل به عنوان یک رشته در اولین مبحث مطرح می شود ( برای مثال value برای نشان دادن یک مقدار جدید از مکان نما). فعالیت هایی را که قابل انتقال هستند، در جدول زیر بررسی کنید.

ترکیب:

$(selector, context).slider (“action”, params);

جدول زیر فعالیت هایی را لیست می کند که با این متد مورد استفاده قرار می گیرند:

Action

Description

destroy

این فعالیت قابلیت slider را از روی یک گزینه به طور کامل حذف می کند. عناصر به وضعیت pre-init خود بازمی گردند. این متد هیچ برهانی (argument) قبول نمی کند.

disable

این عمل قابلیت slider را غیرفعال می سازد. این متد هیچ برهانی (argument) قبول نمی کند.

enable

این فعالیت قابلیت slider را فعال می سازد. این متد هیچ برهانی (argument) قبول نمی کند.

option( optionName )

این فعالیت مقدار معین گزینه ی param را بازمی گرداند. این گزینه با یکی از گزینه های استفاده شده با slider (options) هماهنگ است. optionName نام گزینه ی دریافتی است.

option()

این فعالیت یک آبجکت حاوی جفت های key/value را دریافت می کند که نمایشگر گزینه های slider فعلی hash می باشد.

option( optionName, value )

این فعالیت مقدار گزینه ی slider را در ارتباط با optionName. تعیین شده، تنظیم می کند. optionName. نام گزینه ای است که باید تنظیم شود و value مقداری است که برای این گزینه تنظیم می شود.

option( options )

این عمل یک یا چند گزینه را برای slider تنظیم می کند. گزینه های argument نقشه ای است از جفت های option-value که قرار است تنظیم شوند.

value

این عملکرد مقدار مربوط به of options.value (the slider) را بازمی گرداند. فقط اگر slider منحصر به فرد می باشد، از آن استفاده کنید، در غیر اینصورت از slider (“values”) استفاده کنید. این عمل نیز هیچ برهانی را نمی پذیرد.

value( value )

این عمل مقدار مربوط به slider را تنظیم می کند.

values

این عمل مقدار کنونی مربوط به ofoptions.values را بازمی گرداند ( مقدار slider ها یک ردیف می باشد). این عمل نیز هیچ برهانی را نمی پذیرد.

values( index )

این عمل مقداری برای هندل تعیین شده دریافت می کند. در اینجا index از نوع عدد صحیح می باشد و یک شاخص صفر محور از هندل است.

values( index, value )

این عمل برای هندل تعیین شده، مقدار تنظیم می کند. در اینجا index از نوع شاخص صفر محور است و value مقداری است که باید تنظیم شود.

values( values )

این عمل برای تمام هندل ها مقدار تنظیم می کند.

widget

این عمل یک آبجکت jQuery حاوی slider را بازمی گرداند. این متد هیچ برهانی را نمی پذیرد.

مثال:

اکنون اجازه بدهید مثالی را با استفاده از عملکردهای جدول بالا بررسی کنیم. مثال زیر استفاده از متدهای disable() و value() را توضیح می دهد.

$(function () {

$(“#slider-4”).slider({

orientation: “vertical”

});

$(“#slider-4”).slider(‘disable’);

$(“#slider-5”).slider({

orientation: “vertical”,

value: 50,

slide: function (event, ui) {

$(“#minval”).val(ui.value);

}

});

$(“#minval”).val($(“#slider-5”).slider(“value”));

});

در مثال بالا اولین slider غیرفعال بوده و دومین slider دارای مقدار تنظیم شده ی ۵۰ می باشد.

مدیریت رویداد روی عناصر slider

علاوه بر متد slider (options) ، در بخش قبل مشاهده کردیم که JqueryUI متدهایی را ارائه می دهد که برای یک رویداد خاص آغاز می شوند. این متدهای رویداد در زیر ارائه شده اند:

Event Method

Description

change(event, ui)

این رویداد زمانی آغاز می شود که مقدار هندل تغییر کند، چه از طریق عمل یا از طریق برنامه نویسی.

create(event, ui)

این رویداد با ایجاد slider آغاز می شود.

slide(event, ui)

این رویداد با جابه جایی ماوس در هنگام درگ شدن هندل از طریق slider، آغاز می شود. گزارش مقدار false اسلاید را کنسل می کند.

start(event, ui)

وقتی کاربر شروع به اسلاید کردن کند، این رویداد آغاز می شود.

stop(event, ui)

این رویداد در هنگام توقف یک اسلاید، آغاز می شود.

مثال:

مثال زیر استفاده از متد رویداد را طی عملکرد slider توضیح می دهد. این مثال استفاده از رویدادهای start، stop، change و slide را توضیح می دهد.

$(function () {

$(“#slider-6”).slider({

range: true,

min: 0,

max: 500,

values: [35, 200],

start: function (event, ui) {

$(“#startvalue”)

.val(“$” + ui.values[0] + ” – $” + ui.values[1]);

},

stop: function (event, ui) {

$(“#stopvalue”)

.val(“$” + ui.values[0] + ” – $” + ui.values[1]);

},

change: function (event, ui) {

$(“#changevalue”)

.val(“$” + ui.values[0] + ” – $” + ui.values[1]);

},

slide: function (event, ui) {

$(“#slidevalue”)

.val(“$” + ui.values[0] + ” – $” + ui.values[1]);

}

});

});