نماذج 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">

جرب بنفسك

مفتاح التبديل

مفتاح التبديل غالبًا ما يستخدم لأزرار الـ ON/OFF أو TRUE/FALSE:

لإنشاء مفتاح التبديل، استخدم عنصر <select> مع خاصية data-role="slider" وأضف إثنين من عناصر <option>:

مثال

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">مفتاح التبديل:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">على</option>
      <option value="off">Off</option>
    </select>
  </div>
</form>

جرب بنفسك

نصيحة:استخدم خاصية "محدد" لتحديد أحد الخيارات كمحدد مسبق (مظلل):

مثال

<option value="off" محدد>Off</option>

جرب بنفسك