ایجاد: ۵:۴۹ ۱۳۹۱/۷/۱۶
ویرایش: ۹:۲۷ ۱۳۹۲/۱۲/۲۸

یادداشت‌ها

»

کنترلرهای اسلایدی

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

کنترلرهای اسلایدی

همانطور که می‌دانیم، کتابخانه محبوب جی کوئری، یک سری اضافات جهت ایجاد رابط کاربری آماده کرده است که jQuery UI نامیده می‌شود اما به دلیل حجم بالا، لااقل در ایران چندان مورد رغبت برنامه نویسان نیست چرا که هنوز هم بسیاری از کاربران اینترنت در ایران، از اینترنت کم‌سرعت استفاده می‌کنند.
علاوه بر کنترلر اسلایدی که جی کوئری ui معرفی می‌کند، می‌توان از موارد زیر نیز استفاده کرد که بعضا سبک‌تر یا جالب‌تر هستند:

  • slideControl
    یک کنترل اسلایدی فوق سبک! یک کیلوبایتی که به صورت پلاگین جی‌کوئری عرضه شده، یک input از نوع text را به یک اسلایدر تبدیل می‌کند. این پلاگین فقط برای انتخاب یک عدد از یک محدوده (قابل تعیین توسط برنامه‌نویس) به کار می‌رود.
  • rangeslider.js
    این اسلایدر سبک (4kb) نیز نیز مانند اسلایدر اول بسیار ساده است و برای انتخاب یک عدد به کار می‌رود. با این توضیح که در وسایل لمسی نیز به خوبی کار می‌کند و با width صفحه به خوبی خودش را تطبیق می‌دهد (responsive)
    همچنین لازم به ذکر است که این اسلایدر، روی نوع جدید input[type=range] (که در html5 اضافه شده) عمل می‌کند و آن را تبدیل به اسلایدر قابل کشیدن می‌کند.
  • sGlide
    این اسلایدر تک زبانه نسبت به دو مورد فوق، انعطاق‌پذیرتر است و دارای دو حالت افقی و عمودی بوده و رویدادها و تنظیمات خوبی دارد که طبعا موجب شده حجم آن نیز نسبت به دو مورد فوق، بیشتر شود (12 کیلوبایت)
  • Ranger
    این اسلایدر 4 کیلوبایتی همانند موارد فوق، برای انتخاب یک عدد است که حالت عمودی را نیز پشتیبانی می‌کند.
  • jQuery no UI Slider
    یک انتخاب کامل و سبک، با پشتیبانی از وسایل لمسی و اسلاید تک‌زبانه و دو زبانه
    انعطاف‌پذیری بالای این اسلایدر یکی از مشخصه‌های آن است. این اسلایدر روی انواع ورودی‌های فرم (input, select) کار می‌کند و آنها را تبدیل به اسلایدر می‌کند.
  • Ion.Range Slider
    این کنترلر اسلایدی (slider control) نیز مانند مورد قبلی حدود 10 کیلوبایت حجم دارد و برای انتخاب یک مقدار یا یک محدوده و بازه (range) که از وسایل لمسی نیز به خوبی پشتیبانی می‌کند هرچند فقط input هایی با نوع text را تبدیل اسلایدر می‌کند که با چندخط برنامه‌نویسی می‌تواند مانند مورد قبل (jQuery no UI Slider) شود.
  • Powerange
    این اسلایدر تک زبانه‌ای نیز امکانات خوبی دارد و به صورت افقی و عمودی قابل استفاده است. حجم این اسلایدر به صورت شگرفی پایین است و پس از کوچک‌سازی زیر یک کیلوبایت! حجم خواهد داشت. (پیش‌نمایش)

بد نیست بدانید که اگر کسی دغدغه سرعت و سبکی نداشته باشد، علاوه بر jQuery ui می‌تواند از پلاگین‌هایی که بر مبنای آن گسترش یافته نیز استفاده کنید. مثلا jQRangeSlider یک اسلایدر جالب بر مبنای جی‌کوئری UI که امکانات جالبی از جمله تعیین محدوده تاریخ و ... دارد.


یادداشت‌های مرتبط
  1. معرفی برخی اسلایدرهای جی‌کوئری
  2. جایگزین های alert (لایت باکس ها)
  3. پلاگین هایی برای کار با فرم های ورود اطلاعات
  4. افکت‌های متن با جاوا اسکریپت و جی‌کوئری
  5. لینک اسکرول به بالای صفحه
  6. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
  7. پلاگین‌های جی‌کوئری برای استفاده بهتر از خدمات گوگل

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام یادداشت‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: