jQuery UI API - ชิ้นส่วนเลื่อน (Slider Widget)
หมวดหมู่
การใช้
คำอธิบาย: ลากจับเพื่อเลือกค่า
รุ่นใหม่: 1.5
jQuery UI Slider (Slider) plug-in ที่ช่วยให้การเลือกผ่านทางเลื่อน มีตัวเลือกต่างๆเช่นจับหลายครั้งและเป็นช่วง ที่จับสามารถเคลื่อนย้ายได้โดยใช้เมาส์หรือปุ่มลูกศร
ส่วนประกอบ Slider (Slider Widget) จะถูกสร้างขึ้นกับการเรียนในระหว่างการเตรียม ui-slider-handle องค์ประกอบจับ คุณสามารถสร้างและเพิ่มองค์ประกอบก่อนที่จะเริ่มต้นในขณะที่การเพิ่มองค์ประกอบ ui-slider-handle ชั้นเรียนเพื่อระบุองค์ประกอบจับที่กำหนดเอง มันจะสร้างการจับคู่ value / values ความยาวที่ต้องการของจำนวนที่จับ ตัวอย่างเช่นถ้าคุณระบุ values: [ 1, 5, 18 ] และสร้างการจัดการที่กำหนดเอง, plug-in ที่จะสร้างอีกสอง
ชุดรูปแบบ
ส่วนประกอบ Slider (Slider Widget) โดยใช้ กรอบ jQuery UI CSS เพื่อกำหนดรูปลักษณ์และความรู้สึกของสไตล์ หากคุณจำเป็นต้องใช้แถบเลื่อนเพื่อระบุรูปแบบที่คุณสามารถใช้ชื่อคลาส CSS ต่อไปนี้:
-
ui-slider: การติดตามการควบคุม Slider องค์ประกอบนี้จะขึ้นอยู่กับตัวเลื่อนorientationนอกจากนี้มีui-slider-horizontalหรือui-slider-verticalชั้น-
ui-slider-handle: จับเลื่อน -
ui-slider-range: เมื่อตั้งค่าrangeเมื่อเลือกที่จะใช้ช่วงที่เลือก ถ้าrangeตั้งค่าตัวเลือก"min"หรือ"max"มีองค์ประกอบเพิ่มเติมที่มีตามลำดับui-slider-range-minหรือui-slider-range-maxชั้น
-
วางใจ
ข้อมูลเพิ่มเติม
- ส่วนที่ต้องมีการทำงาน CSS มิฉะนั้นมันจะไม่ทำงาน ถ้าคุณสร้างธีมที่กำหนดเองใช้วิดเจ็ตที่ระบุ CSS แฟ้มเป็นจุดเริ่มต้น
ตัวอย่าง
ง่าย jQuery UI Slider (Slider)
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> สมาชิกเลื่อน (Slider Widget) สาธิต </ title>
<link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style> #slider {margin: 10px;} </ style>
<script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
<script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
<div id = "เลื่อน"> </ div>
<script>
$ ( "#slider") .slider ();
</ script>
</ body>
</ html>