آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش JqueryUI-Slider

دوره های مرتبط با این مقاله

JqueryUI - Slider

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 های عمودی) حرکت داده می شود، مقدار نمایش داده می شود. مقدار آن به طور پیش فرض 100 می باشد.
min
این گزینه بالاترین مقداری را که slider می تواند در محدوده داشته باشد، تعیین می کند – وقتی دسته به سمت چپ ( برای slider های افقی) یا به سمت پایین (برای slider های عمودی) حرکت داده می شود، مقدار نمایش داده می شود. مقدار آن به طور پیش فرض 0 می باشد.
orientation
این گزینه گرایش افقی یا عمودی slider را نشان می دهد. مقدار پیش فرض آن horizontal می باشد.
range
این گزینه تعیین می کند که آیا یک محدوده یک slider را مشخص می کند یا نه. مقدار آن به طور پیش فرض false است.
step
این گزینه فواصل گسسته بین مقادیر حداکثر و حداقل را تعیین می کند که slider اجازه ی نمایش آن را دارد. مقدار پیش فرض آن 1 می باشد.
value
این گزینه مقدار اولیه ی یک slider دارای یک هندل را تعیین می کند. اگر چند هندل وجود داشته باشد، مقدار مربوط به اولین هندل را تعیین می کند. مقدار پیش فرض آن 1 است.
values
این گزینه از نوع array می باشد و باعث ایجاد چند هندل می شود و مقدار اولیه را برای آن هندل ها تعیین می کند. این گزینه ردیفی از مقادیر ممکن، هر کدام برای یک هندل، باشد. مقدار پیش فرض آن null است.

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


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

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








jQuery UI Slider functionality




    



    

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


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

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








jQuery UI Slider functionality




    



    

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


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

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








jQuery UI Slider functionality




    



    


اجازه بدهید که کد بالا را در یک فایل 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 )s
این فعالیت مقدار گزینه ی 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() را توضیح می دهد.








jQuery UI Slider functionality




    



    


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


مدیریت رویداد روی عناصر 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 را توضیح می دهد.








jQuery UI Slider functionality




    



    


  • 1725
  •    828
  • تاریخ ارسال :   1394/07/28

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .