آموزش اسکرچ به صورت آنلاین

اسپینر Spinner

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

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

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

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

اسپینر Spinner یا Numeric updown

از 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 کمک بگیرید.

نمایی از نتیجه کد HTML حاوی یک المان input برای ایجاد Numeric updown یا اسپینر (Spinner)

پیوندهای پیشنهادی تک دیک

لینک واژه در ویکی‌پدیا

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *