การควบคุมมือถือ jQuery Slider
เลื่อนช่วยให้คุณสามารถเลือกค่าจากช่วงของตัวเลข:
เพื่อสร้างเลื่อนใช้ <input type="range"> :
ตัวอย่าง
<form method="post" action="demoform.asp">
<label for="points">Points:</label>
< input type="range" name="points" id="points" value="50" min="0"
max="100">
</form>
ลองตัวเอง» ใช้แอตทริบิวต์ต่อไปนี้เพื่อระบุข้อ จำกัด :
- max - ระบุค่าสูงสุดที่อนุญาต
- min - ระบุค่าต่ำสุดที่ได้รับอนุญาต
- step - ระบุช่วงเวลาที่ถูกต้องตามกฎหมายจำนวน
- value - ระบุค่าเริ่มต้น
เคล็ดลับ: หากคุณต้องการที่จะแสดงค่าที่ปุ่มแถบเลื่อนเพิ่ม data-show-value="true" :
เคล็ดลับ: หากคุณต้องการความคุ้มค่าที่จะปรากฏขึ้นบนหน้าจอของคุณเช่นคำแนะนำเครื่องมือ (ตามที่คุณเลื่อน), เพิ่ม data-popup-enabled="true" :
เคล็ดลับ: หากคุณต้องการที่จะเน้นการติดตามถึงค่าตัวเลื่อนเพิ่ม data-highlight="true" :
เปลี่ยนสลับพลิก
สวิทช์พลิกมักจะใช้สำหรับเปิด / ปิดหรือปุ่มจริง / เท็จ:
เพื่อสร้างสวิทช์พลิกให้ใช้ <input type="checkbox"> และระบุ data-role ของ "flipswitch" :
ตัวอย่าง
<form method="post" action="demoform.asp">
<label for="switch">Flip toggle switch checkbox:</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form> ลองตัวเอง» โดยค่าเริ่มต้นข้อความบนสวิทช์พลิกเป็น "On" และ "Off" ใช้ data-on-text และ data-off-text แอตทริบิวต์ที่จะเปลี่ยนแปลงนี้:
ตัวอย่าง
<input type="checkbox" data-role="flipswitch" name="switch" id="switch"
data-on-text="True" data-off-text="False" >
ลองตัวเอง» เคล็ดลับ: ใช้ "checked" แอตทริบิวต์การตั้งค่าหนึ่งในตัวเลือกที่จะเลือกไว้ล่วงหน้า:
ตัวอย่าง
<input type="checkbox" data-role="flipswitch" name="switch" id="switch"
checked >
ลองตัวเอง» ตัวอย่างเพิ่มเติม
เลื่อนช่วง
วิธีที่จะทำให้เลื่อนด้วยสองมือจับที่ช่วยให้ผู้ใช้สามารถระบุค่าต่ำสุดและสูงสุดในช่วง
สไตล์สวิทช์พลิก
วิธีที่จะทำให้สวิทช์พลิกกว้าง