فرم jQuery Mobile - اسلایدر

کنترل اسلایدر jQuery Mobile

اسلایدر به شما امکان می‌دهد که از یک دامنه مشخص از اعداد انتخاب کنید:

برای ایجاد یک اسلایدر، از علامت ورودی <input type="range"> استفاده کنید:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">نقاط:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>
</form>

آزمایش کنید

برای تعیین محدودیت‌ها از این ویژگی‌ها استفاده کنید:

  • max - بیشترین مقدار مجاز
  • min - کمترین مقدار مجاز
  • step - فاصله قانونی اعداد
  • value - مقدار پیش‌فرض

توضیح:اگر می‌خواهید مسیر این بخش از تراک را که نشان‌دهنده مقدار滑块的 پایانی است، برجسته کنید، data-highlight="true" را اضافه کنید:

مثال

<input type="range" data-hightlight="true">

آزمایش کنید

کلید واکنشی

کلید واکنشی معمولاً برای کلیدهای روشن/خاموش یا درست/غلط استفاده می‌شود:

برای ایجاد یک کلید واکنشی، از عنصر <select> با data-role="slider" استفاده کنید و دو علامت انتخابی <option> اضافه کنید:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Off</option>
    </select>
  </div>
</form>

آزمایش کنید

توضیح:برای اینکه یکی از گزینه‌ها را به عنوان پیش‌انتخاب (متمایز) تنظیم کنید از ویژگی "selected" استفاده کنید:

مثال

<option value="off" انتخاب شده>Off</option>

آزمایش کنید