ฟอร์ม - ลิ้นเลื่อน jQuery Mobile

ควบคุมยื่นเลื่อน jQuery Mobile

ตัวยื่นเลื่อนอนุญาตให้คุณเลือกค่าจากช่วงตัวเลข

เพื่อที่จะสร้างตัวยื่นเลื่อน ใช้ประกายภาพ <input type="range">

ตัวอย่าง

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">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" selected>Off</option>

ทดลองด้วยตัวเอง