اسپینر Spinner

اسپینر یا Spinner چیست؟

اسپینر (Spinner به معنی چرخنده) یکی از انواع المان ها یا ویجت های رابط کاربری گرافیکی است که امکان تغییر یک مقدار عددی را با چرخیدن میان اعداد فراهم می‌کند. معمولا از نام‌های Numeric updown و Spin box به عنوان معادل‌هایی برای اسپینر استفاده می‌شود.

ظاهر و کاربردهای Spinner ها

اسپینرها معمولا در قالب دو دکمه با نماد فلش رو به بالا و پایین در کنار یک تکست باکس ظاهر می‌شوند. در تصویر زیر می‌توانید نمایی از یک Spinner را مشاهده کنید.

از Spinner برای تغییر اعدادی مانند شماره ماه هنگام انتخاب تاریخ، عدد ساعت و دقیقه هنگام تنظیم ساعت، انتخاب صفحات و تعیین تعداد نسخه کپی برای پرینت، تعیین میزان حاشیه سند در واژه پردازها و … استفاده می‌شود.

نحوه تعامل با اسپینر

کاربر می‌تواند با کلیک روی دکمه های اسپینر یا فشردن کلیدهای پیکانی پایین و بالا، عددی که در تکست باکس نمایش داده می‌شود را کاهش یا افزایش دهد. (فشردن کلیدهای پیکانی زمانی باعث تغییر مقدار عدد می‌شوند که اسپینر، فوکس را در اختیار داشته باشد). به این ترتیب که با فشردن کلید جهت پایین یا کلیک روی دکمه فلش پایین، عدد داخل تکست باکس کاهش پیدا می‌کند. با فشردن کلید جهت بالا یا کلیک روی دکمه فلش بالا نیز عدد داخل تکست باکس افزایش پیدا می‌کند. معمولا هر بار فشردن کلیدهای بالا و پایین یا کلیک روی دکمه‌ها باعث کاهش یا افزایش یک واحدی عدد می‌شود. با این حال ممکن است مقدار یا گام تغییر در اسپینر کمتر یا بیشتر از یک واحد باشد.

فراموش نکنید در Spinner ها معمولا تغییر عدد در یک بازه مشخص شده امکان‌پذیر است. به عبارت بهتر در اغلب اوقات عدد موجود در تکست باکس با کمک اسپینر می‌تواند بین یک عدد حداقل (مینیمم) و حداکثر (ماکزیمم) تغییر پیدا کند.

علاوه بر روش‌های فوق، امکان تایپ مستقیم عدد موردنظر در تکست باکس نیز وجود دارد. مشروط به اینکه عدد وارد شده در بازه اعداد مجاز اسپینر باشد. وارد کردن حروف یا اعداد خارج از بازه در تکست باکس کنار اسپینر امکان‌پذیر نیست. همچنین می‌توانید از چرخ ماوس برای افزایش یا کاهش این عدد استفاده کنید.

فراموش نکنید پایین نگه داشتن کلیدهای جهت بالا و پایین (به جای فشردن آن‌ها) معمولا باعث می‌شود سرعت تغییر عدد افزایش پیدا کند.

اسپینر در HTML

در HTML می‌توانید از المان <input> برای دریافت مقادیر عددی در صفحات وب استفاده کنید. کافیست مشابه با مثال زیر مقدار “number” را به خصوصیت type در تگ شروع این المان اختصاص دهید. معمولا نتیجه این المان به صورت یک Spinner در صفحات وب رندر می‌شود.

<form action="/action_page.php">
   <label for="hour">Hour (between 1 and 24):</label>
   <input type="number" id="hour" name="hour" min="1" max="24" value="2">
   <br><br>
   <input type="submit" value="Submit">
</form>

تصویر زیر نتیجه مثال فوق را نمایش می‌دهد. در این المان از خصوصیت‌های min و max برای تعیین حداقل و حداکثر اعداد مجاز و از خصوصیت value برای تعیین مقدار پیشفرض جعبه متنی استفاده می‌شود. برای تعیین گام تغییر هم می‌توانید از خصوصیت step کمک بگیرید.