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

آموزش Input Type : Range

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

آموزش Input Type : Range

کنترل اسلایدر یک یوزر اینترفیس (user interface) بسیار شهودی برای تنظیم یک عدد در یک دامنه می باشد. یک نمونه اسلایدر معمولا در انتخاب گر رنگ (color picker) یافت می شود، جایی که می توانیم پیکان را به سمت راست یا چپ درگ کرده و مقدار RGB درست را انتخاب کنیم.

آموزش Range

قبلا برای ایجاد اسلایدر در صفحه ی وب بین جاوا اسکریپت یا فلش یکی را به عنوان راه حل انتخاب می کردیم. HTML5 برای ذخیره ی هزاران بایت در کد شما اینجاست. با نوع جدید ورودی، کنترل اسلایدر
(‎<input type="range">‎) مانند لیست dropdown خواهد بود.
کد آن به سادگی زیر می باشد.

                    <input id="test" type="range" />‎

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

آموزش Range

مرورگرها ‎<input type="range">‎‏ ‏را اجرا نمی کنند، طوریکه اسلایدر به سادگی آن را مانند یک تکست باکس ساده اجرا خواهد کر.
در نگارش مرورگرهایی که ‎<input type="range">‎ را مانند اسلایدر اجرا می کنند در جدول زیر ارائه شده اند.

Render Range input as Slider
Browsers
IE 10
Firefox 13
Safari 5
Chrome 8
Opera 11

نوع دامنه دارای ویژگی های جالبی است که شاید تمایل داشته باشید یاد بگیرید:

Descriptions
Attribute
مقدار یک ویژگی متداول از عنصر ورودی می باشد. مقدار می تواند هر عدد ممیزی معتبری باشد، نه اینکه لزوما عدد صحیح باشد. مقدار پش فرض عبارت است از کمترین مقدار به اضافه ی نیمی از بیشترین مقدار.
value
کمترین مقدار دامنه، کمترین مقدار پیش فرض صفر می باشد.
min
بیشترین مقدار دامنه، بیشترین مقدار دامنه 100 می باشد.
max
این فاکتور مقیاس گام اسلایدرمی باشد، مقدار پیش فرض یک است و فقط اعداد صحیح مجاز می باشند، مگر اینکه کمترین مقدار عدد غیر صحیح باشد.
step
لیست همان دیتالیست در فصل قبلی می باشد. دیتالیست می تواند با نوع دامنه ی ورودی یکی شود، به هرحال هیچ یک از مرورگرها این ویزگی را در نگارش اجرا نکرده اند.
list

همیشه درک این مطالب در نمایش آسانتر می باشد.
اجازه دهید بیشترین مقدار، کمترین مقدارو استپ فاکتور را مشخص کنیم.

                        ‎<input id="slider1" type="range" min="100" max="500" step="10" />‎

تنظیم مقدار پیش فرض

                        ‎<input id="slider2" type="range" min="100" max="500" step="50" value="100" />‎

کار آن با اعداد ممیزی

                    <input id="slider3" type="range" min="-2.5" max="3.0" step="0.1" />
  • 3009
  •    1620
  • تاریخ ارسال :   1394/07/27

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

ارسال

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

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