یادداشت‌ها

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

در برخی از ورودی‌های یک فرم، لازم است از کاربر یک مقدار در یک محدوده معین را بگیریم. مثلا عدد صحیحی بین 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